Nav Slider

[mr_ego]

I'm sure somebody will find this fascinating ... if not expand on it either.

function navigationController (navContainer) {

// The class name of toggle objects which will be initially hidden
this.toggleDivClassName = "toggle";

this.togglePixels = 10;

// The delay between each move.
this.toggleDivDelay = 30;

this.navGroups = new Array ();

this.animLock = null;

this.init = function (navContainer) {
this.navObjects = navContainer.getElementsByTagName ("DL");

for (var i=0; i < this.navObjects.length; i++) {
var dl = this.navObjects [i];

for (var j=0; j < dl.getElementsByTagName ("DT").length; ++j) {
dt = dl.getElementsByTagName ("DT").item (j);
dt.className = "open";

dt.navControl = this;

if (dt.addEventListener) {
dt.addEventListener (
"click",
function () {
this.navControl.toggle (this);
},
false
);
} else {
dt.attachEvent (
"onclick",
function () {
this.navControl.toggle (this);
}
);
}
}

for (var j=0; j < dl.getElementsByTagName ("DD").length; ++j) {
dd = dl.getElementsByTagName ("DD").item (j);
dd.style.overflow = "hidden";
dd.navOptions = new Object ();
dd.navOptions.currentHeight = dd.offsetHeight;
dd.navOptions.maxHeight = dd.offsetHeight;
}
}
}

this.toggle = function (toggleDT) {
if (this.animLock !== null) {
return;
}

toggleDD = toggleDT.parentNode.getElementsByTagName ("DD").item (0);
this.animLock = toggleDD;

toggleDD.style.visibility = "visible";
toggleDD.style.position = "static";

if (toggleDT.className == "open") {
toggleDT.className = "close";
this.toggleHide (toggleDD);
} else {
toggleDT.className = "open";
this.toggleShow (toggleDD);
}
}

this.toggleShow = function (toggleDD) {
if (this.animLock == null) {
return null;
}

if (this.animLock !== toggleDD) {
return null;
}

toggleDD.style.position = "static";
toggleDD.style.visibility = "visible";

toggleDD.navOptions.currentHeight += this.togglePixels;

if (toggleDD.navOptions.currentHeight >= toggleDD.navOptions.maxHeight) {
toggleDD.style.height = toggleDD.navOptions.maxHeight + "px";
toggleDD.style.opacity = 1;
toggleDD.navOptions.currentHeight = toggleDD.navOptions.maxHeight;
this.animLock = null;
} else {
toggleDD.style.height = toggleDD.navOptions.currentHeight + "px";
toggleDD.style.opacity = (toggleDD.navOptions.currentHeight / toggleDD.navOptions.maxHeight);

window.navControl = this;
window.setTimeout (
function () {
this.navControl.toggleShow (
this.navControl.animLock
);
},

this.toggleDivDelay
);
}
}

this.toggleHide = function (toggleDD) {
if (this.animLock == null) {
return null;
}

if (this.animLock !== toggleDD) {
return null;
}

toggleDD.navOptions.currentHeight -= this.togglePixels;

if (toggleDD.navOptions.currentHeight <= 1) {
toggleDD.style.position = "absolute";
toggleDD.style.visibility = "hidden";
toggleDD.navOptions.currentHeight = 0;
toggleDD.style.opacity = 0;
this.animLock = null;
} else {
toggleDD.style.height = toggleDD.navOptions.currentHeight + "px";
toggleDD.style.opacity = (toggleDD.navOptions.currentHeight / toggleDD.navOptions.maxHeight);

window.navControl = this;
window.setTimeout (
function () {
this.navControl.toggleHide (
this.navControl.animLock
);
},

this.toggleDivDelay
);
}
}

this.init (navContainer);
}

// Attach an onLoad handler to the window to initially hide all the toggle DIV objects.
// Only do it if sufficient JS capability is present in the browser

if (document.getElementById && document.getElementsByTagName) {
if (window.addEventListener) {
window.addEventListener (
"load",
function () {
navControl = new navigationController (
document.getElementById ("pageNavigation")
);
},
false
);
} else {
window.attachEvent (
"onload",
function () {
navControl = new navigationController (
document.getElementById ("pageNavigation")
);
}
);
}
}