homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

navigation Tree
javascript navigation tree problems

5+ Year Member

Msg#: 3773836 posted 10:57 pm on Oct 26, 2008 (gmt 0)
every time you load the page. the navigation starts out OPEN, and then closes really quickly. how do i fix this?

var toggleMenu = {
init : function(sContainerClass, sHiddenClass) {
if (!document.getElementById !document.createTextNode) {return;} // Check for DOM support
var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
var arrSubMenus, oSubMenu, oLink;
for (var i = 0; i < arrMenus.length; i++) {
arrSubMenus = arrMenus[i].getElementsByTagName('ul');
for (var j = 0; j < arrSubMenus.length; j++) {
oSubMenu = arrSubMenus[j];
oLink = oSubMenu.parentNode.getElementsByTagName('a')[0];
oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
this.toggle(oSubMenu, sHiddenClass);
toggle : function(el, sHiddenClass) {
var oRegExp = new RegExp("(^\\s)" + sHiddenClass + "(\\s$)");
el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
/* addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html */
addEvent : function(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() {obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type, obj[type+fn]);
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
getElementsByClassName : function(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^\\s)" + strClassName + "(\\s$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
return (arrReturnElements)
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});



5+ Year Member

Msg#: 3773836 posted 12:41 pm on Oct 27, 2008 (gmt 0)

the navigation starts out OPEN

Sounds to me like you need to have the elements set to hidden in the css either with "display:none;" or "visibility:hidden;" in the css for them prior to the page loading. Otherwise if you rely on the script to set it to hidden when the page loads there will be a brief flash of the elements in view before the script hides them.


WebmasterWorld Administrator httpwebwitch us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3773836 posted 7:18 pm on Oct 28, 2008 (gmt 0)

Some developers refer to this lovingly as FOUC (Flash Of Unstyled Content). A search for FOUC will get you some examples and helpful articles.

The remedy is, as astupidname says, to style them upfront in the <head> CSS as "hidden", so they are already styled properly as they get rendered for the first time.


5+ Year Member

Msg#: 3773836 posted 1:17 pm on Oct 30, 2008 (gmt 0)


Lol... we've all said that before... or worse!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved