Javascript sliding menus not working

Question

This javascript sliding menu is NOT working--the only error that debugger gives is that the first IF statement is a block command & should have curly braces, which I don't understand.

Does anyone see an obvious error? I'm not sure I'm using 'this' keyword correctly( as well as the variable slideList inside the function showSlide...please help & any feedback on my formatting (white-space) is appreciated as well!

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 == "slideMenus") menus.push(allElems[i]);
    }
    for (var i = 0; i < slideMenus.length; i++) {
        slideMenus[i].onclick = showSlide;
        slideMenus[i].ul.style.left = "0px"; //for each object in slideMenus Array, ref 1st ul       element within that object and set the value of the ul elements left style property to 0px
    }
    document.getElementById("head").onclick = closeSlide;
    document.getElementById("main").onclick = closeSlide;
}

function showSlide() {
    var slideList = this.id + ".ul[0]"; //stores object ref to the 1st ul element nested within the     current object. 

    if (currentSlide !== null) {
        closeSlide();
    } else {
        closeSlide();
        currentSlide = slideList;
        currentSlide.style.display = "block";
        timeID = setInterval("moveSlide()", 1);
    }
}

function closeSlide() {
    if (currentSlide !== null) {
        clearInterval(timeID);
        currentSlide.style.left = "0px";
        currentSlide.style.display = "none";
        currentSlide = null;
    }
}

function moveSlide() {

    if ((leftPos + 5) <= 220) {
        currentSlide.style.left = leftPos + "px"
    } else {
        clearInterval(timeID);
        leftPos = 0;
    }
}

Maybe give a few minutes of your time and read about it, here for example -> http://www.digital-web.com/articles/scope_in_javascript/ . It will help you a lot I think, for this problem, and the next ones. ( copied the link form here -> http://stackoverflow.com/questions/3127429/javascript-this-keyword ) — AntouanK, Jun 22 '13 at 17:10

score 0 · Answer 1 · answered Jun 22 '13 at 17:59

0

just taking a look at your code I noticed that you have this line

var slideList = this.id + ".ul[0]"; //stores object ref to the 1st ul element nested

It looks like you're trying to grab the first element of the ul array, but since you're putting that in quotes your browser is likely treating that like a string instead. Say this.id was equal to the string "ul-element", this variable will output "ul-element.ul[0]" as a string rather than getting the element at ul[0].

Just out of curiosity, have you looking into using jquery to make your site do this? It would save quite a bit of time and headache, although if you're doing this for a personal project I understand doing it this way :)

-Frank

answered Jun 22 '13 at 17:59

WTFranklin

2,454
4
21
28

yes this is for a short javascript class i'm taking - i'm a beginner! – Vynce82 Jun 22 '13 at 18:43
the instructions for that line of code are " create a variable named 'slideList' which stores an object reference to the first ul element nested within the current object (as referenced by the 'this' keyword). – Vynce82 Jun 22 '13 at 18:46
Hey Frank-i think can't figure this out :( – Vynce82 Jun 23 '13 at 14:00
Hey Vynce, I haven't been online for a few days, sorry I wasn't able to get back to you sooner. I'm not sure if you've already figured this out or had to turn in the project, but I found a couple things that might help out some. I'm not sure if this will help, but here's one way I think might work var element = $('id') return element.match('ul') ? element : element.up('ul'); This might go past the element you're trying to find, so you could also try the built in .previous function too. I think .up or .previous could get you in the right direction. – WTFranklin Jun 27 '13 at 17:14
this was the answer, frank-thanks for you help! var slideList = this.getElementsByTagName("ul")[0]; – Vynce82 Jun 29 '13 at 21:00

score 0 · Accepted Answer · answered Jun 29 '13 at 21:02

0

var slideList = this.getElementsByTagName("ul")[0];

answered Jun 29 '13 at 21:02

Vynce82

119
3
15

Javascript sliding menus not working

2 Answers2