O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Collapsible XML Menus

NN 6, IE 5(Win)

Problem

You want to present a navigation menu that looks and operates like the collapsible hierarchy shown in the lefthand frame of many popular products (Windows Explorer, Outlook Express, Adobe Acrobat PDF bookmarks, and so on), but the data needs to come from an XML data source.

Solution

Use the XMLoutline.js library shown in Example 10-7 in the Discussion to convert a specially formatted XML outline document to an interactive collapsible menu like the one shown in Figure 10-4 of Recipe 10.10. Include a simple, empty div element in the HTML portion of your page where the outline is to appear:

<div id="content"></div>

In the body, assign the menu initialization function, initXMLOutline( ) , to the onload event handler, specifying the filename of the XML file:

onload="initXMLOutline('SpecOutline.xml')"

Also include at the bottom of the page an <object> tag that tries to load the relevant ActiveX control in Internet Explorer for Windows before it's needed in the script code:

<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" WIDTH="1" HEIGHT="1" 
        classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>

Other pieces that you need to provide or customize, as described in the Discussion, are the following:

  • The OPML source for the data

  • Images for the outline graphics

  • Script global variable values for precached images and outline item link target

  • Style sheet rule dimensions to match your image ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required