Link to home
Start Free TrialLog in
Avatar of fritz_the_blank
fritz_the_blankFlag for United States of America

asked on

Div Visibility and Spacing Issue

Consider the page below. The div hides and shows just the way that it should. However, when the div is hidden, there is a large space where the content was when it was visible. How do I modify this code so that the space associated with the div contracts when the div is hidden?

Thank you very much!

Fritz the Blank

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
//=======================================================

      //detect browser settings for showing and hiding DIVs
      isNS4 = (document.layers) ? true : false;
      isIE4 = (document.all && !document.getElementById) ? true : false;
      isIE5 = (document.all && document.getElementById) ? true : false;
      isNS6 = (!document.all && document.getElementById) ? true : false;


//=======================================================

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
 }
 
 if(isNS4){
      if(!bolVisible) {
        objElement.visibility ="hidden"
      } else {
        objElement.visibility ="visible"
      }      
 }else{
      if(!bolVisible) {
        objElement.style.visibility = "hidden";
      } else {
        objElement.style.visibility = "visible";
      }
 }
}

//-->
</SCRIPT>

</HEAD>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>

<BODY>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
</TABLE>
<p>&nbsp;</p>
<div id=showTable>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
      <TR>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD></TD>
      </TR>
</TABLE>
</div>
<hr>
</BODY>
</HTML>
Avatar of dorward
dorward

Change:
  objElement.style.visibility = "hidden";
to:
  objElement.style.visibility = "none";

and
  objElement.style.visibility = "visible";
to
  objElement.style.visibility = "";

... I don't think there is much you can do about Netscape 4 though.
arghhh

Change "visibility" to "display" too.
Avatar of fritz_the_blank

ASKER

Thanks for your response.

Fair enough about NS 4--let's get a solution that will do what we want for more recent browsers but will still work with the space in NS4...

Switching hidden to none seems to break the code...


Fritz the Blank
Is that what you are suggesting?
 
if(isNS4){
      if(!bolVisible) {
        objElement.visibility ="hidden"
      } else {
        objElement.visibility ="visible"
      }      
 }else{
      if(!bolVisible) {
        objElement.style.display = "none";
      } else {
        objElement.style.display = "visible";
      }
 }
Hey fritz!!!

Look at this link and see if you like it

http://oldlook.experts-exchange.com/questions/20744689/hiding-and-showing-tables.html

also if you just want support for NS6+ and ie5+ you can do this

function toggle(theDiv){
      var elem = document.getElementById(theDiv);
      elem.style.display = (elem.style.display == "none")? "" : "none";
}


Call it like so

<a href="#" onclick="toggle('divName');return false;">Show | Hide</a>
Hey Jay!

It is good to see you about still.

I am gathering that:

elem.style.display=none

is what I need to integrate into what I have.

Any ideas about how to modify my existing code to add this functionality?

--Fritz the Blank
don't forget that NS4 has to have absolute positioning, so that can screw everything if not careful

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var e = '';
function toggle(theDiv) {
     if(document.getElementById){ // DOM
          e = document.getElementById(theDiv);
          e.style.display = (e.style.display == "none")?"":"none";
     }else if(document.all){ // IE4
          e = document.all(theDiv);
          e.style.visibility =  (e.style.visibility == "visible")?"hidden":"visible";
     }else if(document.layers){  // NS4
          document.layers[theDiv].visibility =(document.layers[theDiv].visibility == "show")?"hide":"show";
     } else {
     return false;
     }
}
// -->
</script>
</head>

<BODY>
<a href="#" onClick="toggle('showTable');return false;">show</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
      if(document.layers)
            document.write('<div id="showTable" style="position: absolute;">');
// -->
</script>

<div id="showTable">
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</div>
<hr>
</body>
</html>
The reason that I want to integrate it into my code is that I like to be able to call the function with a second parameter so that I am not toggling, but rather, am specifying the visibility.

