#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    JavaScript errors in IE - expected ';' & 'position().left' is null


    I got one errors in IE I think it might be number 8 version.This function is working perfectly on all browsers why does IE marks an error,I simply donīt get it, all I can see is that there is no way out until it's fixed Please help me, there must be a minor glitch causing the error that is clearly invisible...
    Can someone please help me,I can't finish with the website until this is done, is a suprise for my family

    I'm getting confused with the script.

    Error

    Message: 'position().left' is null or not an object Line: 44 Char: 5 Code: 0 which is this Line 44 - which is located within the script:

    $magicLineTwo

    this is the entire code of the script there's nothing more in this script, there are two sets for this marked as " example 1 and example 2 "and the second one is making the problem:
    what could possibly go wrong for the IE to mark the "example two" as an "error" and have no problems with example one? The script (is a draggable little icon used for the menu bar, the effect is every time the mouse is moved on each option in the menu there's a little dot that follows.
    I want to keep the same effect of the menu a line hovering under each option.


    Javascript Code:
    $(function(){
     
        var $el, leftPos, newWidth,
            $mainNav = $("#example-one"),
            $mainNav2 = $("#example-two");
     
        /*
            EXAMPLE ONE
        */
        $mainNav.append("<li id='magic-line'></li>");
     
        var $magicLine = $("#magic-line");
     
        $magicLine
            .width($(".current_page_item").width())
            .css("left", $(".current_page_item a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
     
        $("#example-one li").find("a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
     
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });    
        });
     
     
        /*
            EXAMPLE TWO
        */
        $mainNav2.append("<li id='magic-line-two'></li>");
     
        var $magicLineTwo = $("#magic-line-two");
     
        $magicLineTwo
            .width($(".current_page_item_two").width())
            .height($mainNav2.height())
            .css("left", $(".current_page_item_two a").position().left)
            .data("origLeft", $(".current_page_item_two a").position().left)
            .data("origWidth", $magicLineTwo.width())
            .data("origColor", $(".current_page_item_two a").attr("rel"));
     
        $("#example-two li").find("a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLineTwo.stop().animate({
                left: leftPos,
                width: newWidth,
                backgroundColor: $el.attr("rel")
            });
        }, function() {
            $magicLineTwo.stop().animate({
                left: $magicLineTwo.data("origLeft"),
                width: $magicLineTwo.data("origWidth"),
                backgroundColor: $magicLineTwo.data("origColor")
            });    
        });
    });
    Last edited by Winters; September 30th, 2013 at 03:33 AM. Reason: Added highlighting.

IMN logo majestic logo threadwatch logo seochat tools logo