Scripting dynamic HTML

The drop effect used in ie4.html (described in the section on DHTML positioning) is coded as follows:

ytop=-400;
function drop() { if (ytop < 0) { ytop += 10;
active.style.top = ytop;
setTimeout("drop()",10)}

Note the way Javascript addresses the content: the id is sufficient. (Note: Netscape4 uses different syntax.) Next the script looks for the style content and then the top attribute. Dynamically altering the value of either positional element causes the changes to be displayed in the browser in real time - AFTER the page has finished loading. setTimeout() is a global Javascript function that can repeat the operation of a Javascript function automatically after a set number of milliseconds. In practice, small changes in the drop rate will not show in a real situation.

Similarly, other pages use hidden content that is later made visible through Javascript event handlers.

In the script section in the head of the document (or in a linked external file):

function Code2() {codeone.style.visibility="visible";}

In the body section:

<a href="javascript:Code2();">Make it so</a>
<div class="header" id="codeone" style="visibility:hidden;">
This text and any element within the tag
will suddenly appear</div>

Note the use of the id not the class in both these cases - the class header is used three or more times in each document, changing the class would cause overlaps.



This is part of www.codehelp.co.uk Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.