Question

This was my first go at writing some jQuery code completely from scratch, so aside from the fact that I went wrong somewhere, I’m also not sure if this is the best way to do what I’m trying to do. Here goes!

I’m using jQuery Swipe.js to control a slider on a mobile site. The slider contains 3 divs. I also have some left/right arrow buttons that a user can click that calls the Swipe function.

I want to hide/show some divs when the swipe action is called, depending on what is currently in the viewport. I’ve tried to do this using a simple variable, i, which is added/subtracted from depending on the current page the user is viewing.

The original script to call the swipe.js function was simply var slider = new Swipe(document.getElementById('slider'));

The script code that I wrote is this: //EDIT: Updated after reviewing the Swipe documentation

var slider = new Swipe(document.getElementById('slider'), {
      callback: function() {

        var pageNumber = slider.getPos();
        if (pageNumber = 0) {
            $(".leftArrow").css("display", "none");
            $("footer#about").css("display", "none");       
            $("footer#adFooter").css("display", "none");
        }

        else if (pageNumber = 1) {
            $(".leftArrow").css("display", "inline");
            $("footer#adFooter").css("display", "inline");          
            $("footer#about").css("display", "none");

        }

        else if (pageNumber = 2) {
            $("footer#adFooter").css("display", "none");        
            $("footer#about").css("display", "inline");
        }     
    }
});

The HTML code is this:

<a href='#' onclick='slider.prev(); return false;'><img class="leftArrow" src="img/arrow_right.png" alt="Left Nav Arrow"/></a>
<a href='#' style="" onclick='slider.next(); return false;'><img class="rightArrow" src="img/arrow_right.png" alt="Right Nav Arrow"/></a>

I can’t exactly see where I’ve gone wrong here, but evidently the whole thing isn’t working. Thoughts?

Answer 1

You don’t say what problems you are having, but one problem is clear. i can be both -1 and 3. Change your two if statements to say i>0 and i<2 and don’t include the = as you do now.