esm
04-17-2003, 10:36 AM
I'm trying to setup some dynamic content in one of my webpages. Upon page load, all the content is hidden except for one section. The user can then click on a link (or image) to show other sections of content.
Everything seems to work fine in IE6 (i have IE 5 but not tested yet). But it doesn't work correctly in the Netscape browsers.
I have a three column table. the left and right column are for navigation and links and the middle column is for the content. Sorry, I'm pretty much stuck with the table to give the page structure without a some serious re-coding.
The content is just normal text but it will have the normal assormtment of character's - commas, apostrophes, quotemarks, tildes, carets, etc
IE6 is not pefect: If I set the width to something other than 100%, the left side is ok but the right side will eventually cover the 3rd colunm (the one on the right) as I shrink the browser window from the right. Well, this plagues NS also.
For the Netscape browsers:
The biggest problem is they don't respect the boundaries of the table cell.
NS 4.79: the DIVs for the content extend the entire width of the page and I have to use the TOP attribute to keep NS from covering the menu. (I guess I could use @import to reset the TOP to zero for IE). Overall, I prefer the way 4.79 handles this than the way the other NS version do.
NS 6/7 and Mozilla 1:
At least they respect the left side of the middle column. But the content area extends off the right edge of the screen. I can play with it and get it to stop at the right edge but I think that may cause other problems.
Also, the height setting is a problem. If I set HEIGHT: 100%; then I get a nice long (and wide) block area - a big blob. If I set the height to a specific length, then NS does not extend the DIV and just prints the extra content below the bottom edge of the DIV.
Any work arounds for Netscape?
I'm no expert with any of this.
<html>
<head>
<title>The getElementById Method</title>
<style type="text/css">
.desc{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
.contact{
position: absolute;
width: 100%;
height: 100px;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
.comments{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
</style>
<script language="JavaScript1.2" type="text/javascript">
/*
Made by Martial Boissonneault © 2002 http://getElementById.com/
May be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}
function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
</script>
<script>
function hideall(id,id1){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
document.layers[id1].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
document.all[id1].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id1).style.visibility = "hidden";
}
}
</script>
</head>
<body onload="hideall('contact','comments')">
<CENTER>
<TABLE border=0 cellspacing=5 cellpadding=5>
<TR>
<TD><a href="#" onclick="show('desc');hide('contact');hide('comments')">Desc</a></TD>
<TD><a href="#" onclick="hide('desc');show('contact');hide('comments')">Contact</a></TD>
<TD><a href="#" onclick="hide('desc');hide('contact');show('comments')">Comments</a></TD>
</TR>
</TABLE>
<TABLE border=0 width=100% cellspacing=5 cellpadding=5>
<TR>
<TD width=150><!-- col 1 -->
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</TD>
<TD><!-- col 2 -->
<div id="desc" class=desc>Description<BR>
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div id="contact" class=contact>Contact<BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR> Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
<div id="comments" class=comments>Comments<BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</TD>
<TD width=150><!-- col 3 -->
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>
Everything seems to work fine in IE6 (i have IE 5 but not tested yet). But it doesn't work correctly in the Netscape browsers.
I have a three column table. the left and right column are for navigation and links and the middle column is for the content. Sorry, I'm pretty much stuck with the table to give the page structure without a some serious re-coding.
The content is just normal text but it will have the normal assormtment of character's - commas, apostrophes, quotemarks, tildes, carets, etc
IE6 is not pefect: If I set the width to something other than 100%, the left side is ok but the right side will eventually cover the 3rd colunm (the one on the right) as I shrink the browser window from the right. Well, this plagues NS also.
For the Netscape browsers:
The biggest problem is they don't respect the boundaries of the table cell.
NS 4.79: the DIVs for the content extend the entire width of the page and I have to use the TOP attribute to keep NS from covering the menu. (I guess I could use @import to reset the TOP to zero for IE). Overall, I prefer the way 4.79 handles this than the way the other NS version do.
NS 6/7 and Mozilla 1:
At least they respect the left side of the middle column. But the content area extends off the right edge of the screen. I can play with it and get it to stop at the right edge but I think that may cause other problems.
Also, the height setting is a problem. If I set HEIGHT: 100%; then I get a nice long (and wide) block area - a big blob. If I set the height to a specific length, then NS does not extend the DIV and just prints the extra content below the bottom edge of the DIV.
Any work arounds for Netscape?
I'm no expert with any of this.
<html>
<head>
<title>The getElementById Method</title>
<style type="text/css">
.desc{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
.contact{
position: absolute;
width: 100%;
height: 100px;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
.comments{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #363636;
background-color: #BAC2F8;
padding: 10px;
display:block;
}
</style>
<script language="JavaScript1.2" type="text/javascript">
/*
Made by Martial Boissonneault © 2002 http://getElementById.com/
May be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}
function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
</script>
<script>
function hideall(id,id1){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
document.layers[id1].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
document.all[id1].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id1).style.visibility = "hidden";
}
}
</script>
</head>
<body onload="hideall('contact','comments')">
<CENTER>
<TABLE border=0 cellspacing=5 cellpadding=5>
<TR>
<TD><a href="#" onclick="show('desc');hide('contact');hide('comments')">Desc</a></TD>
<TD><a href="#" onclick="hide('desc');show('contact');hide('comments')">Contact</a></TD>
<TD><a href="#" onclick="hide('desc');hide('contact');show('comments')">Comments</a></TD>
</TR>
</TABLE>
<TABLE border=0 width=100% cellspacing=5 cellpadding=5>
<TR>
<TD width=150><!-- col 1 -->
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</TD>
<TD><!-- col 2 -->
<div id="desc" class=desc>Description<BR>
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div id="contact" class=contact>Contact<BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR> Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
<div id="comments" class=comments>Comments<BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</TD>
<TD width=150><!-- col 3 -->
Javascripts is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.<BR><BR>
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.<BR><BR>
My DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>