Question

I have two external .js files. The first contains a function. The second calls the function.

file1.js

$(document).ready(function() {

    function menuHoverStart(element, topshift, thumbchange) {

        ... function here ...

    } 

});

file2.js

$(document).ready(function() {

    setTimeout(function() { menuHoverStart("#myDiv", "63px", "myIMG"); },2000); 

});

The trouble is that this is not running the function. I need the two separate files because file2.js is inserted dynamically depending on certain conditions. This function works if I include the setTimeout… line at the end of file1.js

Any ideas?

Answer 1

The problem is, that menuHoverStart is not accessible outside of its scope (which is defined by the .ready() callback function in file #1). You need to make this function available in the global scope (or through any object that is available in the global scope):

function menuHoverStart(element, topshift, thumbchange) {
    // ...
}

$(document).ready(function() {
    // ...
});

If you want menuHoverStart to stay in the .ready() callback, you need to add the function to the global object manually (using a function expression):

$(document).ready(function() {
    window.menuHoverStart = function (element, topshift, thumbchange) {
        // ...
    };
    // ...
});