Get previous and current window width

Question

I am trying to get the previous and current window widths through JS. I am using jQuery to capture the window resize event. Here is my code:

<script> function getWindowWidth() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } return myWidth; } var lastWindowWidth; $(document).ready(function() { $(window).resize(function() { $('#h1_text').text("Previous: "+ lastWindowWidth + " Current: " + getWindowWidth()); lastWindowWidth = getWindowWidth(); }); }); </script> 

He brings me back:

 Previous: 1685 Current: 1685 

Why are both Previous: and Current: similar? Thanks in advance!

Answer 1

You using jQuery.

So use jQuery:

 $(window).width(); 

---

  var lastWindowWidth; $(document).ready(function() { $(window).resize(function() { var $window = $(this), windowWidth = $window.width(); $('#h1_text').text("Previous: "+ lastWindowWidth + " Current: " + windowWidth ); lastWindowWidth = windowWidth; }); }); 

Fiddle: http://jsfiddle.net/maniator/pKfSN/5/

Answer 2

The essence of the answer is to capture previous_window_width before resizing the window:

 var previous_window_width = $(window).width(); ... $(window).resize(function() { var current_window_width = $(window).width(); // do whatever you need with previous_window_width }); 

Answer 3

here you go http://jsfiddle.net/B9chY/

 var lastWindowWidth = $(window).width(); $(window).resize(function() { $('#h1_text').text("Previous: "+ lastWindowWidth + " Current: " + $(window).width()); lastWindowWidth = $(window).width(); }); 

based on comments:

 var lessThan = false; $(document).ready(function() { if ($(window).width() < 980) { lessThan = true; } }); $(window).resize(function() { if ($(window).width() < 980) { lessThan = true; } });