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.