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();
   }
});

Rendering of HyperLink

I have been using HyperLink control recently and have found its MSDN documentation incomplete.

The HyperLink control can be displayed as text or an image. Use the Text property to specify the text to display for the HyperLink control.

If both the Text and ImageUrl properties are set, the ImageUrl property takes precedence. If the image is unavailable, the text in the Text property is displayed. In browsers that support ToolTip functionality, the Text property also becomes the ToolTip.

I needed to insert some other controls into the child Controls of HyperLink and that is what is not covered in MSDN.

There are actually three mutually exclusive branches in rendering of HyperLink.

  1. If ImageUrl is set, an Image is rendered (Text property possibly used for an alternate text),
  2. children Controls are rendered when available, (there is presumably more to it, but I have not analyzed it further,)
  3. and finally plain Text is output otherwise.

By the way, ILSpy has proved useful in revealing the HyperLink internals.