Expandable Outlines
Expandable Outlines
creating expandable/collapsable outlines in both browsers
This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 or Internet Explorer 4, Release.
This technique was developed after a suggestion by Anders Lund.
Those of you who visit our links page regularly will be pleased to know that we've minimized the scrolling needed to browse the link list, by presenting the page in an expandable/collapsable outline format for DHTML browers.
In fact, the whole list is reproduced here. Click on the triangle images to expand and collapse the individual headings or even the complete list:
Non-DHTML Browsers: Jump to end of outline
Standards
HTML 4.0 Proposed Recommendation New! - Important!!
https://www.w3.org/TR/PR-html40
The Biggie! Already implemented in part by 4th generation browsers, HTML 4.0 ties up the loose ends created by the browser wars, and sets the standard for the fifth browser generation.HTML 3.2 Recommendation
https://www.w3.org/pub/WWW/TR/REC-html32.htmlCascading Style Sheets, level 1 (CSS1)
https://www.w3.org/pub/WWW/TR/PR-CSS1Soon-to-be Standards
The Document Object Model New!
https://www.w3.org/TR/WD-DOM/
By far the most important pending recommendation for Dynamic HTML. At last being publicly discussed and developed.Cascading Style Sheets, level 2 (CSS2) N e w!
https://www.w3.org/TR/WD-CSS2/
The future style sheet standard. Many features are already implemented in DHTML browsers. Expands on CSS1 and includes the following separately-developed working drafts:Extensible Markup Language (XML): Part1. Syntax
https://www.w3.org/TR/WD-xml-lang
Do-it-yourself mark up. Then what will the W3C do?Dynamic HTML documentation Updated!
https://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm
Recently updated for Communicator final release with better CSS documentation and examples. An invaluable reference for developers, the complete documentation can be viewed online, or downloaded as:Dynamic HTML documentation
https://www.microsoft.com/sitebuilder/workshop/author/dhtml/
a.k.a Anything you can do, I can do better.Internet Client SDK Invaluable!
https://www.microsoft.com/msdn/sdk/inetsdk/help/
The Complete Reference for Internet Explorer. Dynamic HTML section superior to Microsoft's own DHTML docs, above.Microsoft - Final Release Notes New!
https://www.microsoft.com/workshop/prog/ie4/new/If you have a low-resolution monitor or just plain want to break out of Microsoft's ridiculous multi-framed navigation, go directly to...
What's New in Internet Explorer 4.0 Final Release? New!
https://www.microsoft.com/workshop/prog/ie4/new/new.htmChanges between Internet Explorer 3 and 4 New!
https://www.microsoft.com/workshop/prog/ie4/changes/4vs3.htmJavaScript, The Complete Reference Updated! - Must Have!!
https://developer.netscape.com/library/documentation/communicator/jsref/index.htm
Finally available, the comprehensive documentation for JavaScript, both client and server. Includes the JavaScript 1.2 addendum. The new JavaScript Bible. Can be viewed online, or downloaded as:JavaScript Guide New!
https://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm
Describes the core JavaScript language, including JavaScript 1.2 features. Serves as a quick reference to JavaScript structure. Full description of properties and methods, however, only in The JavaScript Reference. Can be viewed online, or downloaded as:JavaScript 1.2 Addendum Updated!
https://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm
Puts the Dynamic in Netscape's Dynamic HTML. Now also available as part of The JavaScript Reference. Can be viewed online, or downloaded as:ECMAscript
https://www.ecma.ch/STAND/Ecma-262.htm
The new international web scripting language standard based on JavaScript 1.1, recently ratified by ECMA, now available for downloading, in
self-expanding MS WORD or Acrobat PDF format.
You read it here first: ECMA stands for European Computer Manufacturers AssociationMicrosoft Scripting New!
https://www.microsoft.com/scripting/
Microsoft's new home page for all its scripting docs, articles and links.JScript Updated!
https://www.microsoft.com/jscript/
Complete Reference for JScript 3 for IE4.
What's New in JScript 3.0 New!
https://www.microsoft.com/workshop/prog/ie4/jscript3.htm
Answers the question "How compatible is JScript 3 with JavaScript 1.2?"VBScript
https://www.microsoft.com/vbscript/
The 8-track tape of scripting.W3C PNG Recommendation
https://www.w3.org/pub/WWW/TR/REC-png.htmlThe Official PNG Home Page
https://www.wco.com/~png/png.htmlPlug-in for Netscape Navigator
https://codelab.siegelgale.com/solutions/png_index.htmlNetscape JavaScript Bugs Updated for Communicator!
https://developer.netscape.com/library/javascript/faqs/buglist/js-known-bugs.htmlCommunicator CSS1 Known Issues
https://developer.netscape.com/support/bugs/known/css.htmlThere's no place like home
Doc JavaScript
https://www.webreference.com/js/
Bi-weekly prescriptions for all your JavaScript ailments.Cascading Style Sheets
https://www.webreference.com/dev/style/
An Introduction to CSSStyle Sheet Syntax
https://www.webreference.com/dev/style/syntax.html
Excert from the upcoming book HTML Web Publishing SECRETS from IDG BooksCascading Style Sheets: Designing for the Web
https://www.webreference.com/content/css/
Excerpts and a full chapter from the book by Hakon Lee and Bert Bos of the W3C.The Evolution of Style Sheets
https://www.webreference.com/dev/style/evolution.html
A history of CSS and future directions.Other Developer Sites
IE Help New!
https://www.iehelp.com/
Compuserve's new Explorer-related megasite.
Dynamic HTML in IE New!
https://www.iehelp.com/iehelp/solutions/
Weekly IE-related DHTML techniques by yours truly.Netscape Help New!
https://www.netscapehelp.com/
Compuserve's new Netscape-related megasite.BrowserWars.com New!
https://www.browserwars.com/
Compuserve's new megasite devoted solely to coverage of browser development.DHTML Dude New!
https://www.microsoft.com/sitebuilder/columnists/default.asp
Microsoft's own regular DHTML column with a name I wish I had thought of.Builder.com
https://www.builder.com/
C|NET's site for web developers. Regular SuperScripter column, and longer in-depth occasional articles.Inside DHTML
https://www.insidedhtml.com/
Scott Isaacs' comprehensive source of Dynamic HTML information and techniques. Focus on IE4. MSIE4 absolute must!Dynamic HTML Zone
https://www.dhtmlzone.com/
Macromedia's ambitious new Dynamic HTML mega-site with articles, tutorials, and discussion group.Web Review
https://www.webreview.com/
Regular Dynamic HTML articles, particularly in bi-weekly Web Coder column by Nick Heinle of WebReference's JavaScript Tip of the WeekWebCoder
https://webcoder.com/
Nick Heinle's all-encompassing site on DHTML and JavaScript.NetscapeWorld
https://www.netscapeworld.com/
Monthly articles, strong in JavaScript, some DHTML. Undergoing major re-construction. Stay tuned.WebMonkey
https://www.webmonkey.com/
Regular coding columns, but their Wired layout needs deciphering.
Admittedly, this technique is becoming popular with IE4-specific pages. We, too, will discuss the Explorer methods in detail, but we'll move a step further to create a Navigator version, and finally a cross-browser version of expandable outlines.
In This Column
We will discuss:
- the CSS1 display property
- browser support of display (surprising results)
- simple outlines in Explorer
- outlines with swapped images in Explorer
- outlines in Navigator
- cross-browser outlines
- multi-item expansion/collapse with one click
Along the way, we'll explore for the first time:
- how to dynamically create CSS stylesheets with browser-specific values using JavaScript
- how to use the powerful new Explorer methods, tags() and item()
- how to use the Navigator scrollTo() method.
We start with an overview of the display property.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Jan. 14, 1998
Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column12/