title: jquery: referencing and updating outside variables inside functions
body: <p><strong>I've been trying for several days to:</strong></p>
  
  <ol>
  <li>set the value of the variable "w"</li>
  <li>update "this.paneWidth = w;" in the constructor everytime the window loads or resizes.</li>
  </ol>
  
  <p><strong>The problems I'm facing:</strong></p>
  
  <ol>
  <li>JQuery runs the JS Constructor first, and returning "w" value as <strong><em>undefined</em></strong>, I don't know how to fix that</li>
  <li>I want to be able to update the constructor value everytime the window loads or resizes, but have failed so far.</li>
  </ol>
  
  <p>Please help! Thanks!</p>
  
  <pre><code>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);
  
  }
  </code></pre>