Dynamic Absolute Positioning with jQuery

October 7th, 2010
|

I had to build a website recently that used fixed positioning on most items except for a content area that scrolled. The fixed items (or absolutely positioned ones) still needed to shift when the page re-sized if content would roll to the next line. So I had to come up with a clever way to handle dynamic absolutely positioned elements. The following is what I came up with. It just loops through each child of the body. On each child, it finds the previous item (without a ‘skip’ class) and calculates that item’s top css attribute plus it’s height.

<script type=”text/javascript” charset=”utf-8″>
$(function(){
  jQuery(window).resize(function(){
    jQuery(‘body’).children().each(function(){
      var $this = jQuery(this);
      var $prev = jQuery(this).prevAll().not(‘.skip’).first();
      if($prev.length > 0){
          var newTop = $prev.outerHeight(true) + parseFloat($prev.css(‘top’));
          jQuery(this).css({top:newTop+’px’});
      }
    });
  });
  jQuery(window).trigger(‘resize’);
});
</script>

Check out the demo:
http://www.aaronvanderzwan.com/playground/dynamic_absolutes/index.html

Comments are closed.

Comments have been closed for this post. If you would like to ask a question or need help, please post in the forums.