jquery loads menu from external html but animation will not work

Question

I created a navigation which slides down in jquery. It worked perfectly however I want to have the menu (unordered list) in a separate html file so when changed it implements across all my sites pages.

I used the following code to load the html file into the div "menucontainer"

$(document).ready(function(){

$( "#menucontainer" ).append(

   $( '<div>' ).load( 'navigation.html' )
    );
});

The top level of the menu is displayed however when I hover over the menu the sub menu no longer slides down

Here is the animation code

 $("#nav li").hoverIntent({sensitivity: 7, interval: 10, over: showNav, timeout: 20, out: hideNav});

 function showNav() {
 $("ul", this).slideDown(500);

 }

 function hideNav() {   
 $("ul", this).stop(true, true).slideUp(500);

 };

Here is navigation.html

<ul id="nav">
    <li id= "1"><a href="#">CARS</a>
    <ul>
    <li id= "11"><a href="#" class="clicked_link">Link1</a></li>
    </ul></li>
    <li id= "2"><a href="#" class=>NEWS / EVENTS</a>
        <ul>
            <li id= "21"><a href="#" class="clicked_link">Latest News</a></li>
            <li id= "22"><a href="#" class="clicked_link">Upcoming Events</a></li>
            <li id= "23"><a href="#" class="clicked_link">Calendar</a></li>
            <li id= "24"><a href="#" class="clicked_link">Research and Development</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li id= "3"><a href="#" class=>SERVICES</a>
    <ul>
        <li id= "31"><a href="#" class="clicked_link">Dealer Locator</a></li>
        <li id= "32"><a href="#" class="clicked_link">Hire Cars</a></li>
        <li id= "33"><a href="#" class="clicked_link">Finance</a></li>
        <li id= "34"><a href="#" class="clicked_link">Insurance</a></li>
        <li id= "35"><a href="#" class="clicked_link">Used Car Locator</a></li>
        <li id= "36"><a href="#" class="clicked_link">Factory Visits</a></li>
        <li id= "37"><a href="#" class="clicked_link">Chassis Records</a></li>
        <li id= "38"><a href="#" class="clicked_link">Contact Us</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "4"><a href="#" class=>MEDIA</a>
    <ul>
        <li id= "41"><a href="#" class="clicked_link">Video</a></li>
        <li id= "42"><a href="#" class="clicked_link">Images</a></li>
        <li id= "43"><a href="#" class="clicked_link">Press Releases</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "5"><a href="#" class=>SHOP</a>
    <ul>
        <li id= "51"><a href="#" class="clicked_link">Online Store</a></li>
    </ul>         
        <div class="clear"></div>
    </li>


</ul>

Any help would be greatly appreciated, Thank You

hunter · Answer 1 · 2011-08-31T13:37:58.413

2

It looks like you are attaching these events before the items actually exist on the page.

You can test if this is the case easily by checking the length of this selector:

$("#nav li").length // probably == 0

Try this:

$(function(){
    $("#menucontainer").load("navigation.html", function() {
        $("#nav li").hoverIntent({ 
            sensitivity: 7, 
            interval: 10, 
            over: showNav, 
            timeout: 20, 
            out: hideNav
        });
    });
});

function showNav() {
    $(this).find("ul").slideDown(500);
}

function hideNav() {   
    $(this).find("ul").stop(true, true).slideUp(500);
};

You can pass a callback to the load() method that will fire once the load is complete.

.load( url, [data], [complete(responseText, textStatus, XMLHttpRequest)] )

edited Aug 31 '11 at 13:37

answered Aug 31 '11 at 13:32

hunter

62,308
19
113
113

This is fantastic, thank you, the animation now works well. The other functions which relate to the #nav still do not work, i'm guessing this is for the same reason as before - that they are in the document ready function before the nav exists. Is there a way to refresh these as well? Again, thanks for helping – mikedeveloper Aug 31 '11 at 14:52
update your question and show me where these functions exist. The key thing to remember is that `#nav` does not exist on `document.ready`, only after you've loaded this html from `navigation.html`. Knowing that, you should be able to add your failing code after the `.hoverIntent()` call. – hunter Aug 31 '11 at 15:31

jquery loads menu from external html but animation will not work

1 Answers1