Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    East Tennessee
    Posts
    56
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question I need help w/ a horizontal sliding menu using JavaScript

    I don't know where I messed up my code, someone please help me learn:
    js:
    Code:
    window.onload = makeMenus;
    var currentSlide = null;
    var timeID = null;
    var leftPos = 0;
    
    
    function makeMenus() {
    	var slideMenus = new Array();
    	var allElems = document.getElementsByTagName("*");
    
    	for (var i = 0; i < allElems.length; i++) {
    		if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]);
    }
    
    	for (var i = 0; i < slideMenus.length; i++)  {
    		slideMenus[i].onclick = showSlide;
    		slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
    
            }
            document.getElementsById("head").onclick = closeSlide;
            document.getElementsById("main").onclick = closeSlide;
    
    }
    
    
    function showSlide() {
    	slideList = this.getElementsByTagName("ul")[0];
    	if (currentSlide && currentSlide.id == slideList.id) {
    	closeSlide();
    	} else {
    		closeSlide();
    		currentSlide = slideList;
    		currentSlide.style.display = "block";
    		timeID = setInterval("moveSlide()", 1);
    	}
    }
    
    function closeSlide() {
        if (currentSlide) {
            clearInterval(timeID);
            currentSlide.style.left = "0px";
            currentSlide.style.display = "none";
            currentSlide = null;
        }
    }
    
    function moveSlide() {
        leftPos = leftPos + 5;
    
        if(leftPos <= 220) {
            currentSlide.style.left = leftPos + "px";
        } else {
            clearInterval(timeID);
            leftPos = 0;
        }
    }

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    East Tennessee
    Posts
    56
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Just because no-one would reply & help doesn't mean I won't learn somehow, this is for the ones who need the help w/ the sliding menu.
    Code:
    window.onload = makeMenus;
    var currentSlide = null;
    var timeID = null;
    var leftPos = 0;
    
    
    function makeMenus() {
    	var slideMenus = new Array();
    	var allElems = document.getElementsByTagName("*");
    
    	for (var i = 0; i < allElems.length; i++) {
    		if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]);
        }
    
    	for (var i = 0; i < slideMenus.length; i++)  {
    		slideMenus[i].onclick = showSlide;
    		slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
    
        }
        document.getElementsById("head").onclick = closeSlide;
        document.getElementsById("main").onclick = closeSlide;
    
    }
    
    
    function showSlide() {
    	slideList = this.getElementsByTagName("ul")[0];
    	if (currentSlide && currentSlide.id == slideList.id) {
    	closeSlide();
    	}
        else {
    		closeSlide();
    		currentSlide = slideList;
    		currentSlide.style.display = "block";
    		timeID = setInterval("moveSlide()", 1);
    	}
    }
    
    function closeSlide() {
        if (currentSlide) {
            clearInterval(timeID);
            currentSlide.style.left = "0px";
            currentSlide.style.display = "none";
            currentSlide = null;
        }
    
    }
    
    function moveSlide() {
        leftPos += 5; //this was the part I goofed on and finally got help
    
        if(parseInt(currentSlide.style.left)<= 220) {
            currentSlide.style.left = leftPos + "px";
        }
        else {
            clearInterval(timeID);
            leftPos = 0;
        }
    }
    Last edited by jdpaul; 02-22-2012 at 11:05 PM. Reason: to add color to the part I goofed on


  •  

    Posting Permissions

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