Forum Moderators: open
I am trying out a simple exercise to teach myself how to script Style Sheet layers so that they will work in Netscape 4.73 and Netscape 7.1.
The script itself is very simple – push the “SHOW” form button that executes a function called Appear(), using the onClick event handler and a box 250px width, with a 2px blue solid appears 600px from left and 170px down from the top of screen.
I have been able to get the script to work in Microsoft Explorer. But I cannot get it to work in the two Netscape browsers. In NS 4.73, I get a JS error, but this browser does not allow me to see where the error is occurring. In NS 7.1, there is no error, but the box does not show either.
I am very keen to come to grips with this CSS cross-browser scripting.
Could someone please tell me how I can get the Netscape browsers to work.
Many thanks.
Robin
New Zealand.
My coding appears below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
#slide {position:relative; top:170px; left:600px; width:250px; z-index:1; border:2px blue solid; visibility:hidden}
-->
</style>
<script type="text/javascript">
<!--
function Appear()
{
// Explorer
if(document.all)
{
document.all['slide'].style.visibility='visible';
}
if (slide.style.pixelLeft > 600)
{
slide.style.pixelLeft = 600
}
//Netscape 4.73
if (document.layers)
{
document.layers('slide').style.visibility='visible'
}
if (document.layers)
{
document.layers('slide').style.left > 600
}
//Netscape 7.1
if (document.getElementById)
{
document.getElementById('slide').style.visibility='visible';
}
document.getElementById('slide').left > 600
}
// -->
</script>
<title>Layers</title>
</head>
<body>
<div id="slide">This is a test box
</div>
<form>
<input type="button" value="SHOW" onClick="Appear()">
</form>
<P></P>
</form>
</body>
</html>
<div style="left:200px....">This script has a section at the top that will sort things out a bit for you. It can be developed to make general scripting easier. It does mean that you have to follow certain conventions, like using
[blue]HIDDEN[/blue][blue]"hidden"[/blue][blue]pixelLeft[/blue]notes
[1]
NS4 elements have no
[blue]style[/blue][blue]get[/blue][blue]"show"[/blue][blue]"hide"[/blue][blue]"visible"[/blue][blue]"hidden"[/blue]
// =========================================================== //
var isIE4 = (document.all &&!document.getElementById)? 1:0
var isNS4 = document.layers? 1:0
var isDOM = document.getElementById? 1:0// give browser a getElementById method
// Explorer 4 : general
// Netscape 4 : still won't get [b]nested[/b] layers (can be improved)
if(isIE4)
document.getElementById = function(id){ return this.all[id] }
else if(isNS4)
{
document.getElementById = function(id)
{
var elm = this.layers(id)
elm.style = elm // note [1]
return elm
}
}
// sort out CSS values notes[2]
var VISIBLE: (isNS4)?"show":"visible",
var HIDDEN : (isNS4)?"hide":"hidden"// =========================================================== //
function Appear()
{// put element into local var
var slide = document.getElementById("slide")
// put elm.style into local too
varslideStyle = slide.style
if(parseInt(slideStyle.left) > 600)
slideStyle.visibility = VISIBLE
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Style Check</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.a{font-size:2em;}
</style>
<script type="text/javascript">
function showSty(){
if(document.all){
var s=document.getElementById("showOne");
alert(s.currentStyle.fontSize);
}else{
var s=getComputedStyle(document.getElementById('showOne'),'');
alert(s.getPropertyValue("font-size"));
}
}
</script>
</head>
<body>
<div id="showOne" class="a"
onclick="showSty();">
The div
</div>
</body>
</html>
I am still experimenting with the script.
Robin.
