WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column12

Expandable Outlines
Navigator 4: expanding and collapsing elements

When our page has finished loading and all our elements are correctly placed, we need to immediately hide the expandable outline elements, and reposition the visible ones. In our script, we place an onLoad event handler:

onload = initIt;

Initialization

When the init() function is called (on page load), it first moves through all the positioned elements in the page, starting with the second outline element (firstInd+1), searching for those with the string "Child" in their ID. (It would be an excellent idea to reserve "Child" for expandable element identification only.) If such an element is found, its visibility property is set to hide. (A discussion of the merits of show/hide vs visible/hidden in Navigator-only code can be found in column 10, DHTML Jigsaw Puzzle, Navigator version.

function initIt(){
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
    }
    arrange();
}

Once all our outline child elements have been hidden, arrange() is called to reposition the elements. This time through, all collapsable elements will be skipped, resulting in just the outline heads visible, positioned in order.

Expanding/Collapsing on Demand

Recall from the previous page that our call to the expandIt() function is this link:

<A HREF="#"
   onClick="expandIt('elOne'); return false">
    <IMG NAME="imEx"
         SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0
         ALT="Expand/Collapse Item">
</A>

Since we are, as usual, building up to a cross-browser and backward-compatible code, the function call has been placed in the onClick handler, returning false to cancel the HREF for JavaScript browsers. We also now pass a string to expandIt(), instead of the element reference. Non-JavaScript browsers will get the dummy # value for HREF. Notice that all link images have the same NAME value, imEx.

The expandIt() function (Navigator version), first identifies the element to be manipulated by adding the document. prefix and Child suffix to the passed string. For example, elOneParent passes "elOne" to expandIt(), making whichEl equal to: document.elOneChild.

function expandIt(el) {
    if (!NS4) return;
    whichEl = eval("document." + el + "Child");
    whichIm = eval("document." + el + "Parent.document.images['imEx']");
    if (whichEl.visibility == "hide") {
        whichEl.visibility = "show";
        whichIm.src = "triUp.gif";
    }
    else {
        whichEl.visibility = "hide";
        whichIm.src = "triDown.gif";
    }
    arrange();
}

The image to be swapped is identified in a similar way, with the same prefix, and a suffix of Parent.document.images["imEx"]. In the example above, (whichIm) would be: document.elOneParent.document.images["imEx"].

Once the element to be expanded/collapsed and the relevant image are determined, expandIt() simply toggles the values of the element's visibility property and the image's src property.

Finally, arrangeIt() is called to reposition the elements.

The complete Navigator code is repeated in our first code page.

For now, however, let's create a cross-browser version.

Produced by Peter Belesis and

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Microsoft Article: BitLocker Encryption on Windows Server 2008 Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails Avaya Article: Call Control XML - Powerful, Standards-Based Call Control Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks Internet.com eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site

IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action Go Parallel Video: Performance and Threading Tools for Game Developers

Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Microsoft Download: Silverlight 2 Software Development Kit Beta 2 30-Day Trial: SPAMfighter Exchange Module Red Gate Download: SQL Toolbelt

Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Beta 2 Runtime MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

IBM IT Innovation Article: Green Servers Provide a Competitive Advantage Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

All Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column12/outNStwo.html