Throttlebars Tutorial

Throttlebars description

Scrollbars are nifty, but have a few complications. The demo/tutorials shows the difficulty Netscape 6 can have with them. They can also be a bit confusing to the user, and there's an open question as to why duplicate something already on a browser.

Throttlebars are like scrollbars, but don't have any drag/drop functionality. Simply mousing over the throttlebar enacts the scrooling. Throttlebars also have the added benefit of being able to slow down or speed up the scrolling simply by moving the mouse.

Known Issues

Speed control could be a little finer and more exact with better math.

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.