Tuesday, November 8, 2011

Dynamic Positioning of Overlay

jQuery Tools Overlay can be positioned statically when used out of the box, by setting top and left properties.

The good news is that the configuration can be overwritten in onBeforeLoad event handler. This is how an overlay can be positioned next to its trigger:


jQuery('.overlayTrigger').overlay({
   ...

   onBeforeLoad: function() {
      var overlay = this.getOverlay();
      var trigger = this.getTrigger();
      var overlayConfig = this.getConf();

      //position overlay
      overlayConfig.top = trigger.offset().top 
            - overlay.outerHeight() 
            - jQuery(document).scrollTop();
      overlayConfig.left = trigger.offset().left 
            - overlay.outerWidth() 
            - jQuery(document).scrollLeft();

      //... flip popup over when appropriate
      if (overlayConfig.top < 0)
          overlayConfig.top = trigger.offset().top 
                + trigger.outerHeight() 
                - jQuery(document).scrollTop();
      if (overlayConfig.left < 0)
          overlayConfig.left = trigger.offset().left 
                + trigger.outerWidth() 
                - jQuery(document).scrollLeft();
   }
});

1 comment:

Sue Bair said...
This comment has been removed by the author.