Smartfooter Tutorial

Smartfooter description

Smartfooter will place the footer either at the bottom of the screen if the browser is taller than the content or underneath the content if the browser is smaller.

Known Issues

Might be slightly annoying.

Step 1: Setup the page with glimmer includes

This demo requires the vis, event, and move modules for glimmer. This is using the new structure of glimmer, which is why event is seperated out. Include the scripts in the header to include them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>zoomer demo</title>
<SCRIPT src="js/glimmer.js"></script>
<SCRIPT src="js/glimmer_vis.js"></script>
<SCRIPT src="js/glimmer_event.js"></script>
<SCRIPT src="js/glimmer_move.js"></script>

</head>

<body>

</body>
</html>

Step 2: Add in the content DIV's

This demo requires two divs (with a header thrown in here for fun) - the zoomee and the zoomed. The zoomee should be an image half the size (this is not really required, but probably the safest method) of the "original" image which is the zoomed. The stylesheet here is mostly decorative, and I think I stole it from another glimmer demo anyway .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}
</STYLE>

</head>

<body >
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

Step 3: Initialize the layers and clip the zoomed

The init function added here simply calls the initAll to translate the DIVs into layers and then uses the clip method to completely clip the zoomed layer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}

</STYLE>
<SCRIPT>
function init() {
initAll();
layer_zoomed.clip(0,0,100,100);
}

</SCRIPT>
</head>

<body onload="init()">
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

Step 4: Add the "zoomin" function and it's watch

The zoomin function here does all the work. It:

determines the X and Y of the mouse coordinate as it moves
Determines the relative X and Y of the zoomee layer
Bounces the zoomed layer the opposite direction.
Re-clip the zoomed layer based on the mouse position (This is the same trick as scrolling, where you move the layer in one direction, and then re-clip it the same amount.)

A setWatch is then called in the init to watch for mousemove and send the event to zoomin. Remember that a setWatch without a Pager will watch the entire document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}

</STYLE>
<SCRIPT>
function init() {
initAll();
layer_zoomed.clip(0,0,100,100);
setWatch("onmousemove",zoomin);
}

function zoomin(event) {
if(document.all){thisY=window.event.clientY;thisX=window.event.clientX;}
else if(document.getElementById || document.layers){thisY=event.pageY;thisX=event.pageX;}
thisX2 = thisX - layer_zoomee.left;
thisY2 = thisY - layer_zoomee.top;
layer_zoomed.bounce(0-thisY2,0-thisX2);
layer_zoomed.clip(thisY2,thisX2,thisY2+100,thisX2+100);
}
</SCRIPT>
</head>

<body onload="init()">
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

See this in action.