workblog » JavaScript

Lightbox Clones

Ian — Fri, 04 Dec 2009 18:26:16 +0000

The Lightbox Clones Matrix is a list of scripts that do inline popups, ala Lightbox. You can filter by JavaScript frameworks and features.

Preloading Images

Ian — Fri, 29 May 2009 18:10:00 +0000

I’ve been looking for a good way to preload images for rollovers, but it seems like a lot of the common methods have problems.

There are reliability issues using a JavaScript Image object or document.write()
Some browsers won’t load a display:none containing element

So far the best way I’ve found is Perishable Press’ Better Image Preloading without JavaScript method. You can set the hover images as the background on the regular image, and then position it outside of the image, so it doesn’t show up:


#foo1 {background: url(foo1-hover.png) no-repeat -500px -500px ;}
#foo2 {background: url(foo2-hover.png) no-repeat -500px -500px ;}
#foo3 {background: url(foo3-hover.png) no-repeat -500px -500px ;}

The problem I have with this one, though, is that the hover images will be loaded with the rest of the page, making it slower. I don’t think they should be loaded until after the rest of the page has finished loading. So, I used SitePoint’s addLoadEvent() to assign the background images after the page loads:


document.getElementById("foo1").style.background = "url(foo1-hover.png) no-repeat -500px -500px";
document.getElementById("foo2").style.background = "url(foo2-hover.png) no-repeat -500px -500px";
document.getElementById("foo3").style.background = "url(foo3-hover.png) no-repeat -500px -500px";

Passing Arguments to an Event Handler

Ian — Tue, 30 Dec 2008 21:34:54 +0000

Mark Wilton-Jones has a good overview of the most common methods passing arguments to an event handler in JavaScript. This page has a function (addevent2()) that worked for me.

mouseenter, mouseleave Events for non-IE Browsers

Ian — Tue, 30 Dec 2008 18:16:46 +0000

Stephen Stchur has written a script to mimic IE’s proprietary mouseenter and mouseleave Javascript events for non-IE browsers. This is useful when you have one element (B) laying on top of another element (A), and you want to do a mouseover/mouseout on A without the mouseout firing when you hover on B. Quirksmode has articles on JavaScript mouse events and event bubbling that give good background information.

Update: MooTools has mouseenter/mouseleave built-in.