[jQuery] problem with document ready function
I have a collapsing expanding menu I want to collapse before the
images load on the page. I was able to do this with the $document
ready command. Only problem is ....
In FF3 menu collapses immediately...once all images are loaded the
menu expands again ... :(
In IE6 works
In IE7 menu never collapses
Using onpageload produces varied results as well loading the script
after all the slow images...and sometimes in IE7 the menu doesn't
collapse.
here is the page
http://www.ryanvosburg.com/portfolio/blackcreek/indexdom.html
here is the code
var toggleMenu = {
init : function(sContainerClass, sHiddenClass) {
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(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]);
}
},
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];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
};
$(document).ready(function () {
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init
('menu','hidden');});
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", toggleMenu.init
('menu','hidden'), false)
});