Question

I did a quick Google on the title and got pummelled with all this code that I didn’t understand a word of.

I’ve been JavaScript programming for a couple of years now and am comfortable with most concepts. Except event handling. It scares me!

The problem

I have a div which I’ve wrote a script for, that scrolls the div vertically purely based on mouse position.

I get the height of the container, and height of the inner container that will "overflow".

Divide them to get a "differential" and then multiple the mouse position by this differential to get the div to scroll depending on the mouse position.

It gives me a nice clean scroll!

(If anybody wants more info on this just ask)

My problem is. The contents of this div are generated by ajax.

Therefore when the code to calculate the height of both inner and outer divs is ran, it gives the incorrect height, as they haven’t been populated by data yet.

So I need to fire an function WHEN the ajax has copied the data to the innerHTML to call the mousescroll function.

Extra

Issues: I have two ajax calls that populate the scrollable div. and sometimes one gets fetched before the other and vice versa. So I need the mousescroll function to fire WHEN and only WHEN both of the ajax calls have completely entered all the data into the html that they can!

I was thinking about just adding a setTimeout but… I don’t like forcing my scripts to wait!

Answer 1

I’m not 100% clear on where the problem is. You write: “I need to fire an function WHEN the ajax has copied the data to the innerHTML to call the mousescroll function.” — do you need help with that part of it? If you’re using jQuery, then you just call the mousescroll function inside of the success callback function of $.ajax.

As you point out, however, this is complicated by the other issue you bring up: there are actually two Ajax calls and you want them both to complete before calling the mousescroll function. To solve this, simply create a variable that is equal to zero, and then increment it within both success callbacks. Those callbacks would also check the value of the variable, and if it equals 1 (meaning that an Ajax call has already completed), call the mousescroll function.

pseudo code:

var numOfAjaxCalls = 0;

$.ajax({
    ...
    success: function(){
        if(numOfAjaxCalls = 1){
            mousescroll();
        }else{
            numOfAjaxCalls++;
        }
    }
});