Thanks, that worked really well. I was unaware of the offset function; good stuff!
On Jul 16, 11:38 am, Liam Potter <[email protected]> wrote: > 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.
