Linux Hosting
NT/2000 Hosting
DYO Internet Access
HTMLez.com
PHPez.com
ASPez.com
|
3 Browser Visibility Example
With Internet Explorer 4/5+ you created layering using stylesheets and the DOM. With Netscape 4+ you created layers with the layer tag. Now with Netscape 6 we lose the layer tag and use the DOM, unfortunately a little different from IE's. Netscape 6 adopts the official standard while IE5 comes close to the standard. You can actually use the Netscape 6 method of layering with IE5.5. Since I'm not sure that IE4 or 5 support this I maintain my previous layers techniques for Internet Explorer and add additional code for Netscape 6.
It's really not all that hard. And actually I don't check for browser or version. Instead I check for differences using the following code:
<![CDATA[
if (document.layers)
...
else if (document.all)
...
else if (document.getElementById)
...
]]>
If you remove the document.all check the code would still probably work. But Microsoft removes old versions of browsers when upgrading so I can't easily check. And my existing code uses the all notation anyhow.
To fill in the ... code, add the layering code below. This code requires some setup which I'll explain next.
<![CDATA[
if (document.layers)
document.layers["Lone"].visibility = Lsh;
else if (document.all)
document.all("one").className = sh;
else if (document.getElementById)
document.getElementById("one").style.visibility = sh6;
]]>
The mainstream examples I've seen define all DIV's and LAYER's instream. I found that I could never get that to work with or without Netscape 6. So I define the Layer instream and the DIV using stylesheets. A better programmer may get instream definitions to work but after hours struggling, I gave up. Also, you'll notice that I name the LAYER different from the DIV. This may or not be necessary but that's what it took for me to get it right. Working is what's important!
First the HTML code:
<![CDATA[
<layer name="Lone" visibility="show" position="absolute" left=25 top=25>
<div id="one" class="cardShow">
<h1>1</h1>
</div>
</layer>
]]>
And then the setup code:
<![CDATA[
var sh;
sh6 = "visible";
sh = "cardShow";
var Lsh;
Lsh = "show";
function doTransform() {
if (sh == "cardShow") {
sh6 = "hidden";
sh = "cardHide";
Lsh = "hide";
}
else {
sh6 = "visible";
sh = "cardShow";
Lsh = "show";
}
]]>
This setup code uses sh (show/hide) for use with the all condition. It uses sh6 for the getElementById condition. And it uses Lsh for the layers condition. And we also need the stylesheet definition, which follows:
<![CDATA[
<style>
.cardHide, .cardShow {position: absolute; top:25px; left:25px;}
.cardHide {visibility="hidden"}
.cardShow {visibility="visible"}
</style>
]]>
You could also add code to reference different LAYERs or DIVs. I've not done this here. If you also have a website assisting web authors, please feel free to link to either this page or to link to JavascriptEZ.com. If you would like to contribute code to any of the EZ pages referenced on the left, Please email me here. You may also email me if you would like to exchange links (compatible sites only).
|
Avg. Customer Review:
 April 2001
http://www.hungryminds.com
|
Avg. Customer Review:
April 2001
http://www.htmlgoodies.com
|
Avg. Customer Review:
April 2001
http://www.microsoft.com
|
Avg. Customer Review:
 April 2001
http://www.wrox.com
|
|
