I am learning WordPress and have a query with some custom jQuery javascript I use for a drop down menu.

The javascript is used to put a slight delay on the drop down hiding after mouseoff of either the parent link or the drop down etc.

The javascript works great in normal html but not in the basic WordPress theme I am building. I tried following the no-conflict $j advice but not sure if I did that right.

One issue is that the drop down menu stays persistent on mouseover of the parent link – it does not hide after the 2 seconds specified in the javascript.

Another issue, which may be related, appears to be that the “scroll compensate” code is not working because the “sub menu” drop items show on hover of the parent link when smaller than 650px if the drop down menu was not showing (eg on page refresh without interacting with menu).

I think it may be related to the line “var menu_timer;” at the top of the custom.js file but it could be that the code is not working above or below the line:

jQuery(document).ready(function($)

The custom.js javascript file is enqueued in functions.php and showing in the footer as expected. All other javascripts in the custom.js file are working, just not the drop down menu code which is shown below in the order (eg above and below the doc ready line) that the programmer gave it to me

// menu
var menu_timer;

//jquery doc ready
jQuery(document).ready(function($) {

    //functions
    submenuPersistent();
    //recalculate when resizing 
    $(window).resize(function() { 
        submenuPersistent();
    });

});

// no conflict
var $j = jQuery.noConflict();

// menu
 function submenuPersistent() {
    //depends on screen size
    if($j(window).width()+scrollCompensate() >= 651) {
        $j('#nav > ul > li .drop').hide();
        //persistent submenu
        $j('#nav > ul > li').off('mouseenter');
        $j('#nav > ul > li').off('mouseleave');
        $j('#nav > ul > li').mouseenter(function() {
            //hide other submenus
            if($j(this).find('.drop').length != 0){//has submenu
                clearTimeout(menu_timer);//clear timeout
                $j('#nav > ul > li').not(this).find('.drop').hide(200);//hide others
                $j(this).find('.drop').show(200);//show this
            }

        });
        $('#nav > ul > li').mouseleave(function() { 
            if($j(this).find('.drop').length != 0){//has submenu
                element= $(this);
                menu_timer= setTimeout(function() {
                    element.find('.drop').hide(200);
                },1500);
            }
        });
    }
    else {
        //clear timeout
        clearTimeout(menu_timer);
        $j('#nav > ul > li').off('mouseenter');
        $j('#nav > ul > li').off('mouseleave');
        $j('#nav > ul > li .drop').show();
    }
 }

 //compensate for Chrome/Safari bug (scroll bar width issue)
 function scrollCompensate() {
    //inner
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    //outer
    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);
    //add
    document.body.appendChild(outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
    //remove
    document.body.removeChild(outer);
    return (w1 - w2);
 }

The site is still very much in development so I cannot show a live page at the moment unfortunately.

I would greatly appreciate any help from an experienced javascript / WordPress user.

Any ideas?

Read more here: custom drop down menu javascript issues in wordpress


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: