Main js file cannot see elements values declared in another js file

Question

I am running into an issue with a library that I installed, but I'm pretty sure the answer is more general.

I have a js file that I made that calculates the value of "data-x" and "data-y" with this code:

$(document).ready(function () {
    var x2 = -1920;
    var y2 = 0;

    var resX = $(window).width();
    var resY = $(window).height();
    var disX = (resX)/1920;
    var disY = (resY)/1080;

    $("#div2").attr('data-x',disX*x2);
    $("#div2").attr('data-y',disY*y2);
});

And when I check the Chrome console after the page has loaded all of the values are displayed correctly and in their right divs, but the first js file (impress.js) is not seeing the values unless they are hardcoded into the HTML file.

I have tried switching the order in which each file loads to no avail. Here is what my html looks like:

http://jsfiddle.net/gVdkL

Is there something that I can do to get impress.js (the js library I downloaded) to see the values that I calculate in my myjs.js file? Is it an issue with how they are loaded, or the impress.init() at the bottom of the html document?

Any help would be appreciated! Thank you!

Answer 1

Looking at your fiddle, and the code you've attached, I guess the problem is that your code will run on DOM ready event, and the impress().init() will run when it's parsed (so very likely before the DOM is fully ready).

You could include this line after your code:

$(document).ready(function () {
    var x2 = -1920;
    var y2 = 0;

    var resX = $(window).width();
    var resY = $(window).height();
    var disX = (resX)/1920;
    var disY = (resY)/1080;

    $("#div2").attr('data-x',disX*x2);
    $("#div2").attr('data-y',disY*y2);


    impress().init(); // <-- init it here after the values are being set
});