how to access a global variable in javascript?

Question

consider this example:

/**/
var sizes;

$(window).resize(function() {

    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
}); /**/

jQuery(document).ready(function($) {
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});​

how can i have access to the sizes var inside the other method?

right now it doesn't work

thanks

Answer 1

sizes has no value associated with it when your document onReady function executes. In fact it will not have a value until your onResize function executes.

Answer 2

as long as the posted code is not wrapped in a function your declaration is global.

However if your viewportWidth is exactly 1024 sizes is never set. so do something like this: sizes won't have a value until resize is called so set the value when you declare it and reset it when the window is resized

var sizes = $(window).width() <= 1024 ? '300' : '320';
$(window).resize(function() {
    var viewportWidth = $(window).width();
    sizes = $(window).width() <= 1024 ? '300' : '320';
}); 

be aware that global variables in general is a bad idea. In your case you might as well do

$(function() {
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});​

note the first part of the code will not really work with the way you are using it since, the value is passed to anythingSlider when the document is loaded and will not change when the window is resized (it's a value not a reference). The second part won't solve this problem either but repeating the code in window.resize like below will

var setupSlider = function()
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});​
$(function(){
    setupSlider();
});
$(window).resize(setupSlider);

Answer 3

You are correctly declaring a global variable, however what you are passing into anythingSlider is a snapshot of what the value is, not a reference to a variable that contains that value. Changing the global variable will not change the delay of anythingSlider unless you re-initialize anythingSlider with the new value every time you change it (on resize)

It doesn't need to be global anyway.

$(window).resize(function() {
    var sizes = '0';
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth >= 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });
});
$(document).ready(function(){
    $(window).trigger("resize");
});

Note however i can't find any documentation on re-initializing this plugin or changing it's options, I'm not sure if this is the correct way to re-initialize it.

Answer 4

This isn't very good practice... but:

/**/
$(window).resize(function() {
    updateSize();
}); /**/

function updateSize() {
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth <= 1024) {
        sizes = '300';
    }
}    

jQuery(document).ready(function($) {
    updateSize();
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});​

I assume (and hope) you'll be using sizes at a later time as well?