JavaScript_Extras
— print (last updated: Jul 15, 2009) — print

Select font size:
Download the JavaScript_Extras.ziparchive if you're interested in any of these examples. They have been tested on recent versions of Firefox and Internet Explorer running on Windows and Linux systems.
  1. Timers
  2. Motion
  3. Image Sequencing with Fade Out/In
  4. Stretched Background Image
  5. Menus
  6. Popups
  7. Expanding Lists

Miscellaneous Examples

  1. Use display property to show/hide content under list items.
    Run it in separate window. View the Code 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>clickNshow</title>
<style type="text/css">
<!-- 
div.footnote {
  display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showhide(which)
{
  var d = document.getElementById("d" + which)
	if (d.showing) {
	  d.style.display = "none"
		d.showing = false;
	} else {
	  d.style.display = "block"
		d.showing = true;
	}
}
// -->
</script>
</head>
<body>
<ul>
<li><a href="javascript:showhide(1)">first item</a>
<div class="footnote" id="d1">
Here is stuff I want to say about the first item.
</div>
</li>
<li><a href="javascript:showhide(2)">second item</a>
<div class="footnote" id="d2">
Here is stuff I want to say about the first item.
</div>
</li>
</ul>
</body>
</html>
    This example takes advantage of JavaScript's ability to create arbitrary object properties. In this case, the div elements beneath the list items use the boolean property showing to control whether clicking means to show or to hide.

© Robert M. Kline