jQuery $el.position(...) is undefined

Question

I have a nav bar which uses another <li> element in the list to create an underline effect that animates underneath the hovered element and animates back to the active element on mouse out.

Fiddle: http://jsfiddle.net/jP59W/

It seems to work great in Chrome and Firefox but in IE (8) I get an invalid argument error but I can't see what could be causing it.

Even though it works in Firefox, it still throws this error aswell:

$el.position(...) is undefined which is this line:

leftPos = $el.position().left;

HTML

<div id="navbar">
    <ul class="clearfix">
        <li class="active">
            <a id="myoeHome" href="#">Welcome</a>
        </li>
        <li>
            <a id="myAccount" href="#">Your Profile</a>
        </li>
        <li>
            <a id="referAFriend" href="#">Refer A Friend </a>
        </li>
        <li>
        <a id="referralReport" href="#">View Rewards </a>
        </li>
        <li>
            <a id="shoutandShare" href="#">Write a Review </a>
        </li>
    </ul>
</div>

CSS

#navbar {
    position: relative;
    background-color: #ffffff;
    width: 990px;
    margin: -21px 0 0 0;

    padding: 20px 0 0 0;
    height: 35px;

    zoom: 1;
}

#navbar ul {
    width: 945px;
    list-style: none;
    padding: 0 0 0 40px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top:-13px;

    *margin: -25px auto 0 auto;
}

#navbar ul li {
    display: inline-block;
    text-align: left;

    /* padding: 0 1px 0 1px; */

    /* margin: 0 60px 0 5px; */

    margin: 0 0 0 0;
    padding: 10px 0 24px 0;
    width: 185px;

    *display: inline;
    *zoom: 1;
     *margin: 25px -11px 0 0;
}

#navbar ul li a {
    font-family: Helvetica, Arial;
    font-size: 18px;
    color: #002e55;
    text-align: center;
    padding-bottom: 24px;

    *display: inline;
    *float: left;

 }

#magic-line {
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 3px;
    background: url("http://www.4playtheband.co.uk/assets/nav-magic-line.png") no-repeat center bottom;
    margin: 0 !important;
    padding: 0 !important;

    *bottom: 7px;
    *z-index: 999;
    *height: auto;
 }

#navbar ul li a:hover {
     height: 4px;
     /*border-bottom: 3px solid #002e55;*/

     zoom: 1;

    *margin-top: -39px;

}

#navbar ul li a.active {
    background: url("../images/psd/active-nav-bg.png") no-repeat 49% 2px;
    height: 4px;
    border-bottom: 3px solid #002e55;

    zoom: 1;
}

jQuery

// nav
var $el, leftPos, newWidth,
$mainNav = $("#navbar ul");

$mainNav.prepend("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

function navBar() {
    // console.log('navBar start');
    function checkActive() {
        // console.log('check active');
        // Hide magic line if nav bar has no active element
        if($('#navbar ul').children('.active').length < 1) {
            $magicLine.hide();
            //console.log($('#navbar ul').children('.active').length < 1);
            //console.log($('#magic-line'));
            //console.log('hide');
        }
        else {
            $magicLine.stop().animate({
                left: $magicLine.css('left', $(".active a").css('left')),
                width: $magicLine.width($(".active a").width())
            });
        }
    }
    checkActive();
    $magicLine
        .width($(".active a").width())
        .css("left", $(".active a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $(".active a").width());

    // $("#navbar ul li a").hover(function() {
    // apply hover function to li instead and just just el to it's child
    $("#navbar ul li").hover(function() {
        // $el = $(this);
        $el = $(this).children('a');
        leftPos = $el.position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        }, 600);
    }, function() {
        if($('#navbar ul').children('.active').length < 1) {
            $magicLine.stop();
            checkActive();
        } else {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                //width: $magicLine.data("origWidth")
                width: $magicLine.width($(".active a").width())
            }, 600);
        }
    });
}

$(document).ready(function() {
    $magicLine.width($(".active a").width());
    navBar();
});

Answer 1

I have seen two cases when such a problem happens:

1. the item you are checking is currently hidden (was never shown) or is not in the document DOM and thus has no real coordinates (you can create DOM fragments)

2. the jQuery object ($el list in your case) is empty; you can know by testing $el.length == 0

Since the parent() call worked for you, your problem was most certainly case (1).