Fritz the Blank
here ya go fritz

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
     //detect browser settings for showing and hiding DIVs
     isNS4 = (document.layers) ? true : false;
     isIE4 = (document.all && !document.getElementById) ? true : false;
     isIE5 = (document.all && document.getElementById) ? true : false;
     isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).style;
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else if(isIE4){
     if(!bolVisible) {
       objElement.visibility = "hidden";
     } else {
       objElement.visibility = "visible";
     }
 } else if (isIE5 || isNS6) {
       if(!bolVisible){
          objElement.display = "none";
       } else {
         objElement.display = "";
         }
       }
}

//-->
</SCRIPT>

</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
      if(isNS4){
            document.write('<div id="showTable" style="position: absolute;">');
      }
// -->
</script>
<div id='showTable'>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</div>
<hr>
</BODY>
</HTML>

i do not have ie4 so cant test it but i do have ns4.79 and it works without error.

Tested in

NS7.1   - worked
IE6       - worked
NS4.49 - worked
Jay, this is wonderful--there is just one thing in NS4--the <hr> doesn't place correctly on the page when you show the div (it lands in the upper part of the second table) and it disappears altogether when you hide the div. \

Any ideas?

Fritz the Blank
Hi Fritz,

here's one solution:

.....
</TABLE>
<script type="text/javascript">
<!--
   if(isNS4){
  document.write('<hr>');
     }
// -->
</script>
</div>
<script type="text/javascript">
<!--
   if(!isNS4){
  document.write('<hr>');
     }
// -->
</script>
</BODY>
</HTML>

Vinny
@Vinny--

Thank you very much for this suggestion. I know that will work, but I want to keep everything contained within the function as I will use it in a number of places. I included the page above just to keep my question clear.

--Fritz the Blank
Hi Fritz,

  That is one of the evils of absolute positioning & nn4.  About the only way I can think of offhand is to embed everything within an outer table so that each of the above tables & the <hr> are in individual tds.

Vinny
Hi Fritz,

once more div for <hr>  ;)

=========================================================
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
    //detect browser settings for showing and hiding DIVs
    isNS4 = (document.layers) ? true : false;
    isIE4 = (document.all && !document.getElementById) ? true : false;
    isIE5 = (document.all && document.getElementById) ? true : false;
    isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
//identify the element based on browser type
if (isNS4) {
  objElement = document.layers[strDivName];
  objHR = document.layers["hr"];
} else if (isIE4) {
  objElement = document.all[strDivName].style;
  objHR = document.all["hr"].style;
} else if (isIE5 || isNS6) {
  objElement = document.getElementById(strDivName).style;
  objHR = document.getElementById("hr").style;
}
objHR.visibility=bolVisible?"hidden":"visible";

 if(isNS4){
    if(!bolVisible) {
      objElement.visibility ="hidden"
    } else {
      objElement.visibility ="visible"
    }    
 }else if(isIE4){
    if(!bolVisible) {
      objElement.visibility = "hidden";
    } else {
      objElement.visibility = "visible";
    }
} else if (isIE5 || isNS6) {
     if(!bolVisible){
        objElement.display = "none";
            objHR.display = "";
     } else {
       objElement.display = "";
        
       }
     }
}

//-->
</SCRIPT>

</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
</TABLE>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
    if(isNS4){
         document.write('<div id="showTable" style="position: absolute;">');
    }
// -->
</script>
<div id='hr' style=visibility:hidden><hr></div>
<div id='showTable'>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
</TABLE>
<hr>
</div>

</BODY>
</HTML>
fritz

i do not have ns4 at home but i will see what i can do in the morning
fritz

IMHO, the <hr /> position will have to do with the layout. i took the <p> tag and replaced it with the <hr>

and then i moved the bottom hr insid the div tag. that away if yoou have more tables below the div then all you will have to do is add the hr to the bottom of the next div

like so

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
     //detect browser settings for showing and hiding DIVs
     isNS4 = (document.layers) ? true : false;
     isIE4 = (document.all && !document.getElementById) ? true : false;
     isIE5 = (document.all && document.getElementById) ? true : false;
     isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).style;
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else if(isIE4){
     if(!bolVisible) {
       objElement.visibility = "hidden";
     } else {
       objElement.visibility = "visible";
     }
 } else if (isIE5 || isNS6) {
      if(!bolVisible){
         objElement.display = "none";
      } else {
        objElement.display = "";
        }
      }
}

