Splitform Tutorial

Splitform description

There may be instances where a form resides in a different layer than (for example) the submit button or other normally attached element. The DOMs definately cause a problem here, as the form can't be split across the DIV. This demo shows how to have an element in one layer control (submit) a form in another.

Known Issues

Reliance on javascript to submit your form may not be your gig. Also, this demo is only scratching the surface on other uses for this kind of design. You may want to splice two forms together, have and optional section which is normally hidden, etc.

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.