jQuery resize event not firing

Question

For whatever reason the following:

$(function() {
  $(window).resize(function() {
    alert("resized!");
  });
});

only fires an event when the page is loaded. Resizing the browser window does nothing in both Safari and Firefox. I have not tried it on any other browsers.

Any ideas or workaround?

That's a shame, because I too am having this problem but I don't have a resize() namespace conflict. I used Visual Studio to debug the callstack and it is originating from the browser, not from a line of code in my codebase. I have a hacky workaround so I'll move on, but I think there is something to this issue as others have reported on this behavior as well. — Marcus Pope, Sep 26 '12 at 18:50
http://forum.jquery.com/topic/window-resize-firing-on-page-load-in-ie9 The hacky workaround for me was to init a temp variable to true on dom load, and set it to false and exit the resize closure function if the temp variable was true. — Marcus Pope, Sep 26 '12 at 18:58

score 14 · Accepted Answer · answered Apr 15 '11 at 23:46

14

I think your alert is causing a problem try this instead

 $(window).resize(function() {
   $('body').prepend('<div>' + $(window).width() + '</div>');
 });

jsfiddle

answered Apr 15 '11 at 23:46

mcgrailm

17,469
22
83
129

2

I tried that too (from the jQuery resize() docs) and it displays an initial width when the page loads (or is reloaded) but nothing happens when I resize the browser window. Sigh. – brettish Apr 15 '11 at 23:50
@brettish do you have other js / jquery that me be effecting things, do you get an error message in the error console ? – mcgrailm Apr 15 '11 at 23:52
@mcgrailm it is possible there is something effecting things... but no, there are no error messages. I am going to try and isolate why it isn't working on my page, but works in the link balexandre posted. – brettish Apr 15 '11 at 23:56
It was something else in the code that messed things up. I should have caught it sooner. See the comment I left on the question for the cause. Thanks for the help! – brettish Apr 16 '11 at 00:25
@brettish glad you found the problem. don't be so hard on yourself man everyone makes mistakes – mcgrailm Apr 16 '11 at 00:31

score 14 · Answer 2 · answered Apr 16 '11 at 00:30

14

it is best to avoid attaching to events that could potentially generate lots of triggering such as the window resize and body scroll, a better approach that flooding from those events is to use a timer and verify if the even has occurred, then execute the proper action, something like this:

$(function() {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

    setInterval(function () {
        if ((width != $window.width()) || (height != $window.height())) {
            width = $window.width();
            height = $window.height();

            alert("resized!");
        }
    }, 300);
});

another advantage doing it using timer is you have full control of how often to check, which allows you flexibility if you have to consider any additional functionality in the page

answered Apr 16 '11 at 00:30

Kris Ivanov

10,476
1
24
35

22

This solution will run the setInterval closure every 300ms to perpetuity which isn't an optimal approach for high performant sites. Here's a better approach to the problem: http://www.marcuspope.com/better-resize-event-handler – Marcus Pope Sep 26 '12 at 18:44
6

[Here is a JSFIddle to the code Marcus Pope linked to](http://jsfiddle.net/v7LN6/) (Just in case it ever goes down) – Hanna Aug 05 '14 at 19:59
in the past few years the best practice is to subscribe to the event and use a `throttle` avoiding excessive processing https://lodash.com/docs#throttle – Kris Ivanov Jan 15 '15 at 21:52
you can use a throttle function together with the window resize, so the event only occurs if the window is being resized and the handler has not been executed in the last 300ms – santiago arizti Mar 06 '18 at 15:27
Thank you @MarcusPope this is the best approach I have seen so far – blackem Mar 20 '18 at 14:35
@MarcusPope KING – Ali Sep 26 '19 at 12:45

score 3 · Answer 3 · answered Apr 15 '11 at 23:48

3

works in any browser:

http://jsbin.com/uyovu3/edit#preview

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

answered Apr 15 '11 at 23:48

balexandre

73,608
45
233
342

2

when I use the link, it works. But when I use it in my page it doesn't. I am going to have to figure out what it is about my page that is does not like. – brettish Apr 15 '11 at 23:53

bart · Answer 4 · 2016-12-23T11:04:08.083

5 years later...

The only browser I have this problem with, is Chrome; I don't have Safari.

The pattern I noticed is that it works when I inline the code:

<script type="text/javascript">
    $(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>

but not when I put it in a separate Javascript file that I load with:

<script type="text/javascript" src="/js/resized.js"></script>

where the script contains

console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });

I can only guess this is some kind of "protection" built in by the Chrome development team, but it is silly and annoying. At least they could have let me bypass this using some "same domain policy".

Update for a while I thought using $(document).ready() fixed it, but apparently I was wrong.

score 0 · Answer 5 · answered Apr 16 '11 at 00:07

0

try

$(document).resize(function(){ ... };);

I think its the document that fires the resize consistently across browsers. But I'm not at work now to check what I usually do.

answered Apr 16 '11 at 00:07

James Khoury

21,330
4
34
65

1

This doesn't fire at all in IE9 – Marcus Pope Sep 26 '12 at 18:45

score 0 · Answer 6 · answered May 01 '20 at 07:33

0

Try this code.

window.addEventListener("resize", function(){
    console.log('yeap worked for me!');
})

answered May 01 '20 at 07:33

Javohir Karimov

11

score 0 · Answer 7 · answered Jul 03 '22 at 20:22

0

Standart

$(window).bind("resize",function(){
console.log(window.innerWidth);
})

For Wordpress

jQuery(window).bind("resize",function(){
console.log(window.innerWidth);
})

answered Jul 03 '22 at 20:22

Murat Kezli

187
2
5

score -1 · Answer 8 · answered Dec 04 '13 at 18:40

I was with the same problem, saw all kind of solutions and didn't work.

Making some tests I noticed that the $(window).resize, at least in my case, would only trigger with $(document).ready() before it. Not $(function()); nor $(window).ready();

So my code now is:

$(document).ready(function(){
  $(window).resize(function(){
      // refresh variables
      // Apply variables again
  });
});

...and even an alert work!

jQuery resize event not firing

8 Answers8

Linked