//-->
</SCRIPT>

</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
<hr />
<script type="text/javascript">
<!--
     if(isNS4){
          document.write('<div id="showTable" style="position: absolute;">');
     }
// -->
</script>
<div id='showTable'>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
<hr>
</div>

</BODY>
</HTML>
Fair enough, but the point of the <hr> was not so much to have an <hr> but to see what happens to elements on the page after the <div>, so let's say that the page looks like this:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
     //detect browser settings for showing and hiding DIVs
     isNS4 = (document.layers) ? true : false;
     isIE4 = (document.all && !document.getElementById) ? true : false;
     isIE5 = (document.all && document.getElementById) ? true : false;
     isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).style;
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else if(isIE4){
     if(!bolVisible) {
       objElement.visibility = "hidden";
     } else {
       objElement.visibility = "visible";
     }
 } else if (isIE5 || isNS6) {
      if(!bolVisible){
         objElement.display = "none";
      } else {
        objElement.display = "";
        }
      }
}

//-->
</SCRIPT>

</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 1</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>

<div id='showTable'>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 2</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</div>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 3</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</BODY>
</HTML>


Then the problem would still remain. Perhaps there is a way to assign attributes to the div tag within the funciton?

BTW, thank you very much for your hard work on this!

Fritz the Blank
hmm

somewhere somehow we need to make showTable have absolute position in order to toggle them.

But if you set the position the way you have it, then the tables will set ontop of each other.

so adding <script....>document.write(....position: absolute;) will not work correct?

does ns4 support setAttribute?

BTW, thank you for the opportunity
I am not sure--as you know, I am kind of handy with using JavaScript for validation and calculations but am very much a novice when it comes to using it for formatting.

In any case, I am being a pain in the butt here, but if you like I can post an addtional question with more points to show appreciation for your time.

Fritz the Blank
Ideally, I am looking for a function that will support NS4+ and IE4+ in such a way that I can use a standardized div tag, the same function for all, and not have to do anything funky in the body of the page.

(I would also like peace on earth, and endless supply of top quality wine, and for my wife to live forever!)

--Fritz the Blank
no problem on the points.

Give me a few to do sum NS4 research and see what tricks i may come up with or find

I would also like peace, not wine, but beer and for my wife and 2 kids to live for ever ;)
fritz

here is a link that i am reading. Just in case you would like to look at it or anyone else

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/layer.html
Oh my, this is so darned difficult.....I really can't wait for the day ( if it ever arrives) that all browsers will render the same way!

Fritz the Blank
lol

there are 2 methods that i have found that may do the trick, but i am stupid with NS4. I will try them.

Excerpt from DevEdge

moveAbove
Stacks this layer above the layer specified in the argument, without changing either layer's horizontal or vertical position. After re-stacking, both layers will share the same parent layer. Method of
 Layer
 
Implemented in
 JavaScript 1.2
 


Syntax
moveAbove(aLayer)
Parameters
aLayer
 The layer above which to move the current layer.
 



--------------------------------------------------------------------------------

moveBelow
Stacks this layer below the specified layer, without changing either layer's horizontal or vertical position. After re-stacking, both layers will share the same parent layer. Method of
 Layer
 
Implemented in
 JavaScript 1.2
 


Syntax
moveBelow(aLayer)
Parameters
aLayer
 The layer below which to move the current layer.
 
Hi Fritz,

re: ...to elements on the page after the <div>,
Since nn4 does not save any space for layers, everything moves up.  The only way that I know of is to place the div within a table cell

<table><tr><td><table><tr><td><div>...</td></tr></table></td>....

so that the td holds the space for the div.

jay: setAttribute is version 6 (possibly 5)

Vinny
Okay, how about this then:

