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>