asked on

DIV Tags and Cross Browser Compatibility

I am working on the following code that show/hides a DIV. It works fine in IE 6, but has problems in NS 4.x and NS 6.x. In the former, only the labels show up. In the latter nothing happens.

I would appreciate any feedback.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>

</HEAD>
<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="javascript:switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="javascript:switchDiv('myDiv',false)"></p>

<div id="myDiv" style="visibility=hidden">
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</div>
</FORM>

</BODY>
</HTML>

Fritz the Blank

ahosang

In ns 4 you cant' hide part of a form, has to be a form on its own. Probably best to forget NS 4.x or change design. As for NS 6+, I don't have that as i only use Mozilla. Works fine in Moz 1.1 and should for NS7. Can't see the definite problem for NS 6.
Type "javascript:"
without the quotes(but with the colon into address bar and tell what error comes up.

ahosang

Couple of thing in general though fritz:
1)You don't have to say onclick="javascript:myFunction()"
That is really unneccessary and totally redundant.
onclick="myFunction()" is just fine.

fritz_the_blank

ASKER

Okay, so I have modified the design so that the form issue goes away. This now works on IE as well as with NS 4.x. Still no joy with NS 6.x.

<html>
<head>
<script language="javascript">
function divVisibility(id,vis)
{var dddd;
if(document.all)
{dddd=document.all[id].style;
dddd.visibility = vis ? "visible" : "hidden";
}
if(document.layers)
{dddd=document.layers[id];
dddd.visibility = vis ? "show" : "hide";
}
}
function showDiv(strDiv){
var objDiv=null;
if(document.all){
objDiv = eval("window." + strDiv);
}else{
objDiv = document.layers[strDiv];
}
if(document.all){
objDiv.style.visibility = "visible";
}else {
objDiv.visibility = "show";
}
}

function hideDiv(strDiv){
var objDiv=null;
if(document.all){
objDiv = eval("window." + strDiv);
}else{
objDiv = document.layers[strDiv];
}
if(document.all){
objDiv.style.visibility = "hidden";
}else {
objDiv.visibility = "hide";
}
}
</script>
</head>
<body>
<form>
<INPUT type="button" value="Show" name=button1 onClick="javascript:divVisibility('Div1',true)">
<INPUT type="button" value="Hide" name=button2 onClick="javascript:divVisibility('Div1',false)"><p>
</form>
<div id="Div1" name="Div1" style="visibility:hidden;position:relative">
<FORM action="" method=POST id=form1 name=form1>
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</div>
</body>
</html>

Fritz the Blank

ASKER CERTIFIED SOLUTION

miskate

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ahosang

let's go back to original code(with the form issue changed for NS4.x):
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
</form>

<form>
<div id="myDiv" style="visibility:hidden;position:relative">
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</div>
</FORM>

</BODY>
</HTML>

What I'm saying is that this code above works on Mozilla 1(and therfore Netscape 7). So there's either some bug in Netscape 6(very possible) or something.Run that code and then press the buttons(hide and show) then type
javascript:
into the address bar(erasing the old text first) and press Enter like i said. Some errors may come up on the javascript console.
I can't do it because i don't have Netscape 6- and it doesn't throw errors on Moz 1(Netscape 7).

fritz_the_blank

ASKER

This is very strange...now it works like a charm!

What's your take regarding IE 4.x? Are any further modifications necessary?

Fritz the Blank

fritz_the_blank

ASKER

Hold on, there is an error in NS 4 now:

objElement.style has no properties.
JavaScript Error: file:/C|/Documents and
Settings/Patrick/Desktop/DivHideShow.htm, line 24:

objElement.style has no properties.

fritz_the_blank

ASKER

This works on all three:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
</form>
<div id="myDiv" style="visibility:hidden;position:relative">
<form>
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</div>

</BODY>
</HTML>

So what about IE 4.x?

Fritz the Blank

ahosang

What about it? That'll be fine for IE. Is Netscape all fine now?

fritz_the_blank

ASKER

So are you saying that IE 4.x handles div tags in the same way that IE 5.x plus does?

Fritz the Blank

ahosang

yup, that code works because it refernces the element using documant.all
The rest is the same:obElement.style.visibility

fritz_the_blank

ASKER

Thanks for the help!

Fritz the Blank