Hide and Show Layer and DIV

[Total: 0    Average: 0/5]

This example shows how to hide and show a DIV/LAYER (IE55 and NS47).

Body Code:

<H3>Please select a flower:</H3> 
<FORM NAME=form1> 
<SELECT name=menu1 onChange="changeFlower(this.selectedIndex); return false;"> 
<OPTION >Mona Lisa Tulip</option> 
<OPTION >Mixed Dutch Tulips</option> 
</SELECT> 
</FORM> 
<BR><BR> 

<!-- We have four different layers, each with different info about flowers --> 
<!-- position this layer below the form layer --> 
<script>
var isNS4=document.layers?true:false;
var isIE=document.all?true:false;
var isNS6=!isIE&&document.getElementById?true:false;
if(isNS4)
{
document.write("NS4:<BR>");
document.write('<LAYER name="flower0" LEFT=50 width=400 BGCOLOR="#FFFFDD"><HR><H3 align="center">Mona Tulip</H3><BR CLEAR="ALL"><HR></LAYER>');
document.write('<LAYER name="flower1" LEFT=50      width=400  VISIBILITY="HIDE"      BGCOLOR="#DDFFDD"><HR><H3 align = center>Mixed Tulips</H3><BR CLEAR="ALL"><HR></LAYER>');
}
if(isIE||isNS6)
{
  if(isIE)
    document.write("IE:<BR>");
  else
    document.write("NS6:<BR>");
  document.write('<div id="flower0" LEFT=50 width=400 BGCOLOR="#FFFFDD"><HR><H3 align="center">Mona Tulip</H3><BR CLEAR="ALL"><HR></div>');
  document.write('<div id="flower1" LEFT=50      width=400  style="visibility:hidden;"      BGCOLOR="#DDFFDD"><HR><H3 align = center>Mixed Tulips</H3><BR CLEAR="ALL"><HR></div>');
}


// this function hides all the flower layers 

function hideAllflowerLayers() { 
if(isNS4)
{
document.flower0.visibility = "hide"; 
document.flower1.visibility = "hide"; 
}
if(isIE)
{
document.all.flower0.style.visibility = "hidden"; 
document.all.flower1.style.visibility = "hidden"; 
}
if(isNS6)
{
document.getElementById("flower0").style.visibility = "hidden"; 
document.getElementById("flower1").style.visibility = "hidden"; 
}
} 


// this function makes a single flower layer visible 
// we have cunningly named the flower layers so we 
// can tell which one to show based on the selectedIndex of the menu 

function changeFlower(n) { 
hideAllflowerLayers(); 
if(isNS4)
{
document.layers["flower" + n].visibility = "show"; 
}
if(isIE)
{
eval("document.all.flower"+n+".style.visibility='visible';");
}
if(isNS6)
{
document.getElementById("flower"+n).style.visibility = "visible"; 
}
} 

</SCRIPT> 
<HR>

Times Viewed: 5

Leave a Reply

Your email address will not be published. Required fields are marked *