Boman.Biz

Today’s code nugget falls into the JavaScript-hackery category:

Recently I had a problem where the fly-out menus in the Global Navigation bar in SharePoint would fly-out and block user’s access to links like “View All Site Content” because they had moved their mouse over the Global nav to get there.

Anyhow the request was to make the Global navigation fly-outs less sensitive.  So the code below inserted on a master page ensures that the fly-out menus only expand after the user has actually hovered their mouse for one second over the actual menu item.  A much less crazy behaviour if you have alot of menus.

<script type="text/javascript" language="javascript">
    var intNumberOfMenusToFix = 9;
    var objTimer = null;
    var activeMenu = null;
    
    var tdTopMenuItem;
    var intItemCount = 0;
    
    tdTopMenuItem = document.all.item("zz1_TopNavigationMenun" + intItemCount);
    
    while ((typeof(tdTopMenuItem) != "undefined") && (tdTopMenuItem != null)
            && (intItemCount < intNumberOfMenusToFix)) {
        tdTopMenuItem.onmouseover = function() {
                                activeMenu = this;
                                //Reset the timer
                                if (objTimer != null) {
                                    window.clearInterval(objTimer);
                                    objTimer = null;
                                }
                                objTimer = window.setInterval('HoverDelay()', 1000);
                                }
        tdTopMenuItem.onmouseout = function () {
                                //Reset the timer
                                if (objTimer != null) {
                                    window.clearInterval(objTimer);
                                    objTimer = null;
                                }
                                activeMenu = null;
                                
                                Menu_Unhover(this);
                                }
        tdTopMenuItem=null;
        intItemCount+=1;
        tdTopMenuItem = document.all.item("zz1_TopNavigationMenun" + intItemCount);            
    }

    function HoverDelay() {
        //Reset the timer
        if (objTimer != null) {
            window.clearInterval(objTimer);
            objTimer = null;
        }
        
        Menu_HoverStatic(activeMenu);
    }

</script>