Note: This is now an outdated version. Wherever possible you should use the Current Version
This page documents useful functionality in the script used throughout this site:
To download the script to your PC, <Right-Click> Generalv1.js and choose Save As.
A document container which shows either an ordered or a random sequence of images, changing them either under user control, by clicking, or under timer control.
The container can be <body> or <div> (possibly others though others have not been tested). The slide show displays the images centred and at the maximum size that will fit into the container, preserving aspect ratio. If the show is under timer control, clicking it alternately pauses and continues it, with the title / tooltip / popup changing accordingly to give user feedback.
Here are two examples - the left sequential, the right random - deliberately having slightly different timings to test over time how one or more on the same page interact (the code was written to handle multiple shows on one page, so they shouldn't and don't, but see the following paragraphs).
Pictures obviously consume resources in being loaded and shown - the amount consumed rises with each additional show, and the rate of consumption with the change rate, so the accurate timing of changes will be unavoidably affected by factors such as CPU loading.
Worse, seemingly the only realistic way of getting accurate picture dimensions is wasteful, to preload 'off screen', note them, and then reload 'on screen'! Further, again because there doesn't seem to be another realistic method, the preload uses the onload attribute of a programmatically created img element, but this attribute has been deprecated. Hence, in any given browser, support for SlideShow may end at any time!
| anImg | The <img> tag or its ID in which to show the slides. |
|---|---|
| aPicArr | Array of relative URLs of the images to be shown. |
| aURL | The base URL for the pictures, default document.URL. |
| interval | Timer interval in ms, default 0 (change under user control by clicking). |
| isRandom | Whether to show the pictures randomly, true, or in sequence, default false. |
| repeatBlock | When random, the number of intervening images between repeats of any given one (default: if # of pics < 3, then # - 1, else # / 3). |
<script>
<!--
/*
Whether the container for the slide show's <img> tag is the <body> or a <div>, it
must be styled with a width and a height so that images can be centred properly.
For the <body>, you're probably going to want to start with the window dimensions
(choose the scale factor sc to avoid unnecessary scroll bars) …
*/
var sc = 0.97;
var ww = window.innerWidth ?
window.innerWidth :
document.documentElement.clientWidth;
var wh = window.innerHeight ?
window.innerHeight :
document.documentElement.clientHeight;
var bwn = Math.round( sc*ww );
var bhn = Math.round( sc*wh );
document.body.style.width = bwn + "px";
document.body.style.height = bhn + "px";
//-->
</script>
<style type="text/css">
<!--
/*
… whereas for a <div>, styles can be applied directly …
*/
.album { width:350px; height:263px; border:2px solid white; padding:0; }
.album img { margin:0; border:0; padding:0; }
// -->
</style>
<!--
The Slide Show
==============
Note: Empty image src attributes as given here are not considered best practice …
http://developer.yahoo.com/performance/rules.html#emptysrc
-->
<div class="album">
<img
id="Slide"
alt="Slide Show"
title="Slide Show"
src=""
onkeypress="slideShow.click(event);"
onclick="slideShow.click(event);"
/>
</div>
<script>
<!--
var pics = [ "Pic1.jpg", … ];
var interval = 5000;
var slideShow = new SlideShow( "Slide", pics, undefined, interval, true );
//-->
</script>
A document branch or element - some text, a diagram, etc - which can be alternately shown and hidden (toggled) in response to keystrokes or mouse clicks. In principle, any element can be the sensitive element that does the toggling, and any content can be toggled. Here's an example based on two <span>s (click the green text a couple of times to see what happens):
Here is a technical term (explanation of technical term), which may need further explanation.
This DHTML equivalent of a footnote or technical appendix makes further detail available to those that want it, without swamping those that don't, with the added advantage that it can be read without leaving the main document flow, and consequent need to navigate back to the point of departure.
| anElement | Element or its ID which is sensitive to the click or keystroke. |
|---|---|
| aCompArr | Element or its ID or array of same which is/are to be toggled. |
| init | The initial state: true to show, false to hide, default is to leave as specified by HTML. |
In the code sample below, note the following:
<style type="text/css">
<!--
/* Hides elements in dynamic HTML */
.invis
{ display:none; margin:0; padding:0; line-height:0; }
@media screen
{
/* Toggle styles */
.toggle
{ text-decoration:none; color:#33CC33; }
.toggle:hover, .toggle:active
{ text-decoration:underline; cursor:help; }
.closed > *, .opened > *
{ color:#CCCCCC; }
.closed, .opened, .toggle
{ color:#33CC33; }
}
@media print
{
.toggle
{ color:#000000; text-decoration:none; }
}
// -->
</style>
<!--[if (gte IE 5)&(lte IE 7)]>
<style type="text/css">
<!--
// -->
@media screen
{
.closed *, .opened *
{ color:#CCCCCC; }
.closed, .opened, .toggle, .toggle *
{ color:#33CC33; }
.toggle, .toggle *
{ text-decoration:underline; cursor:help; }
}
</style>
<![endif]-->
…
<p>
Here is a
<span
id="TB"
onkeypress="tb.toggle(event);"
onclick="tb.toggle(event);"
title="Explanation of technical term"
>technical term</span><span id="TBText"> (explanation of technical term)</span>,
which may need further explanation.
</p>
<script>
<!--
var tb = new ToggleBlock( "TB", "TBText", false );
setClass( "TB", "toggle", true );
//-->
</script>
A document branch, probably in a block level element, which can be toggled in response to a button press. This is more appropriate than a Toggle Block for blocks of significant size. On this site, it's used to hide blocks of mathematics that the average person may not have the desire or knowledge to follow, but the more adventurous or knowledgeable may wish to see. Here's a trivial example:
Heavy mathematics here!
Inherits from ToggleBlock.
| aCaption | The button text, which will be combined with 'Hide ' or 'Show ' depending on the state of the block. |
|---|---|
| aButton | Button element or its ID. |
| aCompArr | Element or its ID or array of same which is/are to be toggled. |
| init | The initial state: true to show, false to hide, default is to leave as specified by HTML. |
In the code sample below, note the following:
<style type="text/css">
<!--
/* Hides elements in dynamic HTML */
.invis
{ display:none; margin:0; padding:0; line-height:0; }
@media screen
{
.noscreen
{ display:none; margin:0; padding:0; line-height:0; }
}
@media print
{
.noprint
{ display:none; margin:0; padding:0; line-height:0; }
}
// -->
</style>
<button
id="MathsButton"
class="noscreen noprint"
title="Show/hide maths"
onclick="Maths.toggle(event);"
>Hide Maths</button>
<div id="MathsText">
<p><em>Heavy mathematics here!</em></p>
</div>
<script>
<!--
var Maths = new ButtonBlock( "Maths", "MathsButton", "MathsText", false );
setClass( "MathsButton", "noscreen", false );
//-->
</script>
A function to find all the elements of (a) certain type(s) (that is, of matching tag name) within a document or document subtree. Here's a demonstration:
| aNode | A node or its ID down from which to search. |
|---|---|
| theTypes | A tag name or an array of them which is/are being sought. Regular Expression pattern matching is used, case is ignored. |
<button
onclick="alert(
'There are '
+ TreeWalk(document.body,'h[1-6]').length
+ ' heading tags in this document!'
);"
>TreeWalk</button>
| Updated | Description |
|---|---|
| 12/02/2010 | Corrected missing dots (periods, full-stops) in some style listings. |
| 09/12/2009 | Created. |