Javascript on load external html files

Question

I have 2 external html file (header and footer),

that I load with this code:

<div id="header-div"></div>
<div id="footer-div"></div>
$(function () {
 $("#header-div").load("/AfekDent/header.html");
 $("#footer-div").load("/AfekDent/footer.html");
}); 

the header file include javascript code that isn't working..

function switchClass(i) {
 var lis = $('#home-news > div');
 lis.eq(i).removeClass('home_header_on');
 lis.eq(i).removeClass('home_header_out');
 lis.eq(i = '++i' % lis.length).addClass('home_header_on');
 lis.eq(i = '++i' % lis.length).addClass('home_header_out');
 setTimeout(function () {
 switchClass(i);
 }, 3500);
}
$(window).load(function () {
 switchClass(-1);
});

what is the problem?

• zer00ne: Did you wrap your script in<script> tags? Can you give us a complete exanple of the header and footer, please?
• Dudi Delman: no, the scripts are in an external .js file.
• zer00ne: Your post's title: Javascript on load external html files. That's what I was asking for. An external HTML file ends with an extension of .html or .htm

Answer 1

The $(window).load() event is called on the page load, not when the additional HTML has been loaded.

• Dudi Delman: Ok, so what trigger indicate all elements are loaded (includ the elment in the header files)?
• Paul: There isn't one that does what you're asking, at least not directly. The .load() method does allow for a callback function, though, so you could track yourself when each of your additional html files is complete and call whatever logic you want when they're both done.