Richy
Richy

Reputation: 69

Change/Pass variable from $(window).load and $(document).ready using jQuery

I'm trying to pass and change the value of a global variable into $(window).load and $(document).ready using jQuery

Why doesn't the following code generate an alert box containing the value 'aaa'? - How do I make this happen?

I need to count the number of elements that have a certain class when the document loads, then when the page is ready, use the value to carrout an action.

var globalVariable = 'somevalue';

$(window).load(function() {
    globalVariable = 'aaa';
})

$(document).ready(function() {
    // globalVariable = 'bbb';
    alert(globalVariable);
})

EDIT: How would you detect if an element is currently being hovered on, or has a certain class whilst the page is loading, then carry out an action upon the page being ready, depending on if the class exists or the element is currently being hovered over?

Upvotes: 1

Views: 4333

Answers (2)

adeneo
adeneo

Reputation: 318252

You are passing it, but window.onload generally fires after document.ready, which is why it isn't changed.

From the documentation for ready

While JavaScript provides the window.onload event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.

In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.

var globalVariable = 'somevalue'; // executes first, sets the variable

$(window).load(function() {       // executes last, when all assets are loaded
    globalVariable = 'aaa';
});

$(document).ready(function() {    // executes second, alerts 'somevalue'
    alert(globalVariable);
});

I need to count the number of elements that have a certain class when the document loads, then when the page is ready, use the value to carrout an action.

It seems like all you should really need is

$(function() {
    var number_of_elements = $('.class').length;
});

there's no need to wait for window.onload to count elements.


EDIT:

How would you detect if an element is currently being hovered on, or has a certain class whilst the page is loading, then carry out an action upon the page being ready, depending on if the class exists or the element is currently being hovered over?

$(function() {
    
    $(document).on('mousemove', function(e) {
        
        if ( $(e.target).is('.someClass') && $('.some_other_class').length ) {
             // do stuff
        }

        // remember to remove this handler once done
        
    });

});

I think this is as close as you'll get, as you can only capture the hovered element once the mouse moves.
This will check:

  • If the element currently hovered, e.target, matches something, in this case a class
  • If there are any elements with the class .some_other_class currently in the DOM

Upvotes: 4

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

$(document).ready wait until all element are place on the DOM before triggering.

$(window).load wait until all elements are loaded in the DOM (images finish loading).

Therefor, the document ready method will always trigger before the window load because element are placed in the tree then they are loaded

Upvotes: 1

Related Questions