July 2006


Javascript code snippets28 Jul 2006 02:02 pm

An easy method to create an expanding list using javascript. I've incorporated the code into some server status pages to show or hide tables. Effective and clean looking.

CODE:
  1. <html>
  2. <head>
  3. <title></title>
  4.  
  5. <style>
  6. ul {  margin-top: 0px;  margin-bottom:0px; }
  7.  
  8. ul.expand { display: none; }
  9.  
  10. li { list-style-type: none; display: block; }
  11.  
  12. img {
  13.   border: none;
  14.   vertical-align:
  15.   text-bottom;
  16. }
  17. </style>
  18.  
  19. <script>
  20. function toggle(id)
  21. {
  22.   var L = document.getElementById("L"+id);
  23.   var I = document.getElementById("I"+id);
  24.   if (L.style.display == "" || L.style.display == "none") {
  25.     L.style.display = "block";
  26.     I.src = "opened.gif";
  27.   }
  28.   else {
  29.     L.style.display = "none";
  30.     I.src = "closed.gif";
  31.   }
  32. }
  33. </script>
  34.  
  35. </head>
  36. <body>
  37.  
  38. <h3>An Expanding List</h3>
  39.  
  40. <p>
  41. Click on the red right-arrows to expand the list.
  42. Click on the green down-arrows to contract the list.
  43. </p>
  44.  
  45. <li><img onclick="toggle(1)" id="I1" src="closed.gif"/>Topic A 
  46.    <ul class="expand" id="L1">
  47.      <li><img src="fixed.gif" />Topic A1</li>
  48.      <li><img onclick="toggle(2)" id="I2" src="closed.gif"/>Topic A2
  49.     <ul class="expand" id="L2">
  50.       <li><img src="fixed.gif" />Topic A21</li>
  51.       <li><img src="fixed.gif" />Topic A22</li>
  52.       <li><img src="fixed.gif" />Topic A23</li>
  53.     </ul>
  54.     </li>
  55.   <li><img src="fixed.gif" />Topic A3</li>
  56. </ul>
  57. </li>
  58.  
  59. <li>
  60. <img onclick="toggle(3)" id="I3" src="closed.gif"/>Topic B
  61.   <ul class="expand" id="L3">
  62.     <li><img src="fixed.gif" />Topic B1</li>
  63.     <li><img src="fixed.gif" />Topic B2</li>
  64.     <li><img src="fixed.gif" />Topic B3</li>
  65.   </ul>
  66. </li>
  67. </body>
  68. </html>
  69.  
  70. and here is how it works.
  71. Timer Display
  72.  
  73. Animation, in its broadest sense means changing the content over time, usually withing small time intervals. In JavaScript, the key to animation is the setInterval function which causes a function to be called at periodic intervals.
  74. This is perhaps the most basic example illustrating the usage of the setInterval function. The current time and date can be read into a string using an operation something like this:
  75.  
  76. timedate = new Date();
  77.  
  78. What we want to do is to depict the "running" time in our browser, i.e., we want it updated every second with a new value. Here is the example:
  79.  
  80. <html>
  81. <head>
  82. <title>Timer</title>
  83. <script type="text/javascript">
  84. <!--
  85. function init()
  86. {
  87.   showDate();
  88.   setInterval('showDate()', 1000);
  89. }
  90. function showDate()
  91. {
  92.   var time = document.getElementById("time");
  93.   time.innerHTML = new Date();
  94. }
  95. // -->
  96. </script>
  97. </head>
  98. <body onload="init();">
  99.  
  100. The current time and date on my system is:
  101. <span style="color:red" id="time"></span>
  102.  
  103. </body>
  104. </html>

Borrowed from http://www.cs.wcupa.edu/~rkline/Web/JavaScriptExamples.html

Linux / Unix21 Jul 2006 09:02 am
Blogging Resources12 Jul 2006 01:47 pm
Linux / Unix12 Jul 2006 01:23 pm
Webmaster / SEO07 Jul 2006 03:47 pm

Next Page »


Wordpress Themes - Find jobs - Credit Consolidation - Acs Student Loans - Cheat Codes
X10 Home Security|Dakar's Photos
Listed on BlogShares