| home / experts / dhtml / column12 |   
|
|
The four examples from the column are reproduced here. The first two use this function:
1. Link in the outline item head/single element (P) expansion:
2. onClick in the outline item head/multiple element (DIV) expansion:
The third and fourth examples use this function:
3. Image as link in the outline item head/single element (P) expansion:
4. Image with onClick in the outline item head/multiple element (DIV) expansion:
As promised, we include the code discussed, plus the additional code necessary if you choose to hide the collapsable elements during page load. These additions/modifications are marked in blue.
All outline heads, expandable elements, and HTML that follows the outline are placed in DIVs, and a SCRIPT is included at page end.
<DIV ID="elOneParent"
STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
<H3>
<A HREF="#"
onClick="expandIt('elOne'); return false">
<IMG NAME="imEx"
SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0
ALT="Expand/Collapse Item">
</A>
World Wide Web Consortium (W3C)
</H3>
</DIV>
<DIV ID="elOneChild"
STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
.
.
</DIV>
<DIV ID="elRest1"
STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
. remainder of page elements (part 1)
.
</DIV>
<DIV ID="elRest2"
STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
. remainder of page elements (part 2)
.
</DIV>
.
. possibly more DIVs
.
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (NS4) {
firstEl = "elOneParent";
firstInd = getIndex(firstEl);
showAll();
arrange();
}
//-->
</SCRIPT>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
function arrange() {
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
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();
}
function expandIt(el) {
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();
}
onload = initIt;
//-->
</SCRIPT>
Our cross-browser version appears on the next code page.
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column12/allCode1.html
