Window resize fires twice in Chrome and FireFox, but only one in Safari

Question

I used this code to test under the latest version of Chrome , FX and Safari. If I press the maximize button, it will fire twice in FX and Chrome, but only once in Safari. I am using Windows 7. Surprisingly, if I use Windows XP, Chrome will fire twice and FX, Safari fire once. Is it possible to guarantee it will fire twice? Thanks

$(window).resize(function() {

    if (!isiPhone()) {
        if ($(".viewportBinder").length){                   
            $("#view").css('height',$(window).height());
            $("#view").css('width',$(window).width());  
            content = element.viewport('update'); 
        }

        var h = screen.height;
        var w = screen.width;

        $(window).css("height",h);
        $(window).css("width",w);

        Book.book_position();
        Book.zoom_auto();

        /*
        var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
        var is_safari = navigator.userAgent.indexOf("Safari") > -1;

        if ((is_firefox)||(is_safari))*/
        alert ('test');
    }   

});

Thanks for editing.. I find that what statement inside the resize function does not matter. The behave of resize function is different among browsers — user782104, Dec 17 '12 at 15:02

closure · Answer 1 · 2012-12-17T15:19:05.623

1

This is not a problem. It browser dependent. You will need to handle this situation.

How about remembering your last action and ignoring it if the parameters are same.

You may code like:

function myResizer() {
    if (!isiPhone()) {
        if ($(".viewportBinder").length) {                   
            var height, width;
            height = $(window).height();
            width = $(window).width();
            if ((myResizer.height !== height) || (myResizer.width !== width)) {
                $("#view").css('height',$(window).height());
                $("#view").css('width',$(window).width());  
                content = element.viewport('update'); 
                myResizer.height = height;
                myResizer.width = width;
            }
        }

        var h = screen.height;
        var w = screen.width;

        if ((myResizer.h !== h) || (myResizer.w !== w)) {
            $(window).css("height",h);
            $(window).css("width",w);

            Book.book_position();
            Book.zoom_auto();
            myResizer.h = h;
            myResizer.w = w;
        }
    }   
}

$(window).resize(myResizer);

edited Dec 17 '12 at 15:19

answered Dec 17 '12 at 15:03

closure

7,412
1
23
23

Sorry what is myResizer.height , height stand for? Also, I would like to have exact two time fire action in all browser and all os, is it possible to achieve it? Thanks – user782104 Dec 17 '12 at 15:10
It is just a way of saving variable at function level without cluttering the global name space. Like static variable at a function level. – closure Dec 17 '12 at 15:12
the function myResizer can ensure the resize function run 2 times? – user782104 Dec 17 '12 at 15:15
Is it possible / realistic to check the browser type first, and implement different function for different browser? eg. if safari, loop the function one more time . But fx is some version fire 2 time and some version fire one time.. – user782104 Dec 17 '12 at 15:29
I would not code like that. That method will leave me vulnerable to browser behaviors between os and versions. – closure Dec 17 '12 at 15:36

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

the resize event fires not ones, if you resize your browser... it fires multiple times, maybe for each pixel, don't know. it depends on the browser...

see also here: javascript resize event firing multiple times while dragging the resize handle

edited May 23 '17 at 11:57

Community

1
1

answered Dec 17 '12 at 15:04

algorhythm

8,530
3
35
47

multiple times when resize the window by dragg it , but once when press 'maximum window' – user782104 Dec 17 '12 at 15:09

score 1 · Accepted Answer · answered Dec 17 '12 at 16:00

I think, that's not a big problem. I solve the problem, usually using a method which is fired when resize finished.

var after_resize = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();
$(window).resize(function() {
after_resize(function(){
    alert("resize finish!");
}, 300);
});

Window resize fires twice in Chrome and FireFox, but only one in Safari

3 Answers3