Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot read property 'left' of undefined

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>
like image 763
AbdulWahhab Avatar asked Mar 21 '13 10:03

AbdulWahhab


People also ask

What does Cannot read property of undefined mean?

The “cannot read property of undefined” error occurs when you attempt to access a property or method of a variable that is undefined . You can fix it by adding an undefined check on the variable before accessing it.

Can not read property find of undefined?

The "Cannot read property 'find' of undefined" error occurs when the find() method is called on an undefined value. To solve the error, make sure to only call the find method on arrays.

Can not read property split of undefined?

The "Cannot read property 'split' of undefined" error occurs when trying to call the split() method on a variable that stores an undefined value. To solve the error, make sure to only call the split method on strings.

Can not read property replace of undefined?

The "Cannot read property 'replace' of undefined" error occurs when calling the replace() method on an undefined value. To solve the error, provide a fallback for the value if it's equal to undefined and conditionally check that it stores the correct data type before calling the method.


1 Answers

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.

like image 99
freshbm Avatar answered Oct 10 '22 02:10

freshbm