CODEWITHSUNDEEP
javascriptjqueryhtml
Nick D
Nick D

Reputation: 339

jQuery Uncaught TypeError with offset().left

My code, visually anyway, works fine, but I keep getting "Uncaught TypeError: Cannot Read property 'left' of undefined" in my console. I have no clue what might be causing it.

Specifically, the error is showing up on the following: line: 

var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**

The whole function for context:

 $('.hoverBar li').hover(function(){

        var left = $(this).offset().left - ($(this).parents('.hoverBar').offset().left + 20);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-ms-transform" : sictranslate,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "transform": sictranslate
        });

    },

    function(){

        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**
        var width = $(this).siblings('li.active').width() + "px";

        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-ms-transform" : sictranslate,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "transform": sictranslate

        });

    }).click(function(){

        $(this).siblings('li').removeClass('active');

        $(this).addClass('active');

        return false;

    });

And some relevant HTML:

<nav class="head_nav">
<div class="hoverBar">
<ul id="navbar">
            <li class="active"><a href="">About</a>
    <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Board Members</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Task Forces</a></li>
            </ul>
    </li>
<li><a href="">Events</a>
    <ul>
        <li><a href="#">Description</a></li>
        <li><a href="#">Registration with Outlook ICS</a></li>
        <li><a href="#">Online Payment</a></li>
        <li><a href="#">Email auto-reminders</a></li>
        <li><a href="#">Multiple registrants allowed</a></li>
            </ul>
    </li>
</ul>
<div class="floatr"></div>
</div>
</nav>

Upvotes: 1

Views: 7548

Answers (2)

mswieboda
mswieboda

Reputation: 1026

I copied your code to a jsFiddle: http://jsfiddle.net/mswieboda/F4fnf/ and on line 16 you needed to add .parents('.hoverBar').find('li.active') like this:

var left = $(this).parents('.hoverBar').find('li.active').offset().left - 
    ($(this).parents('.hoverBar').offset().left + 20);

This is because the hovered element $(this): .hoverBar > ul > li > ul > li > a was not a sibling of .hoverBar > ul > li.active you were trying to navigate to in the DOM.

This fixed the JS error you were receiving with trying .offset() on undefined since that jQuery element didn't exist.

Upvotes: 1

metadings
metadings

Reputation: 3848

This is when a selector has no elements, offset returns undefined. Just wrap your code into

var $siblings = $(this).siblings('li.active');
if ($siblings.length) {
    var left = $siblings.offset().left 
             - ($(this).parents('.hoverBar').offset().left + 20);
    var width = $siblings.width() + "px";

    //...
}

This way your selector is cached into the variable $siblings and doesn't run twice or more.

Upvotes: 1

Related Questions