CODEWITHSUNDEEP
javascripteventsmobileresize
gabitzish
gabitzish

Reputation: 9691

JavaScript resize event on scroll - mobile

I'm trying to make a website for mobile. I'm having the "resize" event bounded on window, which should rearrange elements when the mobile device is turning (portrait <-> landscape). On iPhone and Samsung Galaxy SII, the event is triggered when I'm scrolling down the page, and that's not good.

How can I fix this?

Upvotes: 32

Views: 20745

Answers (2)

sidonaldson
sidonaldson

Reputation: 25284

Cache the width of the viewport and on resize return false if the width is still the same.

A small jQuery snippet:

    var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });

Upvotes: 56

scessor
scessor

Reputation: 16115

Use the onOrientationChange event and the window.orientation property instead.

Also see this answer.

Here link to a test page.

Upvotes: 9

Related Questions