JavaScript Generated Layers

Normal DHTML pages are limited by their number of layers. More than fifteen is unusual - the file size gets too high. So why not get JavaScript to write all the HTML for the layers using its Write function and a few equations? Amazingly, it works. The result is hundreds of layers and weird and wonderful patterns produced by a tiny file (<2k).

WARNING - BROWSER COMPATIBILITY
This is on-the-edge stuff and not very safe. All the demonstrations below seem to work on Netscape Navigator v 4+. Internet Explorer 5 is also safe. The smaller ones work on IE 4, but the larger ones don't, so watch out. All other browsers (including AOL Explorer) are not recommended.



BACK BUTTON DANGERS
The demos will confuse your browser's Back button since two pages open rather than one. Always use the Return Link in the top left of the demo window. Double-clicking or triple-clicking your Back button sometimes works but isn't very safe. If you click the Back button before a demo has finished, you will definitely crash.

If you've followed my advice and your browser still crashes, my apologies. I'd appreciate hearing about it so I can change my guidelines and save pain for other people.

Simple demos - should be OK on IE 4

Diagonal line

Ring

Ellipse

Circular pattern

Demos with hundreds of layers - not suitable for IE 4

Wide circular pattern

Two-picture pattern

Bloom (3 pictures)

Bonus demo (2006) - only suitable for modern browsers

Beehive (animated!)

How it works

Here is the ordinary code for a layer:

<div id="Layer1" style="position:absolute; left:301px; top:174px; width:50px; height:50px; z-index:1"><img src="images/red.GIF" width="50" height="50"></div>

Now here's the JavaScript code for generating a series of these layers:

<script language="JavaScript">
<!--

function genlayer() {

for (var k = 0; k < 20; k=(k+1)) {
document.write ('<div id="Layer')
document.write (k)
document.write ('" style="position:absolute; left:')
document.write (301+10*k)
document.write ('px; top:')
document.write (174+10*k)
document.write ('px; width:50px; height:50px; z-index:')
document.write (k)
document.writeln ('"><img src="images/red.GIF" width="50" height="50"></div>')
}
}
//-->
</script>

As you can see, it's an iteration from k=0 to k = 19, producing 20 layers. The k variable gives each layer its layer ID, its z-index (level of visual dominance) and through maths its position on the page. In this case the maths is very simple and the result is a sloping line. The fun starts when you add more complicated maths to determine the position, especially sine and cosine functions.

All demos © Andrew Starling

DHTML animations | Free International ISP | More Foxglove