title: Displaying different image based on direction of resize
body: <p>I have two images. I am trying to display one when the browser resizes left, and the other when it resizes right.</p>
  
  <pre><code>    function adjustDirection() {
          var last_pos_x = window.screenX;
  
          if ( last_pos_x &lt; window.screenX) {
              document.getElementById("logo").style.backgroundImage = "url('logoRight.png')";
          } else if (last_pos_x &gt; window.screenX) {
              document.getElementById("logo").style.backgroundImage = "url('logoLeft.png')";
          }
      }
      window.onresize = adjustDirection;
  </code></pre>
  
  <p>However, it seems like my function only begins to works if <code>last_pos_x</code> is declared outside of the function, which is clearly wrong because it will only store <code>window.screenX</code> from load. </p>
  
  <p>Any help would be greatly appreciated</p>