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();
        });
    });

Answer 1

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();
});
});

Answer 2

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

Answer 3

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;
    }
});