I'm trying to get previous and current window width via JS. I use jQuery for capturing window resize event. Here's 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>

It returns me:

Previous: 1685 Current: 1685

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

I'm trying to get previous and current window width via JS. I use jQuery for capturing window resize event. Here's 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>

It returns me:

Previous: 1685 Current: 1685

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

• javascript
• jquery
• resize

• jsfiddle.net/mblase75/pKfSN - I get different values here. Incidentally, you don't need to wrap your resize handler inside $(document).ready. – Blazemonger Commented Aug 29, 2012 at 19:13
• For me, the values are different if I resize using the edge of the window, but they are the same if I maximize or restore the window. Tested in Chrome – MrOBrian Commented Aug 29, 2012 at 19:16
• Heh, still cant get why on my local machine it doesn't work... However, look what I've noticed: "Previous: 647 Current: 663" Is it normal? I need to catch the moment, when window is resized from 980 to 979... – f1nn Commented Aug 29, 2012 at 19:17
• Oh, I see, still having the same problem as yesterday... didn't you say you just needed to know the first time the width was less than 980? Couldn't you just test the current size and set a flag when it meets the criteria? – MrOBrian Commented Aug 29, 2012 at 19:22
• Yeah, you're right (: Still can't manage with this problem. Let me try your solution... – f1nn Commented Aug 29, 2012 at 19:27

3 Answers 3

You are 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/

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

var previous_window_width = $(window).width();

...

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

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