Solved

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

Posted on 2001-06-24
7
170 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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 300 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

734 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