Question

I’ve been trying for several days to:

1. set the value of the variable “w”
2. update “this.paneWidth = w;” in the constructor everytime the window loads or resizes.

The problems I’m facing:

1. JQuery runs the JS Constructor first, and returning “w” value as undefined, I don’t know how to fix that
2. I want to be able to update the constructor value everytime the window loads or resizes, but have failed so far.

Please help! Thanks!

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

var h,
    w,
    sliderWidth;

function resizeFrame() {
    h = $(window).height();
    w = $(window).width(); // assign value to variable
    sliderWidth = (w * 10);
    $("div.slider").css('width',sliderWidth);
    $("div.pane").css('width',w);
}

/************ JS CONSTRUCTOR ************/
function Slider(container, nav) {
    this.container = container;
    this.nav = nav;
    this.panes = this.container.find('div.pane');
    this.paneWidth = w; // referencing variable
    this.panesLength = this.panes.length;
    this.current = 0;
    console.log('pane width = ' + w);

}

Answer 1

You can define global variables inside constructor.

function resizeFrame() {
    h = $(window).height();
    w = $(window).width(); // assign value to variable
    sliderWidth = (w * 10);
    $("div.slider").css('width',sliderWidth);
    $("div.pane").css('width',w);
}

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

/************ JS CONSTRUCTOR ************/
function Slider(container, nav) {
    h = typeof(h) == 'undefined' ? null : h;
    w = typeof(w) == 'undefined' ? null : w;
    sliderWidth = typeof(sliderWidth) == 'undefined' ? null : sliderWidth;

    this.container = container;
    this.nav = nav;
    //this.panes = this.container.find('div.pane');
    this.paneWidth = w; // referencing variable
    //this.panesLength = this.panes.length;
    this.current = 0;
    console.log('pane width = ' + w);

}
new Slider();