[Javascript] Using same script for a second purpose

Sat Jan 29 14:25:40 CST 2005

At 05:22 PM 1/28/2005, Richard wrote:
>When an item is clicked on in column 1, column 2a shows the thumbnails.
>Consider this a form of image swapping but for text.
>What I would like to do now is, to incorporate a means when a thumbnail is
>clicked on, a large image is shown below that along with a description.
>So far, using the bare bones image swapping works fine, but no descriptions.
>Not to mention being cumbersome and adding a lot of useless duplicated
>script.
...
>var kid = "FirstOn"
>function ShowInfo(DivId)
>   {
>   document.getElementById(kid).style.display = 'none';
>   document.getElementById(DivId).style.display = 'block';
>   kid = DivId;
>   }

Richard,

The technique above is fine, and can easily be used to display an image, a 
block of text, or both.

For the sake of conversation, I wanted to share with you an alternative 
technique for toggling divs from thumbnails.  When you click on a 
thumbnail, javascript sets the body class equal to the thumbnail id.  CSS 
handles all the div toggling.  Here's an example:
________________________________

HTML:

<!-- initialize the page by showing the first div -->
<body class="thumb1">

<div id="thumbbox">
         <a href="#" id="thumb1"><!-- thumbnail here --></a>
         <a href="#" id="thumb2"><!-- thumbnail here --></a>
</div>

<div id="divbox">
         <div id="div1">This appears when thumb1 is clicked</div>
         <div id="div2">This appears when thumb2 is clicked</div>
</div>
________________________________

CSS:

/* Initially hide all divs [see notes below] */
div#thumbbox div
{
         display: none;
}

/* show the currently-selected div */
body.thumb1 div#div1,
body.thumb2 div#div2
{
         display: block;
}
________________________________

JavaScript:

This is the core code that's run when you click a thumbnail:

         body.className = this.id;

This could be used inline:
         <a href="javascript: body.className = this.id;">
...but I prefer to put all my javascript in files external to the HTML 
page.  Here's how you can set up the event handlers (in shorthand; ask me 
if you want more particulars):

//------------------------------
// initialize thumbnails on page load
window.onload = InitThumbs;

//------------------------------
// initialization
function InitThumbs()
{
         // apply onclick event ThumbClick() to all anchors within div#thumbbox
         [for each element in anchor array]
                 oThumbs[i].onclick = ThumbClick;
}

//------------------------------
// anchor click event handler
function ThumbClick()
{
         // handle event propagation
         ...

         // what to do when clicked
         body.className = this.id;

         // suppress linking to anchor href
         return false;
}
________________________________

Notes:

As a general rule, it's not a good idea to suppress everything in CSS and 
then enable items in javascript, because if javascript isn't running in the 
user agent then nothing appears.  However, with this technique, it's easy 
enough to initialize the page with the first div showing simply by 
hard-coding the body class name.

If CSS isn't supported, all the divs will show.

If JavaScript isn't supported, the example above will show only 
div1.  Here's one way to handle this contingency:

         <a href="?thumb=thumb1" id="thumb1">

This will reload the same page but with the id of the thumbnail easily 
accessible in the querystring, which can then be intercepted by a 
server-side script to set the body class when the page is downloaded again.

Regards,
Paul  