www.webdeveloper.com
Results 1 to 3 of 3

Thread: Sliding Navbar/Menu Not Working in IE

  1. #1
    Join Date
    Dec 2010
    Posts
    2

    Sliding Navbar/Menu Not Working in IE

    I am new to javascript and am eager to learn. I know I could probably just use jQuery to make this cross-browser but I would like to learn the ins and outs of javascript before abstracting them away.

    Our website currently has a navbar that is coded in HTML on every single webpage so changing it means changing every single webpage. So I want to make this more dynamic (and animated) by using javascript.

    The problem is that IE is not cooperating. Specifically, IE loads everything alright but does not slide. It just loads the whole submenu instantaneously after a user clicks. Firefox works perfectly. At the top of my test page is a doc type statement inherited from the real index

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Oddly enough, if I put anything in front of that HTML 4.01 part, it works in IE... If I change it to XHTML or QHTML it will start working. The javascript is below. Basically, it loops through the links array and builds the navbar by creating an unordered list and assigning events. After a user clicks a menu, the page it directs to calls the makeMenu function and the fireMyEvent function to "click" that menu after it is created on the new page. This way I can keep certain submenus open across pages.

    Code:
    var myDiv;
    var topMenuCount=0;
    var bottomMenuCount=0;
    var links = new Array();
    
    //Example of links, 0 is a parent menu and 1 is a child
    links[0]="0|MENUTITLE|link1.htm";
    links[1]="1|SUBMENUTITLE|link2.htm";
    links[2]="1|SUBMENUTITLE|link3.htm
    
    links[3]="0|MENUTITLE|link4.htm";
    links[4]="1|SUBMENUTITLE|link5.htm";
    links[5]="1|SUBMENUTITLE|link6.htm
    links[6]="1|SUBMENUTITLE|link7.htm
    
    function makeMenu(){
    
    	myDiv = document.getElementById("myDiv");
    
    	for (var i=0; i<links.length; i++){
    		var elementInfo=links[i].split("|");
    		if(elementInfo[0]=="0"){
    			var startList = document.createElement("UL");
    
    			startList.setAttribute("id", "top"+topMenuCount);
    			startList.setAttribute("class", "navbar");
    			startList.innerHTML = "<a href="+elementInfo[2]+">"+elementInfo[1]+"</a>";
    			AddEvent(startList, "mouseup", function(evt){topClicked(evt);}, false);
    			myDiv.appendChild(startList);
    			topMenuCount++;
    		}
    		else if(elementInfo[0]=="1"){
    			var theList = document.createElement("LI");
    			
    			theList.setAttribute("id", "low"+bottomMenuCount);
    			theList.setAttribute("class", "sub_navbar");
    			
    			theList.style.display = "none";
    			theList.innerHTML = elementInfo[2];
    			startList.appendChild(theList);
    			bottomMenuCount++;
    		}
    	}
    }
    
    //Cross-browser Function
    function fireMyEvent(id, set, type){
    	var fireOnThis = document.getElementById(id);
    	var evt;
    	
    	if(document.createEventObject){
    		//dispatch for IE
    		fireOnThis.fireEvent("on"+type);
    	}
    	else{
    		//Firefox and others
    		evt=document.createEvent(set);
    		evt.initEvent(type, true, true);
    		fireOnThis.dispatchEvent(evt);
    	}
    }
    
    //Cross-browser Function
    function AddEvent(obj, type, listener, useCap){
    	if(obj.addEventListener){
    	//Firefox and others
    		obj.addEventListener(type, listener, useCap);
    	}
    	else if(obj.attachEvent){
    	//IE
    		obj.attachEvent("on"+type, listener);
    	}
    }
    
    //Cross-browser Function
    function getTarget(evt){
    	var targetElement = null;
    	
    	//Firefox and others
    	if (typeof(evt.target) != "undefined"){
    		targetElement = evt.target;
    	}
    	//IE
    	else{
    		targetElement = evt.srcElement;
    	}
    	
    	return targetElement;
    }
    
    function topClicked(evt){
    	var obj=getTarget(evt);
    	
    	if(obj.tagName=="UL"){
    		var objLis = obj.getElementsByTagName("LI");
    
    		//Collapse everything before expanding the ones you want
    		//var lis = myDiv.getElementsByTagName("LI");
    		//for(var i=0; i<lis.length; i++){
    		//	lis[i].style.display = "none";
    		//	lis[i].style.height="1px";
    		//}
    		
    		for (var i=0; i<objLis.length; i++){
    			objLis[i].style.height = "1px";
    			objLis[i].style.display = "block";
    			slidedown(objLis[i].getAttribute("id"))
    		}
    	}
    }
    
    //*****************Animated Sliding Menu*****************//
    
    var timerlen = 10;
    var slideAniLen = 600;
    
    var timerID = new Array();
    var startTime = new Array();
    var obj = new Array();
    var endHeight = new Array();
    var moving = new Array();
    var dir = new Array();
    
    function slidedown(objname){
            if(moving[objname]){
                    return;
    	 }
    
    	 obj[objname] = objname;
            moving[objname] = true;
            dir[objname] = "down";
            startslide(obj[objname]);
    }
    
    function startslide(objname){
            var myObj = document.getElementById(obj[objname]);
            endHeight[objname] = 10;
            startTime[objname] = (new Date()).getTime();
    
            if(dir[objname] == "down"){
                    myObj.style.height = "1px";
            }
    
            timerID[objname] = window.setInterval(function(){slidetick(obj[objname]);}, timerlen);
    }
    
    function slidetick(objname){
    	 var myObj = document.getElementById(obj[objname]);
            var elapsed = (new Date()).getTime() - startTime[objname];
    	 var d=0;
    		
            if (elapsed > slideAniLen){
                    endSlide(obj[objname])
    	 }
            else {
    		  var myNum = elapsed / slideAniLen * endHeight[objname];
                    d=Math.round(myNum);
                    myObj.style.height = d + "px";
            }
    
            return true;
    }
    
    function endSlide(objname){
    	 var myObj = document.getElementById(obj[objname]);
            clearInterval(timerID[objname]);
            myObj.style.height = endHeight[objname] + "px";
    
            delete(moving[objname]);
            delete(timerID[objname]);
            delete(startTime[objname]);
            delete(endHeight[objname]);
            delete(obj[objname]);
            delete(dir[objname]);
    		
            return true;
    }

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    several notes:
    1.
    Code:
    startList.setAttribute("class", "navbar");
    IE has another syntax to create classes. You should better use the crossbrowser DOM 0:
    Code:
    startList.className= "navbar";
    2.
    Code:
    AddEvent(startList, "mouseup", function(evt){topClicked(evt);}, false);
    You have used a much too intricate way to attach the events to the objects. DOM 0 is, again, your friend:
    Code:
    startList.onmouseup=topClicked;

  3. #3
    Join Date
    Dec 2010
    Posts
    2
    Thank you for the notes, Kor. I wanted to post a follow up as I have since solved the issue. The sliding animation is simply a loop that increments the pixel height of the menu elements. I noticed that IE was bumping the elements to a predetermined height and not incrementing.

    After several hours of googling, I was able to determine that IE does not like it when a font size is larger than the tag size. When I set the font size to 1px initially and incremented the font size along with the tag size, everything worked in all browsers. Alternatively, you can also set the font to 1px initially and then once the looping starts to happen you can change it to "x-small" or something like that. Hope this helps someone!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles