Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

I need Show/Hide DIV code which works in netscape 6

Posted on 2001-06-24
7
Medium Priority
?
172 Views
Last Modified: 2012-06-21
I have some code which works in IE and Netscape 4, which basically shows and hides a nav menu.

I can't get anything to work in Netscape 6 -- any ideas what I need to add to the code?

<SCRIPT LANGUAGE="JavaScript"><!--

var explorer;
var netscape;

if (document.all) {
  explorer = true;
}
else if (document.layers) {
  netscape = true;
}

if(explorer){
     theDOM = 'document.all';
     theSuffix = '.style';
     hiddenKeyword = 'hidden';
     dhtml = true;
}

if(netscape){
     theDOM = 'document';
     theSuffix = '';
     hiddenKeyword = 'hide';
     dhtml = true;
}



function showOrHide(theObject){
     if(dhtml){
          {
               theObjectReference = eval(theDOM + '.' + theObject + theSuffix);
               if(theObjectReference.visibility == hiddenKeyword){
                    theObjectReference.visibility = 'visible';
                    } else {
                    theObjectReference.visibility = hiddenKeyword;
                    }
               }
          }
}
// --> </SCRIPT>


0
Comment
Question by:johnny99
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6223598
Here are 3 functions which makes layers easier:

var NS6 = (navigator.appName=="Netscape" && (document.getElementById!=undefined));
var NS4 = (document.layers);
var IE  = (navigator.appName=="Microsoft Internet Explorer");

function GetLayer(layername)
{
     if(IE||NS4)     return (NS4) ? FindLayer(layername) : document.all[layername];
     else if(NS6) return document.getElementById(layername);
}

function GetLayerStyle(layername)
{
     if(IE||NS4)     return (NS4) ? FindLayer(layername) : document.all[layername].style;
     else if(NS6) return document.getElementById(layername).style;
}

function FindLayer(layername, obj)
{
    // recursive function to find the layer
     var i=0;
     var perObj = null;
     var tmpObj = (obj) ? obj.document.layers : document.layers;
     for(i=0;i<tmpObj.length;i++)
     {
         if(tmpObj[i].id==layername) return tmpObj[i];
         perObj = FindLayer(layername, tmpObj[i])
          if(perObj) return perObj;
     }
     return false;
}


Usage:
if you need to show a layer you just call:
GetLayerStyle("layername").visibility="visible"
or to hide:
GetLayerStyle("layername").visibility="hidden"

this is crossbrowser, and can do as many nested layers in NS4 as possible...no worries from your side. Only thing you need to be sure of is that the layername specified is an existing layer :-)

Regards,
CJ
0
 
LVL 5

Expert Comment

by:djbusychild
ID: 6223604
here you go


<html>
<head>

<style>

#mylayer {
position:absolute;
left:100;
top:100;
background-color:red;
}

</style>

<script language="javascript" src="http://www.djslim.com/djslim3/files/setup.java"></script>

<script>
VISIBLE   = (NS4)?"show":"visible";
INVISIBLE = (NS4)?"hide":"hidden";

function toggle(ly_name) {
     var target = (NS4)?ly[ly_name]:ly[ly_name].style;
     if (target.visibility != INVISIBLE) {
          target.visibility = INVISIBLE;
     } else {
          target.visibility = VISIBLE;
     }
}
</script>

</head>

<body>

<div id="mylayer">
hello world
</div>

<form method="get" action="#">
<input type="button" onclick="toggle('mylayer');" value="toggle" /><br />
</form>

</body>

</html>
0
 
LVL 33

Expert Comment

by:hongjun
ID: 6223788
Try this

// Default browser check
function checkBrowser()
{
     this.ver=navigator.appVersion
        this.dom=document.getElementById?1:0
        this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
        this.ie4=(document.all && !this.dom)?1:0;
        this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
        this.ns4=(document.layers && !this.dom)?1:0;
        this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
        return this
}

bw=new checkBrowser()
// Shows the invalid division
function show(div,nest)
{
        obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
        obj.visibility='visible'
}

//Hides the div
function hide(div,nest)
{
        obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
        obj.visibility='hidden'
}

hongjun
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 33

Expert Comment

by:hongjun
ID: 6223806
<div id="control1" src="./images/error.jpg" style=" POSITION: bottom; Z-INDEX: 1; VISIBILITY: hidden;">
</div>

<input type="button" value="Show" onClick="show('control1')">
<input type="button" value="Hide" onClick="hide('control1')">

hongjun
0
 
LVL 2

Author Comment

by:johnny99
ID: 6225456
Thanks for all those, and I will test them, but I'd like to keep the question open in the hope that someone can come up with a solution which *works* like my original code, which I understand and is easy to use and edit -- I just wanted someone to add a couple of lines to mine, if possible, rather than do it a whole other way...

If that doesn't happen then I'll give the point to one of you.
0
 
LVL 5

Accepted Solution

by:
djbusychild earned 1200 total points
ID: 6225496
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--

var explorer;
var netscape4;
var netscape6;
var theDOM, theSuffix, hiddenKeyword, dhtml;

if (document.all) {
 explorer = true;
}
else if (document.layers) {
 netscape4 = true;
} else {
 netscape6 = true;
}

if(explorer){
    theDOM = 'document.all';
    theSuffix = '.style';
    hiddenKeyword = 'hidden';
    dhtml = true;
}

if(netscape4){
    theDOM = 'document';
    theSuffix = '';
    hiddenKeyword = 'hide';
    dhtml = true;
}

if (netscape6) {
   theDOM = "document.getElementsByTagName('*')";
   theSuffix = ".style";
   hiddenKeyword = "hidden";
   dhtml = true;
}


function showOrHide(theObject){
    if(dhtml){
              var theObjectReference = eval(theDOM + '.' + theObject + theSuffix);
              if(theObjectReference.visibility == hiddenKeyword){
                   theObjectReference.visibility = 'visible';
              } else {
                   theObjectReference.visibility = hiddenKeyword;
              }
         }
}
// -->
</script>
<style>

#mylayer {
position:absolute;
left:100;
top:100;
background-color:red;
}

</style>

</head>
<body>

<div id="mylayer">
hello world
</div>


<form method="get" action="#">
<input type="button" onclick="showOrHide('mylayer');" value="toggle" /><br />
</form>


</body>
</html>
0
 
LVL 2

Author Comment

by:johnny99
ID: 6229587
Thank you very much.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question