If it is NS5+, IE4+, then everything is fine and works the way that we want it to. If it is NS4, then we just leave the space where the div is hiding so that the rest of the page doesn't go FUBAR.

Fritz the Blank
fritz check this out

http://devedge.netscape.com/library/manuals/1998/htmlguide/tags12.html

It shows all of the layers properties

Layer Syntax
<LAYER>
  ID="layerName"
  LEFT="pixelPosition"
  TOP="pixelPosition"
  PAGEX ="pageX"
  PAGE"="pageY"
  SRC="file"
  Z-INDEX="n"
  ABOVE="layername"
  BELOW="layername"
  WIDTH="width"
  HEIGHT="height"
  CLIP="n,n,n,n"
  VISIBILITY="visibility"
  BGCOLOR="color"
  BACKGROUND="imageURL"
  OnMouseOver="JScode"
  OnMouseOut="JScode"
  OnFocus="JScode"
  OnBlur="JScode"
  OnLoad="JScode"
</LAYER>

here is what i done(so far, but somewhere some how we need a trick)

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
     //detect browser settings for showing and hiding DIVs
     isNS4 = (document.layers) ? true : false;
     isIE4 = (document.all && !document.getElementById) ? true : false;
     isIE5 = (document.all && document.getElementById) ? true : false;
     isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).style;
 }
 
 if(isNS4){
        
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else if(isIE4){
     if(!bolVisible) {
       objElement.visibility = "hidden";
     } else {
       objElement.visibility = "visible";
     }
 } else if (isIE5 || isNS6) {
      if(!bolVisible){
         objElement.display = "none";
      } else {
        objElement.display = "";
        }
      }
}

//-->
</SCRIPT>
<style type="text/css">
.showTable{
      position: absolute;
}
</style>
</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 1</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
<div id="dummy" style="position: absolute;"></div>
<script type="text/javascript">
<!--
if(isNS4){
      
      document.write('<div id="showTable" below="dummy" class="showTable">');
}
// -->
</script>
<div id='showTable'>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 2</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</div>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD>Table 3</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
     <TR>
          <TD>&nbsp;</TD>
          <TD></TD>
          <TD></TD>
     </TR>
</TABLE>
</BODY>
</HTML>
fritz we also need to add this important script i just wrote.

It takes care of the resize in NS4

// Reload the window if NS4 is resized
var oWidth, oHeight;
if (isNS4) {
      oWidth = window.innerWidth; oHeight = window.innerHeight;
      window.onresize = function() {
      if (window.innerWidth != oWidth || window.innerHeight != oHeight)
            location.reload();
      }
}
 

Just add it in the head section.

before you do it resize the window without it then with and see the difference
still trying to get everything to work in the head section without scripts in the body.
fritz what about creating style sheets, and create an init() function that says
if(isNS4) {
   document.write('<link rel="stylesheet" href="/css/ns4.css" type="text/css">');
} else if(isIE4) {
   document.write('<link rel="stylesheet" href="/css/ie4.css" type="text/css">');
}

.
.
.
.


Oh and i meant to mention you proly already know, but in NS4 if you have a form element in a hidden div, you MUST wrap the form element with form tags. If you do not you will not see the form element.

You can then collect all of the data and submit it on another form.

Let me know about the style sheet
I am concerned about the document.write--will that overwrite other content in the page when the funciton is called or the page rendered? I know about the form thing, and that is cool.

FtB
say we have(just for example) 3 style sheets

<link rel="stylesheet" href="/css/ns4.css" type="text/css">
<link rel="stylesheet" href="/css/ie4.css" type="text/css">
<link rel="stylesheet" href="/css/ns6_ie5.css" type="text/css">

function init(){
      if(isNS4){
            document.write('<link rel="stylesheet" href="/css/ns4.css" type="text/css">');
      } else if(isIE4){
            document.write('<link rel="stylesheet" href="/css/ie4.css" type="text/css">');
      } else if(isIE5 || isIE6){
            document.write('<link rel="stylesheet" href="/css/ns6_ie5.css" type="text/css">');
      }
}
window.onload = init;            


