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

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) — user400654
– user400654, Commented Aug 14, 2012 at 17:07

Mike Brant · Accepted Answer · 2012-08-14 17:06:59Z

2

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.

answered Aug 14, 2012 at 17:06

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rune FS · Accepted Answer · 2012-08-14 17:22:27Z

1

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);

edited Aug 14, 2012 at 17:22

answered Aug 14, 2012 at 17:07

Rune FS

21.7k7 gold badges65 silver badges101 bronze badges

3 Comments

Rune FS Over a year ago

care to comment on the DV. The code will solve the problem both issues with the code

Patrioticcow Over a year ago

im still testing the code. looks like this people are wright when they say that i need to re-initialize anythingSlider

Patrioticcow Over a year ago

sizes = $(window).width() <= 1024 ? '300' : '320'; this works. thanks

user400654 · Accepted Answer · 2012-08-14 17:18:21Z

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.

Jaime Torres · Accepted Answer · 2012-08-14 17:06:39Z

0

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?

answered Aug 14, 2012 at 17:06

Jaime Torres

10.5k1 gold badge50 silver badges56 bronze badges

Collectives™ on Stack Overflow

how to access a global variable in javascript?

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related