CODEWITHSUNDEEP
jquery
user1794603
user1794603

Reputation:

jQuery scroll to next element, uncaught type error

Hi I want to create a slider that will scroll to the next element.

I am using an <ul> and numerous <li> tags, I have everything styled exactly how I want it to however JS is returning the following error in the console:

Uncaught TypeError: Cannot read property 'left' of undefined

The JS I have is below or view a jsFiddle:

var currentElement = $("li .listofyears:first");

// completely ignoring boundaries

$("#NavigateBackward").click(function() {
    currentElement = currentElement.prev();
    scrollTo(currentElement);
});

$("#NavigateForward").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);   
}

my html is as below:

<div id="years_arrows">
            <span class="nav_arrows" ><img src="http://iconify.it/wp-content/icons-large-alt/arrow-left.png" id="NavigateBackward" /></span>
         <span class="nav_arrows aaa" ><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" id="NavigateForward"/></span>
       <div id="slider">
        <div id="yearslistwrapper">
                <ul class="yearslist">
                    <li class="listofyears"><a href="#">2003</a></li>
                    <li class="listofyears"><a href="#">2004</a></li>
                    <li class="listofyears"><a href="#">2004</a></li>
                    <li class="listofyears"><a href="#">2005</a></li>
                    <li class="listofyears"><a href="#">2006</a></li>
                    <li class="listofyears"><a href="#">2007</a></li>
                    <li class="listofyears"><a href="#">2008</a></li>
                    <li class="listofyears"><a href="#">2009</a></li>
                    <li class="listofyears"><a href="#">2010</a></li>
                    <li class="listofyears"><a href="#">2011</a></li>
                    <li class="listofyears"><a href="#">2012</a></li>                       
                    <li class="listofyears"><a href="#">2013</a></li>
                </ul> <!-- END UL yearslist -->
            </div> <!--End slider-->

                </div> <!-- End years_arrows div -->

Upvotes: 0

Views: 139

Answers (3)

davidkonrad
davidkonrad

Reputation: 85528

This works :

var currentElement = $("li.listofyears").first();
// completely ignoring boundaries

$("#NavigateBackward").click(function() {
    currentElement = $(currentElement).prev();
    scrollTo(currentElement);
});

$("#NavigateForward").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $('.yearslist li').show();
    $('.yearslist li').not(element).hide();
}

forked fiddle http://jsfiddle.net/QYmKJ/

Upvotes: 1

Jigar Jain
Jigar Jain

Reputation: 1447

You are accessing your li's in wrong way

Line

var currentElement = $("li .listofyears:first");

Should be 

var currentElement = $("li.listofyears:first");

your code is looking for elements with class listofyears inside <li> tag & not <li> tag with class listofyears.

Check fiddle here http://jsfiddle.net/qafjM/

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

Your selector is incorrect, and therefore not matching any elements. If the jQuery object you call previous() on is empty (contains no matched elements) it returns undefined.

Your selector:

$("li .listofyears:first");

That's looking for the first element with the class listofyears inside a <li> element. However, you want the first <li> element with that class, so remove the space:

$("li.listofyears:first");

There are other problems that will need to be solved after that. For example, if you click the previous button when looking at the first element, there won't be a previous element to find, and you'll get the same problem. You'll need to code around that (likely do nothing if there isn't a previous element).

Upvotes: 0

Related Questions