===================
Now if i am not mistaken you would have to have them all in the head of the document the onload depending on the browser (ie4,ns4,....) it would use the style sheet assigned to it

so if your using ns4 the it would use /css/ns4.css style sheet




Okay, so what do you see as the final solution including what needs to be inside the css's?

Fritz the Blank
fritz

i think your right. i tried the doc...write and did not work. I know i have seen this some where and it worked.

I will keep searching. but for now i think i would just have to go with this

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
//=======================================================
    //detect browser settings for showing and hiding DIVs
    isNS4 = (document.layers) ? true : false;
    isIE4 = (document.all && !document.getElementById) ? true : false;
    isIE5 = (document.all && document.getElementById) ? true : false;
    isNS6 = (!document.all && document.getElementById) ? true : false;
//=======================================================

function switchDiv(strDivName,bolVisible){
//identify the element based on browser type
if (isNS4) {
  objElement = document.layers[strDivName];
} else if (isIE4) {
  objElement = document.all[strDivName].style;
} else if (isIE5 || isNS6) {
  objElement = document.getElementById(strDivName).style;
}

 if(isNS4){
     if(!bolVisible) {
      objElement.visibility ="hidden"
    } else {
      objElement.visibility ="visible"
    }    
 }else if(isIE4){
    if(!bolVisible) {
      objElement.visibility = "hidden";
    } else {
      objElement.visibility = "visible";
    }
} else if (isIE5 || isNS6) {
     if(!bolVisible){
        objElement.display = "none";
     } else {
       objElement.display = "";
       }
     }
}
/**********************************************
      // Reload the window if NS4 is resized  \\
      \\ Added By Jay Solomon 10/23/2003            //
      // If the browser is NS4 and it gets      \\
      \\ resized, this will reload the page.      //
 **********************************************/
var oWidth, oHeight;
if (isNS4) {
      oWidth = window.innerWidth; oHeight = window.innerHeight;
      window.onresize = function() {
      if (window.innerWidth != oWidth || window.innerHeight != oHeight)
            location.reload();
      }
}
//-->
</SCRIPT>
<style type="text/css">
.showTable{      position: absolute; }
</style>
</HEAD>

<BODY>
<a href="#" onClick="switchDiv('showTable',true);return false;">show</a><br>
<a href="#" onClick="switchDiv('showTable',false);return false;">hide</a><br>
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    <TR>
         <TD>Table 1</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
</TABLE>
<div id="dummy" style="position: absolute;"></div>
<script type="text/javascript">
<!--
if(isNS4){
     document.write('<div id="showTable" class="showTable">');
}
// -->
</script>
<div id='showTable' below="dummy">
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    <TR>
         <TD>Table 2</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
</TABLE>
</div>
<TABLE ID="tbl3" WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    <TR>
         <TD>Table 3</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
    <TR>
         <TD>&nbsp;</TD>
         <TD></TD>
         <TD></TD>
    </TR>
</TABLE>
</BODY>
</HTML>

Jay, Vinnie--

Sorry not to have responded sooner; I've been swamped with work. Let me take a look at what is happening here.

Fritz the Blank
Jay--

On your 10/24/2003 08:25AM PDT  post, you still have a document.write in the middle of the page. I don't know for certain, but I am guessing that will probably cause some grief at some point. I have no problem with a solution that incorporates css--anything that appears in the HEAD of the document and can be standardized is fine.

--Fritz the Blank
ok i think i may have you a solution

*whiping forhead* lol
___________________

Please see this link
http://jaysolomon.fateback.com/fritz.htm

also look at it in all browsers and please give me feedback
ASKER CERTIFIED SOLUTION
Avatar of jaysolomon
jaysolomon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Jay--

Thank you for all of your work here. I have been swamped and have been unable to put the time that I wanted to into this. I can definitely use as is for IE 4+ and NS6+, and I will try to think about how I can make this easier with NS 4 (which may not be possible.

Vinnie--

Thank you as well for your input!


Fritz the Blank
I tested it in NS4 and it works, but i would like it better myself if i could come up with a generic way to do it