Coloring the stylesheets
January 19, 1999
As the page loads the cross-browser
dictionary is enabled and the chosen colors are applied
to the stylesheets.
crossBrowser();
if (!document.all)
{document.ids.itemlayer.color=menuTEXT;
document.ids.headlinelayer.color=headTEXT;}
else { document.styleSheets[0].addRule
("div.item",
"color:"+menuTEXT, 0);
document.styleSheets[0].addRule
("div.item",
"background-color:"+menuBGCOLOR, 0);
document.styleSheets[0].addRule
("div.headline",
"color:"+headTEXT, 0);
document.styleSheets[0].addRule
("div.headline",
"background-color:"+headBGCOLOR, 0);}
document.linkColor = menuTEXT;
document.alinkColor = menuTEXT;
document.vlinkColor = menuTEXT;
clearPop2 = 0;
</script>
</head>
|
The code in this block of script is not contained within
a function, and so it executes immediately as the page
loads into the menu window. First, the crossBrowser()
function is called to setup the "translation
dictionary" for cross-browser DHTML. The next several
lines of code submit additions to the stylesheets for
the menus; these additions reflect the color values for
menu components, based upon the color value variables set earlier in the page. First the
stylesheet
modifications are made for Netscape browsers
and then for Microsoft, who again require differing syntax.
It's worth noting that changes to
stylesheets within Netscape
must occur before the content is rendered -- Navigator 4
cannot change a style once it appears on-screen. This
example is successful because the script is modifying the
stylesheet definitions before any HTML content has been
written to the page, which is coming up in a brief nanomoment.
(Internet Explorer can modify
on-screen styles at any time)
Now that most of the script is in place it's time to create
the actual menus. Although the menus are necessarily
HTML constructs, they, too, will be generated using scripts!
The menu revealed
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Building the HTML
|
