Hide and show layer

Hide and show layer : Layer : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

Hide and show layer



 
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh

Publisher: O'Reilly 
Series: Cookbooks
ISBN: 1-56592-577-7
*/ 

<HTML>
<HEAD>
<TITLE>dhtml.js example</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
// dhtml.js

// Set browser-determined global variables
var NN      = (document.layers ? true : false);
var hideName = (NN ? 'hide' : 'hidden');
var showName = (NN ? 'show' : 'visible');
var zIdx    = -1;
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
  if (NN) {
    document.writeln('<LAYER NAME="' + sName + '" LEFT=' + sLeft + ' TOP=' + sTop + 
    ' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + ' VISIBILITY="' + sVis + '"' + 
    ' z-Index=' + zIdx + '>' + copy + '</LAYER>');
    }
  else {
    document.writeln('<DIV ID="' + sName + '" STYLE="position:absolute; overflow:none; left:' + 
      sLeft + 'px; top:' + sTop + 'px; width:' + sWdh + 'px; height:' + sHgt + 'px;' + 
      ' visibility:' + sVis + '; z-Index=' + (++zIdx) + '">' + 
      copy + '</DIV>'
      );
    }
  }

// Define a function to hide layers
function hideSlide(name) {
  refSlide(name).visibility = hideName;
  }

// Define a function to reveal layers
function showSlide(name) {
  refSlide(name).visibility = showName;
  }

// Define a central function to reference layers
function refSlide(name) {
  if (NN) { return document.layers[name]; }
  else { return eval('document.all.' + name + '.style'); }
  }


</SCRIPT>
</HEAD>
<BODY>
[<A HREF="javascript: hideSlide('myLayer');">Hide</A>] 
[<A HREF="javascript: showSlide('myLayer');">Show</A>] 
<SCRIPT LANGUAGE="JavaScript1.2">
<!--

genLayer('myLayer', 10, 75, 300, 300, showName, "<BODY BGCOLOR=RED><BR><BR><CENTER><H3>This is a stylesheet. Ain't it grand?!</H3></BODY>");

//-->
</SCRIPT>

</BODY>
</HTML>