midrange.com code scratchpad
Name:
screen_stack.html
Scriptlanguage:
Plain Text
Tabwidth:
4
Date:
06/05/2008 06:35:19 pm
IP:
Logged
Description:
Shows how to have more than one screen in a single HTML document.
Code:
  1. <html>
  2. <head>
  3. <style type="css">
  4.     p.lblFld {
  5.     clear: both;
  6.     float: none;
  7.     position: relative;
  8.     }
  9.     
  10.     p.lblFld input {
  11.   clear: left;
  12.   float: left;
  13.   margin-left: 80px;
  14.     }
  15.         
  16.     p.lblFld label {
  17.   clear: left;
  18.   display: block;
  19.   float: left;
  20.   margin-left: 10px;
  21.   width: 200px;
  22.     }
  23. </style>
  24. <script type="text/javascript">
  25. function toggleLayer( whichLayer )
  26. {
  27.   var elem, vis;
  28.   if( document.getElementById ) // this is the way the standards work
  29.     elem = document.getElementById( whichLayer );
  30.   else if( document.all ) // this is the way old msie versions work
  31.     elem = document.all[whichLayer];
  32.   else if( document.layers ) // this is the way nn4 works
  33.     elem = document.layers[whichLayer];
  34.   vis = elem.style;
  35.   // if the style.display value is blank we try to figure it out here
  36.   if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
  37.     vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  38.   vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  39. }
  40.  
  41.  
  42. </script>
  43.  
  44. </head>
  45.  
  46. <body onload="toggleLayer('screen2')">
  47.  
  48. <input type="button" onclick="toggleLayer('screen1'); toggleLayer('screen2')" value="Toggle Screen" />
  49.  
  50. <div id="screen1">    
  51.   <p class="lblFld">
  52.     <label for="cust_fnam">First Name</label>
  53.     <input type="text" id="cust_fnam" />
  54.   </p>
  55.   <p class="lblFld">
  56.     <label for="cust_lnam">Last Name</label>
  57.     <input type="text" id="cust_lnam" />
  58.   </p>  
  59.   <p class="lblFld">
  60.     <label for="cust_acct">Account</label>
  61.     <input type="text" id="cust_acct" />
  62.   </p>       
  63. </div>
  64.  
  65. <div id="screen2">
  66.   <p class="lblFld">
  67.     <label for="cust_phn">Phone</label>
  68.     <input type="text" id="cust_phn" />
  69.   </p>
  70.   <p class="lblFld">
  71.     <label for="cust_email">Email</label>
  72.     <input type="text" id="cust_email" />
  73.   </p>  
  74.   <p class="lblFld">
  75.     <label for="cust_title">Title</label>
  76.     <input type="text" id="cust_title" />
  77.   </p>        
  78. </div>
  79.  
  80. </body>
  81.  
  82. </html>
© 2004-2019 by midrange.com generated in 0.006s valid xhtml & css