jQuery Tools: Overlay Fix

While working on a project, I found a great jQuery add-on, jQuery Tools. Tools adds what the jQuery UI left out... A tooltip, overlay, expose, and scroller.

There was one little problem, the overlay. Decided to use it on a login button at the top right corner of the site. Instead of having users go to another page, I would just open up the external login page over the current page. Worked like a charm... well... locally... and before I added in the Google Analytics... and Google Adsense... and the images from Amazon S3.

The overlay would not load until the page had fully loaded. If the link was clicked before that time, it would go to the actual login page (which did not look good since it was designed to fit in the overlay).

Went into the source code for the overlay and saw that it had an onload event listener that waited till the page to load. Ahhh ha! Here was the problem. So this wait was removed as well as disabling the default click for the link.

As I played around with it a bit more and added a few more overlays on the page, I noticed that the overlay.png file, used as the background image, was being loaded multiple times. Since this site will be a high traffic site, I could not have five of the same PNGs being loaded, even if they were cached. Looking into the code, it seemed these were used for the zoom effect. This site is geared more towards performance than minor details so a simple rounded box zooming would suffice, not only speeding up loading but lightening up bandwidth as well.

Three attributes were added: zoomType, boxColor, and boxRadius. By default the overlay works as expected. You can add the new features using the following:

• zoomType - Two options, 'img or 'div'. 'img' uses the background image to zoom. 'div' uses a div with a background color to zoom. Default, 'img'.
• boxColor - If using 'div', the background color that matches your overlay background.
• boxRadius - The radius, in pixels, your box will have, if any. (FireFox, Safari, and Chrome only).
  

Three fixes were fixed:

• onLoad - Now loads the overlay after the dom is loaded but before the page is fully loaded.
  
• Disabled click event - The default click event has been disabled to prevent the link from navigating to the actual page.
• Imageless zoom - If you are using something like one of the simple shadowed boxes included in the zip at jQuery Tools and care more about performance over details, you can have a rounded (rounded in Chrome, Safari, and Firefox) box zoom in instead of the actual image.

You can download the plugin from jQuery:

• Source
• Minified