advanced code snippet search

Posted By

Malgrim on 06/07/09


Tagged

toggle dispaly


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Malgrim


toggle Display

 / Published in: JavaScript
 
Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Toggle Display in Javascript</title>
  6. <style type="text/css"> /* normalerweise in eigener .css-Datei */
  7.   #container {
  8.     border: 1px outset #BBBBBB;
  9.     padding: 2px;
  10.     width: 15em;
  11.   }
  12.   #loginBox {
  13.     display: none;
  14.     border: 1px inset #BBBBBB;
  15.     padding: 2px;
  16.   }
  17.   .c {
  18.     text-align: center;
  19.   }
  20. </style>
  21. <script type="text/javascript" language="javascript"> /* normalerweise in eigener .js-Datei */
  22.   function getStyle(oElm, strCssRule) {
  23.     var strValue = "";
  24.     if(document.defaultView && document.defaultView.getComputedStyle){
  25.       strValue = document.defaultView.getComputedStyle(oElm,"").getPropertyValue(strCssRule);
  26.     } else if(oElm.currentStyle) {
  27.       strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
  28.         return p1.toUpperCase();
  29.       });
  30.       strValue = oElm.currentStyle[strCssRule];
  31.     }
  32.     return strValue;
  33.   }
  34.  
  35.   function toggleDisplay(element) {
  36.     if (getStyle(element,'display') == "none") {
  37.       element.style.display = "block";
  38.     } else {
  39.       element.style.display = "none";
  40.     }
  41.   }
  42. </script>
  43. </head>
  44. <body>
  45.   <form id="login" method="post" action="#">
  46.     <div id="container">
  47.       <p class="c"><a href="#" onclick="toggleDisplay(document.getElementById('loginBox')); return false;">Login</a></p>
  48.       <div id="loginBox">
  49.         <table>
  50.           <tr><td><label for="nameField">Name:</label></td><td><input id="nameField" type="text" name="name" /></td></tr>
  51.           <tr><td><label for="passField">Passwort:</label></td><td><input id="passField" type="password" name="password" /></td></tr>
  52.         </table>
  53.         <p class="c"><input type="submit" value="Login" /></p>
  54.       </div>
  55.     </div>
  56.   </form>
  57. </body>
  58. </html>

Report this snippet  

You need to login to post a comment.