[jQuery] Re: Design pattern for animate()

[Liam Potter]

use width() and offset in an if statement

var pageWidth = $(document).width();
var hudOffset = hud.offset();

if ( pageWidth - hudOffset.left < 360 ) {
   hud.animate({left:-360}, 90);
} else {
   return false;
}

I'm guessing you'd need something like that.

littlerobothead wrote:

I have a small hud-syle control I've built for a project. I'm using
the following code to activate a collapse button on the hud, and to
resize the hud so that it can accommodate some wide data.

        $('li.hud-left-tab').click(function() {
                // First, if the hud is collapsed, slide it down
                $("#data").slideDown(20);
                // Next, if it's been expanded, shrink it
                hud.animate({"width" : hudWidth_init}, 90);
                hudChild.css({"width": hudWidth_init});
                $("#map-filter-popdown-shadow").hide();
        });
        $('li.hud-center-tab').click(function() {
                // Perform the same check for this tab
                $("#data").slideDown(20);
                hud.animate({"width" : hudWidth_init+360}, 90);
                hudChild.css({"width": hudWidth_init+360});
                $("#map-filter-popdown-shadow").hide();
   });
        $('img.panel-closure').toggle(function(){
                $(this).attr("src","/images/show-panel.png");
                $('#data').slideToggle(90);
        }, function() {
                $(this).attr("src","/images/hide-panel.png");
                $('#data').slideToggle(90);
        });

This works really well, and does almost everything I need it to do.
The only issue is that when the hud is near the edge of the viewport
and the user resizes it, its right edge scoots out of view. What I'd
like to do is add some kind of conditional logic that says, "if this
hud is within  X pixels of the right or left edge of the screen, add
some right margin either during or after the resize animation
happens." I keep trying different ways of doing this, to no avail. Any
ideas? Thanks.