Jump Starting Your Site with Dynamic HTML
By Rick Dobson

Web Techniques, December 1997

Web Techniques grants permission to use these listings for private or 
commercial use provided that credit to Web Techniques and the author is 
maintained within the comments of the source. For questions, contact
editors@web-techniques.com.

DOBSON

LISTING ONE



<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<LINK REL="stylesheet" TYPE="text/css" 
     HREF="corpstyl.css">
<STYLE>
    H1 {color:red}
    H2 {color:red;font-style:italic}
    .ul {text-decoration:underline;
         font-weight:bold}
</STYLE>
</HEAD>
<BODY>
<H1>Welcome!</H1>
<P CLASS="ul">This document uses styles 
    and style sheets.</P>
<H2>Ways to Include Styles</H2>
<UL>
<LI STYLE="color:red">STYLE=
<LI>STYLE
<LI STYLE="color:green">LINK
<LI STYLE="color:black">@import
</UL>
</BODY>
</HTML>


LISTING Two


corpstyl.css
/* Our corporate style sheet: My Company, Inc. */    
H1 {color:black}
H2 {color:black;font-style:italic}    
LI {color:blue}


LISTING Three


<HTML>
<HEAD>
<TITLE>
Dynamic Styles: Changing Styles1
</TITLE>
<STYLE>
    .bigred {font-size:24pt; color:red}
    .littlegreen {font-size:7pt; color:green}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function changeStyle() {
    document.all.tags("P").item(0).className 
	= "bigred";
    document.all.tags("P").item(1).className 
	= "littlegreen";}
</SCRIPT>
<BODY onclick="changeStyle()">
<P CLASS="littlegreen">Welcome!
<P>This document uses inline styles.
</BODY>
</HTML>


LISTING four


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function newRules() {
    document.styleSheets.MyStyles
	.addRule("P","color:blue");
    document.styleSheets.MyStyles
	.addRule("P","font-size=24pt");
    document.styleSheets.MyStyles
	.addRule("LI","color:blue");}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY onclick="newRules()">
<H1>Welcome!</H1>
<P>This document uses style sheets.</P>
<H2>Ways to Include Style Sheets</H2><UL>
<LI>STYLE=
<LI>STYLE
<LI>LINK
<LI>@import
</UL>
</BODY>
</HTML>


LISTING Five



<HTML>
<HEAD>
<TITLE>
Dynamic Positioning 1
</TITLE>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide(){    
    document.all.Runner.style.pixelLeft = 
        document.body.offsetWidth;
    id = window.setInterval("Glide()",25);}
function Glide(){
    document.all.Runner.style.pixelLeft -= 10;
    if (document.all.Runner.style.pixelLeft<=0) 
    	{document.all.Runner.style.pixelLeft=0;
    	window.clearInterval(id);}}
</SCRIPT>
<BODY onload="StartGlide()">
<H3>Welcome to Dynamic Positioning!</H3>
<P>Watch the gif move across the page.  
    Change the z value from positive to negative
    to position the gif in back of the text 
    rather than in front of it.
<IMG ID="Runner" STYLE=
    "position:absolute;top:0;left:0; 
    z-index:1" SRC="running.gif">
</BODY>
</HTML>



LISTING six


<HTML>
<HEAD><TITLE>Dynamic Positioning 2</TITLE>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide() {
    document.all.TextMover.style.pixelLeft 
	= document.body.offsetWidth/4;
    id = window.setInterval("Glide()",25);
}
function Glide() {
    document.all.TextMover.style.pixelLeft -= 10;
    document.all.TextMover.style.pixelTop -= 2;
    if (document.all.TextMover.style.pixelLeft<=0) 
	{document.all.TextMover.style.pixelLeft=0;
        window.clearInterval(id);}
}
</SCRIPT>
<BODY onload="StartGlide()">
<P>With dynamic positioning, you can move 
    elements and their content 
anywhere in the document even
after the document has loaded!
<DIV ID="TextMover" STYLE=
    "position:absolute;top:100; left:0">
This test moves up and to the left.
</DIV>
</BODY>
</HTML>



LISTING Seven


<HTML>
<HEAD><TITLE>Dynamic Content 1</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
    document.all.MyHeading.outerHTML = 
	"<H1 ID=MyHeading>Dynamic HTML!</H1>";
    document.all.MyHeading.style.color =
	"green";
    document.all.MyText.innerText = 
	"InnerText method changes just text";
    document.all.MyText.style.fontFamily ="sans-serif";
    document.body.insertAdjacentHTML
	("BeforeEnd", 
	"<P ALIGN=\"center\">Added Text.</P>");
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>This text appears before 
    the click.</H3>
<P ID=MyText STYLE= "font-family:serif">
Click anywhere in this document.</P>
</BODY>
</HTML>



LISTING eight


<HTML>
<HEAD>
<TITLE>Dynamic Content 2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showMe() {
    document.all.MyList.style.display = "";
    document.all.MyHeading.style.color = "red";}
</SCRIPT>
<BODY onclick="showMe()">
<H3 ID=MyHeading>
Click me to see Dynamic Content in Action.
</H3>
<P>Watch the following text reflow after the
the display setting changes from none.
<UL ID=MyList STYLE="display:none">
<LI>The display property can either be
<LI>none, or
<LI>""
</UL>
<P>Some text below the invisible text.
</BODY>
</HTML>