ONLamp.com
oreilly.comSafari Books Online.Conferences.

advertisement


Advanced JavaScript II

by Howard Feldman
08/16/2007

In the preceding article we introduced two types of JavaScript widgets complete with source: floating text and pop-up menus. In this article, we continue with another handful of useful JavaScript widgets, with an emphasis on how they actually work, so you can easily modify them for your own use. The JavaScript used in this article should work on all major current browsers without modification. So, without further ado...

Image Toggling with the div Tag

Often, you may want to put a bunch of stuff, such as images, on a web page, but they take up too much room. Why not put just one image, and let the user use a switch to toggle between the other ones? It works something like this:

figure

This is actually extremely simple to do. Note that the browser is NOT contacting the server each time you switch images, switching is instantaneous. The trick? Put them all in the HTML, but only show one at a time! This is easily accomplished using the div tag and styles. Quite a number of very impressive effects can be achieved using this technique, as will be seen in the following examples. But first, let us examine how this current example actually works. Only one JavaScript function is used:

function ShowImage(page, tag)
{
    var i = 1;
    var el;
    while (el = document.getElementById(tag + i)) {
        if (i == page)
            el.style.display = 'block';
        else
            el.style.display = 'none';
        i++;
    }
}

The actual images are then placed in the HTML at the location where they should appear, each within its own div tag, like so:

<table>
    <tr valign="top">
        <td>
            <div style="display:block" id="image1">
                <img src="/onlamp/2007/08/23/graphics/pic1.jpg" />
            </div>
            <div style="display:none" id="image2">
                <img src="/onlamp/2007/08/23/graphics/pic2.jpg" />
            </div>
            <div style="display:none" id="image3">
                <img src="/onlamp/2007/08/23/graphics/pic3.jpg" />
            </div>
        </td>
        <td width="100%" align="right">
            <select onchange="ShowImage(parseInt(this.value), 'image');">
                <option selected="selected" value="1">Image 1</option>
                <option value="2">Image 2</option>
                <option value="3">Image 3</option>
            </select>
        </td>
    </tr>
</table>

The table structure above is just for layout and can be ignored for the purposes of this discussion. The important part is the three sets of div tags in the first cell of the table. Note that the first has display set to block while the others have it set to none. Anything with display set to none is hidden from view and not drawn in the browser window, although it is still retrieved from the server and stored locally with the rest of the web page. Thus, initially we see only pic1.jpg and not the other two images.

Then on the selector box we have attached a call to our JavaScript function when the onchange event occurs. This is triggered when the user makes a new selection with the selector. We pass two arguments: a reference to the selector node itself and the base id of the div tags containing the images (note these are image1, image2 and image3, all starting with image).

The function starts by getting the newly selected value indicating which image to display. parseInt is used to ensure it is stored as a number and not a string. Next we fetch a handle to the first div tag, in this case the one with id image1. If this is the image to be shown, we set its display style to block; for all others we set it to none. Then we proceed to the next tag (image2), and so on, until no more tags are found, at which point we exit.

So, whenever a new item is selected in the drop-down box, the corresponding div block is revealed, and all others hidden. They all share the same physical space on the web page because they are right next to each other in the HTML. However, this is certainly not a restriction; we could have spread them across different areas of the page and had pictures appearing in various locations depending on the selection made, if desired. Similarly, we are not limited to images; just about anything can go between the div tags and be hidden and shown with a click of the mouse. This allows you to cram much more information onto a web page than you could normally, without requiring the user to do any scrolling!

Tabs: More Fun with div

Let us continue with another example of creative use of the div tag. Often it is desirable to make a web page with several "tabs" of information on it. Clicking on a tab shows the information on that tab, and hides the rest, much like how tabbed browsing works in the most recent round of web browsers. But, usually, clicking on an HTML tab like this causes the page to reload, which certainly disrupts the slickness of the interface. Wouldn't it be cooler if the information instantly appeared? Well thanks to the little trick we just learned in the previous example, it can. Try it out:

  • Summary
  • Details
  • Known Issues

Introducing the new, improved multi-widget. It slices, it dices, it even does your taxes! Order yours today! Call now: 555-WIDG


Not surprisingly, this example uses the exact same JavaScript function as the previous example, yet accomplishes a completely different effect. The remainder is done with a few simple CSS rules. Let's have a look at the HTML for this example:

<div style="display:block" id="tab1">
    <ul class="tab">
        <li class="tab_selected" onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>
    <p>
        Introducing the new, improved multi-widget.  It slices, it dices, it even does
        your taxes!  Order yours today!  Call now: 555-WIDG
    </p>
</div>

<div style="display:none" id="tab2">
    <ul class="tab">
        <li onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li class="tab_selected" onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>
    <p>
        The multi-widget is a sophisticated piece of complex machinery designed by the
        country's leading nuclear physicists.  Order yours today and you will quickly
        learn how easy it is to do just about anything in no time, thanks to our patented
        EZ-Widge technology.
    </p>
    <p>
        Motor: 5HP<br />
        Dimensions: 8" x 5" x 2"<br />
        Weight: 212 g<br />
        Radioactivity: negligible
    </p>
</div>

<div style="display:none" id="tab3">
    <ul class="tab">
        <li onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li class="tab_selected" onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>

    <ul>
        <li>Do not use multi-widget near open flames</li>
        <li>Do not run while holding multi-widget</li>
        <li>Do not taunt multi-widget</li>
        <li>
            Multi-widget may, under certain as yet undetermined circumstances,
            spontaneously explode.  We hereby disclaim any libaility for personal injury
            caused as a result of multi-widget; for your safety, we recommend wearing
            body armor while handling multi-widget.
        </li>
    </ul>
</div>

Note that we have three div sections (one for each tab) just as we had one for each image in the previous example. And again, the first block is given display:block while the others are display:none, so only the first will be visible initially. Each of these sections begins by drawing the three tabs, with the selected one a different color than the others. So, we actually draw all three tabs over again on each tab! The contents of the tab follow, and can be arbitrary HTML. Note that the contents only appear once, only the actual HTML for the tabs themselves is repeated multiple times, so the "wasted" space is minimal.

Pages: 1, 2, 3

Next Pagearrow





Sponsored by: