Question

Working on a wordpress site and adding a sliding marker when hovering over a nav menu bar.

The website – http://avuedesigns.com/iaq

In the chrome Developer tools, it is showing this error:

Uncaught TypeError: Cannot read property 'left' of undefined script.js:242
(anonymous function) script.js:242
v.event.special.(anonymous function).handle jquery.js:2
v.event.dispatch jquery.js:2
o.handle.u

The only page the menu works on is the cart page, and my account’s. I am assuming it might have to be a conflict with library’s, because of a similar situation I had a few days ago. But I do not know the proper way of solving this issue and wish to find guidance so I do not waste anyone’s time with simple questions.

I do know that the marker is off on the working page, had no time to adjust it, wanted to get it working first =P.

Thanks for your time and wisdom.

Answer 1

It seems like you’re using the wrong class to get the position value for #slidingArrow in script.js @ Line 231:

activeItem = menuList.find('.current_page_item, .current_page_ancestor, .current_page_parent');

I think you would be better suited to switch out .current_page_item for .current-menu-item. The .current_page_item class did not appear to be populating on all the pages so the #slidingArrow div element was unable to get any positioning information.

In script.js here are the changes I made to menuSlidingArrow():

function menuSlidingArrow() {

    if(!($j('html').hasClass('oldie'))) {

        var mainmenu    = $j('.menu-content'),
            arrow       = $j('#slidingArrow'),
            menuList    = mainmenu.find('ul.menu'),
            activeItem  = menuList.find('.current-menu-item, .current_page_ancestor, .current_page_parent'); //remove .current_page_item

        $j(window).load(function() {
            arrow.css({ 'left':(activeItem.position().left + ((activeItem.outerWidth() - 48)/2) ) -6});
            arrow.fadeIn('slow');
        });

        menuList.children().hover(function(){
            arrow.animate({ 'left':($j(this).position().left + (($j(this).outerWidth() - 48)/2) ) -6},
                { queue: false, easing: 'easeOutQuad', duration: 250 });
        },function(){
            arrow.animate({ 'left':(activeItem.position().left + ((activeItem.outerWidth() - 48)/2) ) -6},
                { queue: false, easing: 'easeOutQuad', duration: 250 });
        });
    }

}

I also needed the following CSS to get it to work:

#menu-main-menu {
    margin-left:68px;
}
#menu-item-8197 a { /* hide home navigation item */
    color:#fff;
}
#slidingArrow {
    margin-left:77px;
}

Lastly, be sure you add the ‘Home’ page to the top navigation. You’re going to want to add it as the first item on the navigation.

All in all I changed/added:

• .current_page_item changed to .current-menu-item
• Added #slidingArrow { margin-left: 77px; }, menu-item-8197 a { color:#fff; }, #menu-main-menu { margin-left:68px; }
• Modified calculations to center #slidingArrow under the navigation item
• Added home to the navigation
• Hide home navigation element on navigation

Let me know how this works for you and if you run into any errors I’d be happy to get my answer corrected for you.