Cannot read property 'left' of undefined

Question

Trying to figure out why chrome is throwing out error

"Uncaught TypeError: Cannot read property 'left' of undefined"

although #explorenav works great but #experiencenav doesn't seem to be working. am I missing something?

JS CODE:

$('.nav li#explorenav a').click(function(){
    $('body').animate({scrollLeft: $("#explore").offset().left-15}, 1000, function(){
        $(this).parent().addClass('active');
    });

    return false;
});

$('.nav li#experiencenav a').click(function(){
    $('body').animate({scrollLeft: $("#experience").offset().left-15}, 1200, function(){
        $(this).parent().addClass('active');
    });

    return false;
});

HTML CODE:

<div id="explore">
    <div class="Features">
        <div class="Feature1" title="The Active Park Assist feature can find parking spaces for you and help manoeuvre your car into them, as if by magic.">
            &nbsp;
        </div>
        <div class="Feature2" title="The luxurious and athletic Interior has sports front seats with red stitching and belts, making you wish the journey never ended">
            &nbsp;
        </div>
        <div class="Feature3" title="With Collision Prevention Assist and Attention Assist you can rest assured that you’ll get to wherever you’re going, safely.">
            &nbsp;
        </div>
    </div>
</div>

<div id="experience">
    <div class="Video">
        <iframe id="Youtube" width="650" height="366" src="http://www.youtube.com/embed/XS6S8qSMvBE?wmode=opaque" frameborder="0" wmode="transparent" allowfullscreen  ALLOWTRANSPARENCY="true"></iframe>

        <button class="prev">&nbsp;</button>
        <button class="next">&nbsp;</button>
        <div class="VideoControls">
            <ul class="Vid">
                <li id="01" class="Video1" onClick="_gaq.push(['_trackEvent', 'Pulse', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="02" class="Video2" onClick="_gaq.push(['_trackEvent', 'Performance', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="03" class="Video3" onClick="_gaq.push(['_trackEvent', 'Parking Assist', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="04" class="Video4" onClick="_gaq.push(['_trackEvent', 'Flow', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="05" class="Video5" onClick="_gaq.push(['_trackEvent', 'Spike', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
                <li id="06" class="Video6" onClick="_gaq.push(['_trackEvent', 'Product film', 'onClick', 'ENGLISH']);">
                    &nbsp;
                </li>
            </ul>
        </div>
    </div>
</div>

Solution

In your script on site you have this code:

$('.nav li#experiencenav a').click(function(){
     $('body').animate({scrollLeft: $("#experience .EmptyPage").offset().left-20}, 1200, function(){
      $(this).parent().addClass('active');
      $('li#homenav, li#discovernav, li#explorenav, li#downloadnav').removeClass('active');
     });
      return false;
    });

and it can't find element $("#experience .EmptyPage"). But you have div inside your #explore div that has this div:

<div class="EmptyPage">
 &nbsp;
</div>

Thats why your code is working for explore link, but not for other links.

Comments

[freshbm]

Can you post your html code? Maybe it's typo error in your html and it can't find $("#experience")

[Johannes Klauß]

We cannot help you guys when you're referencing code that we don't know about...

[AbdulWahhab]

why isnt this jquery? @JohannesKlauß

[David Fregoli]

your code seems fine but there might be some error in referencing html elements we don't know about

[Johannes Klauß]

@AbdulWahhab I'm talking about your HTML. Your referencing to an HTML id, but we have no idea how your DOM looks like. Therefore we are unable to help you if a part of your JS breaks on trying to access an ID.

[AbdulWahhab]

@freshbm nop i always copy ids and class names to avoid mistakes

[AbdulWahhab]

ok let me paste html code too

[freshbm]

it's just fragment of html, can you post whole html to see difference between 'explore' and 'experience'

[AbdulWahhab]

@freshbm you mean the whole website? this is prallax and everything is in one page.

[AbdulWahhab]

ok figured it out by myself thanks a lot guys

[AbdulWahhab]

yea i just saw that now, lol this is all work pressure :P my manager just gave 3 days to complete the whole site -_-. anw thanks a lot