jQuery Syntax error, unrecognized expression

Question

I have a script that updates a fixed menu with the user's position as they scroll down the page. Working on the front-end was error free, however now that I have started working on the WordPress integration I am getting a bizarre error message which I am having trouble understanding.

One loading the page it is fine, however as soon as I scroll down the error appears.

Here is the jsfiddle. http://jsfiddle.net/2k4Eq/ It seems to be related to the full URL, as it works with just #whatWeDo.

Syntax error, unrecognized expression: http://localhost:8888/sitename/#whatWeDo

From jQuery

 Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
 };

Thank you!

// Update menu position on scroll
    $(function() {
        function updateMenu() {

            var lastId,
                mainMenu = $("#main-menu ul"),
                mainMenuInnerHeight = mainMenu.outerHeight(),
                mainMenuItems = $("#main-menu.navigation ul").find(".section-item a"),
                sliderButtons = $("#call-to-actions "),
                sliderLinks = sliderButtons.find("a.button.white"),         

                // Anchors relating to links                    
                scrollItems = mainMenuItems.map(function(){
                  var item = $(this).attr("href");
                  if (item.length) { return item; }
                });
                console.log(scrollItems);


            mainMenuItems.bind("click",scrollDown);
            sliderLinks.bind("click",scrollDown);

            function scrollDown(e){
                e.preventDefault(); 

                var href = $(this).attr("href"),
                    offsetTop = href === "#" ? 0 : $(href).offset().top;

                $("html, body").stop().animate({ 
                    scrollTop: offsetTop
                }, 600);

                $("#main-mobile-menu").hide();

            }   

            $(window).scroll(function(){
                var fromTop = $(this).scrollTop()+mainMenuInnerHeight;

                var cur = scrollItems.map(function(){
                    if ($(this).offset().top < fromTop)
                        return this;
                }); 


                cur = cur[cur.length-1];

                var id = cur && cur.length ? cur[0].id : "";

                if (lastId !== id) {
                    lastId = id;            

                    mainMenuItems
                        .parent().removeClass("active")
                        .end().filter("[href=#"+id+"]").parent().addClass("active");
                }                   
            }); 

        }

        updateMenu();   
        $(window).resize(function(){
            updateMenu();
        });
    });

Rich · Accepted Answer · 2014-03-25 00:23:47Z

The issue was caused by trying to use full URL other than just the hash and ID. By splitting the results and only using the anchor ensured the script still ran, but also meant navigating to the correction homepage section from another page still worked. Thanks to those who helped as it got me thinking and eventually lead me down the right path.

$(function() {
function updateMenu() {

    var lastId,
        mainMenu = $("#main-menu ul"),
        mainMenuInnerHeight = mainMenu.outerHeight(),
        mainMenuItems = $(".home .navigation ul").find("li.section-item a"),        

        scrollItems = $(".navigation li.section-item a").map(function() {
            itemsSplit = $(this).attr("href").split("#");
            itemHref = $("#" + itemsSplit[1]);

            return itemHref;
        });     

    mainMenuItems.bind("click",scrollDown);

    function scrollDown(e){
        e.preventDefault(); 

        var href = $(this).attr("href").split("#"),
            hrefSplit = href[1],

            offsetTop = $("#" + hrefSplit).offset().top;        

        $("html, body").stop().animate({ 
            scrollTop: offsetTop
        }, 600);
    }   

    $(window).scroll(function(){

        var fromTop = $(this).scrollTop()+mainMenuInnerHeight;

        var cur = scrollItems.map(function(){               
            if ($(this).offset().top < fromTop) 
                return this;
        });

        cur = cur[cur.length-1];

        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
            lastId = id;

            mainMenuItems
                .parent().removeClass("active")
                .end().filter("[href$="+id+"]").parent().addClass("active");
        }                   
    });
}

updateMenu();   
$(window).resize(function(){
    updateMenu();
});
});

Arun P Johny · Accepted Answer · 2014-03-24 10:59:16Z

0

From what I can see the problem is in the fllowing .filter(), where id is the value http://localhost:8888/sitename/#whatWeDo. The cause of the error is the special characters within the attribute value

mainMenuItems.parent().removeClass("active").end().filter("[href=#" + id + "]").parent().addClass("active");

' so wrap the attribute value like a string literal to escape it.

mainMenuItems.parent().removeClass("active").end().filter('[href="#' + id + '"]').parent().addClass("active");

Since @Curt deleted the answer I'm just coping that too for the OP to see(will delete this if Curt undelete's it)

The above said issue can also come in the following line

$(href).offset().top

href is a string value. Change this to:

$(this).offset().top

edited Mar 24, 2014 at 10:59

answered Mar 24, 2014 at 10:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

7 Comments

Arun P Johny Over a year ago

@Curt I think your answer also could be the problem,

Rich Over a year ago

Thank you for your reply! Unfortunately that didn't seem to resolve the issue. In the console the error appears in the jQuery file. Now that I have unminified it I can see more of the error. I've updated my q.

Arun P Johny Over a year ago

@Rich see the update... it is a copy of another answer which was deleted by the author

Rich Over a year ago

Thanks Arun - Tried both suggestions but still receive that error.

Arun P Johny Over a year ago

@Rich then you need to locate the code that is triggering the error... can you remove some part of the code to see whether the error is still coming

|

Zaheer Ahmed · Accepted Answer · 2014-03-24 11:53:32Z

0

jQuery.map()

Description: Translate all items in an array or object to new array of items.

var cur = scrollItems.map(function(){
    if ($(this).offset().top < fromTop)
        return this;
});

change it to:

var cur = $.map(scrollItems, function () {
    if ($(this).offset() != null) {
        if ($(this).offset().top < fromTop) return this;
    }
});

edited Mar 24, 2014 at 11:53

answered Mar 24, 2014 at 11:47

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

2 Comments

Rich Over a year ago

Thank you Zaheer. Currently logging scrollItems gives me an array of each of the menu items. Updating your script stops the error, however it gives me an empty array when I log cur. Thus the menu no longer updates with the active class

Zaheer Ahmed Over a year ago

So it means ur scrollItems collection contains item which has offset null

Collectives™ on Stack Overflow

jQuery Syntax error, unrecognized expression

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related