CODEWITHSUNDEEP
javascriptvariablesglobal
saltcod
saltcod

Reputation: 2031

Setting global variables and wrap in $(window).load

I'm trying to set some Js variables that calculate some heights and offsets, but I need to do that after the page loads b/c I've got 3rd party ads loading and shifting things around.

So the issue:

What I've got is: 

var sidebarHeight = $('.sidebar').height(),
    sidebarOffset = $('.sidebar').offset().top;

But those won't be set right unless I get them like this:

$(window).on('load', function(){
    var sidebarHeight = $('.sidebar').height(),
        sidebarOffset = $('.sidebar').offset().top;
});

But the problem then is that those variables aren't global - they're local to that function and hence aren't reusable by other functions.

So the question then: How can I set it up so these variables are set on window.load, but are still global and useable by other functions?

Upvotes: 1

Views: 2601

Answers (3)

Marcelo Myara
Marcelo Myara

Reputation: 3001

There are 2 ways that I can think of to accomplish that.

1st way: You just declare the variables on globalScope, but you don't assign any value. Then, at the onLoad you assign the value to them, just like this:

var sidebarHeight;
var sidebarOffset;
$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

2nd way (me favourite): You can create an extra attribute on the window object itself. As the window object reference will be global, so will your extra attribute. Do it like this:

$(window).on('load', function(){
    window.sidebarHeight = $('.sidebar').height();
    window.sidebarOffset = $('.sidebar').offset().top;
});

And wherever you need that value again, you could read window.sidebarHeight or window.sidebarOffset.

Hope that helps.

Upvotes: 1

Yaniv Efraim
Yaniv Efraim

Reputation: 6713

Global variables are bad practice and should be avoided!

For your question, setting them global is easy. You can just attach them to window, like this:

$(window).on('load', function(){
    window.sidebarHeight = $('.sidebar').height();
    window.sidebarOffset = $('.sidebar').offset().top;
});

Or, just declare them globally:

var sidebarHeight, sidebarOffset;
$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

But, I strongly recommend avoiding this and maybe consider using some name-spacing to your project, something like this:

var MY_PROJET_NAMESPACE = MY_PROJET_NAMESPACE || {};
$(window).on('load', function(){
    MY_PROJET_NAMESPACE.sidebarHeight = $('.sidebar').height();
    MY_PROJET_NAMESPACE.sidebarOffset = $('.sidebar').offset().top;
});

This will prevent global namespace pollution (you will only have one global variable on the global scope)

Upvotes: 3

David
David

Reputation: 218798

Declare globally:

var sidebarHeight, sidebarOffset;

Set locally:

$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

They won't have a value between their declaration and setting them, so other code which uses them may need to account for that. But if you need them to be in global scope then just declare them in global scope.

Upvotes: 1

Related Questions