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:
- <html>
- <head>
- <style type="css">
- p.lblFld {
- clear: both;
- float: none;
- position: relative;
- }
-
- p.lblFld input {
- clear: left;
- float: left;
- margin-left: 80px;
- }
-
- p.lblFld label {
- clear: left;
- display: block;
- float: left;
- margin-left: 10px;
- width: 200px;
- }
- </style>
- <script type="text/javascript">
- function toggleLayer( whichLayer )
- {
- var elem, vis;
- if( document.getElementById ) // this is the way the standards work
- elem = document.getElementById( whichLayer );
- else if( document.all ) // this is the way old msie versions work
- elem = document.all[whichLayer];
- else if( document.layers ) // this is the way nn4 works
- elem = document.layers[whichLayer];
- vis = elem.style;
- // if the style.display value is blank we try to figure it out here
- if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
- vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
- vis.display = (vis.display==''||vis.display=='block')?'none':'block';
- }
-
-
- </script>
-
- </head>
-
- <body onload="toggleLayer('screen2')">
-
- <input type="button" onclick="toggleLayer('screen1'); toggleLayer('screen2')" value="Toggle Screen" />
-
- <div id="screen1">
- <p class="lblFld">
- <label for="cust_fnam">First Name</label>
- <input type="text" id="cust_fnam" />
- </p>
- <p class="lblFld">
- <label for="cust_lnam">Last Name</label>
- <input type="text" id="cust_lnam" />
- </p>
- <p class="lblFld">
- <label for="cust_acct">Account</label>
- <input type="text" id="cust_acct" />
- </p>
- </div>
-
- <div id="screen2">
- <p class="lblFld">
- <label for="cust_phn">Phone</label>
- <input type="text" id="cust_phn" />
- </p>
- <p class="lblFld">
- <label for="cust_email">Email</label>
- <input type="text" id="cust_email" />
- </p>
- <p class="lblFld">
- <label for="cust_title">Title</label>
- <input type="text" id="cust_title" />
- </p>
- </div>
-
- </body>
-
- </html>
|
|
|