Hoverintent delay not working in html page

StackOverflow https://stackoverflow.com/questions/13575055

Question

Hoverintent is not working when I apply to an html page. Help! On jsfddle it works but testing it on html page does not work.

Works here: http://jsfiddle.net/GZV5V/3/

Does not work on .html page (below code is same as http://jsfiddle.net/GZV5V/3/)

<html>

    <head>
        <style type="text/css">
            #nav {
                padding: 40px;
                border: solid #999 1px;
            }
            #nav ul {
                margin: 0;
                padding: 0;
                display: none;
                background-color: #CCC;
            }
            #nav ul li {
                margin: 0;
                list-style: none;
                list-style-type: none;
                padding: 5px;
                width: 40px;
            }
            #nav a {
                color: black;
                text-decoration: none;
                padding: 5px;
            }
            #nav a:hover {
                text-decoration: none;
                background-color: yellow;
            }
            ​
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
        <script>
            var config = {
                over: function() { //onMouseOver callback (REQUIRED) 
                    $('ul', this).slideDown(250); //show its submenu

                },
                timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
                out: function() { // function = onMouseOut callback (REQUIRED)
                    $('ul', this).slideUp(500); //hide its submenu        
                }
            };
            $('#nav li').hoverIntent(config);​
        </script>
    </head>

    <body>
        <ul id="nav">
            <li><a href="#">Main</a>

                <ul>
                    <li><a href="#">AAAAA</a>
                    </li>
                    <li><a href="#">BBBBB</a>
                    </li>
                    <li><a href="#">CCCCC</a>
                    </li>
                    <li><a href="#">DDDDD</a>
                    </li>
                    <li><a href="#">FFFFF</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>

</html>
Was it helpful?

Solution

The DOM hasn't loaded yet. Wrap your code in a $(document).ready:

$(document).ready(function () {
    var config = {    
        over: function () { //onMouseOver callback (REQUIRED) 
            $('ul', this).slideDown(250);//show its submenu
        },    
        timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
        out: function () { // function = onMouseOut callback (REQUIRED)
            $('ul', this).slideUp(500); //hide its submenu        
        }     
    };
    $('#nav li').hoverIntent(config);​
});

You've configured JSFiddle to run your code onLoad (see the configuration under "framework"). That's why it works in the fiddle.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top