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.">
</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">
</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.">
</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"> </button>
<button class="next"> </button>
<div class="VideoControls">
<ul class="Vid">
<li id="01" class="Video1" onClick="_gaq.push(['_trackEvent', 'Pulse', 'onClick', 'ENGLISH']);">
</li>
<li id="02" class="Video2" onClick="_gaq.push(['_trackEvent', 'Performance', 'onClick', 'ENGLISH']);">
</li>
<li id="03" class="Video3" onClick="_gaq.push(['_trackEvent', 'Parking Assist', 'onClick', 'ENGLISH']);">
</li>
<li id="04" class="Video4" onClick="_gaq.push(['_trackEvent', 'Flow', 'onClick', 'ENGLISH']);">
</li>
<li id="05" class="Video5" onClick="_gaq.push(['_trackEvent', 'Spike', 'onClick', 'ENGLISH']);">
</li>
<li id="06" class="Video6" onClick="_gaq.push(['_trackEvent', 'Product film', 'onClick', 'ENGLISH']);">
</li>
</ul>
</div>
</div>
</div>
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.
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.
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.
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.
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">
</div>
Thats why your code is working for explore link, but not for other links.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With