CodeCodex @ whatisfound.com
You might be asking yourself what, exactly, is a site saver. If you aren't, please do so now, as this is required to make the rest of the paragraph relevant to you. A site saver is a term I've coined to describe a kind of effect similar to a screen saver, only for a page in the browser. Unlike it's kin (the screen saver), the site saver has no functional saving affect. That is to say, it's purpose isn't to dim the monitor or keep pixels changing to prolong it's life and stave off image retention. It is simply an amusing bit of spice to add to your page that should cause fun behavior after a certain amount of nothing has happened for a while. Read on...
Click the button here to turn on the site saver for this page. When you've seen enough, click it again (or anywhere on the page) to deactivate it.
In general, a site saver is like any other kind of effect that triggers on a page after a user action, except that for the most part, the user action in this case should be inaction. Normally, I have the effect bound to an onMouseMove listener, like this:
var SITE_SAVER;
function noMovement() {
clearTimeout(SITE_SAVER);
SITE_SAVER = setTimeout("runSiteSaver();",120000);
}
:
:
window.onmousemove = noMovement;
Every time the user moves the mouse on the page, SITE_SAVER, the global variable I use to store the timeout object in, gets cleared and then set again to call the runSiteSaver() method after 2 minutes.
Now, on this page, I trigger the site saver from a button press, simply to satisfy instant gratification. If you implement your own site saver, be sure to choose a long timeout length; people reading your page probably don't want to be interrupted every 10 seconds with an example of your scripting brilliance.
For the site saver you see here, I darken the screen with a semi-transparent, wall-to-wall, floor-to-ceiling, black screen like so...
div#dim {
background-image:url("../../images/index2/black_trans.png");
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}
...And then I just use typewriter text from various quotes in an array into a <span> added to random top and left coordinates, and preformatted with this CSS...
span#site_saver {
/* Text and border color reset through JavaScript */
position: fixed;
border: 2px solid black;
padding: 4px 6px;
display: block;
font: 16px Inconsolata, "Lucida Console", "Courier New", monospace;
z-index: 125;
}
And voilà!
...Unless you're using Internet Explorer 6, which cannot handle transparent images, and so cannot comply with my dimming instructions. (IE does have a proprietary filter CSS property that can be used for transparency, but I found this to be extremely processor taxing, particularly when coupled with the typewriter text.) Also, IE6 avoids supporting position: fixed; like the plague, so it has some special scripting to make it position: absolute; and then adds how far you've scrolled down the page to the y-coordinate. Yay, IE.