How to detect changes of more than 15px in Resize Window

Question

How to detect changes of more than 15px in Resize Window

Asked 9 years, 9 months ago

Viewed 101 times

0

I need to fire an event (Alert) whenever a window is resized, but only when the difference goes from 15 pixels (to less or to more).

What is the simplest way to calculate these 15px?

Related: that and that. Take a look if it doesn’t already help.

– Fernando Leal

2015/03/19 at 19:11
The event resize the window I know how to do, my doubt is in relation to the count of 15 in 15 pixels so I fire another event.

– Tamiris

2015/03/19 at 19:28
Height and width have to change 15px?

– Lucas

2015/03/19 at 19:30
How so? As you resize the window, several resize events are already triggered by the browser itself.

– bfavaretto

2015/03/19 at 19:31
Lucas, to illustrate I need that every 15 pixels of resize from the window (for less) I can trigger an event, for example an Alert on the page.

– Tamiris

2015/03/19 at 19:33
Yes, what I meant was that you can only increase/decrease the height or just the width, or the 2

– Lucas

2015/03/19 at 19:34

Show 1 more comment

1 answer

Browser other questions tagged javascript events

You are not signed in. Login or sign up in order to post.

by bfavaretto • **64,705** points · Answer 1 · 2015-03-19T19:45:15+00:00

If I understand correctly, you want something to happen every 15 pixels of resize. As during resizing the window the event resize occurs several times, you need to create "milestones" in which saves the previous dimensions of the window, and compare the current value with these milestones. Something like that:

var ultimaLargura = window.innerWidth, 
    ultimaAltura = window.innerHeight;

window.onresize = function() {
    var diffLargura = Math.abs(ultimaLargura - window.innerWidth);
    var diffAltura = Math.abs(ultimaAltura - window.innerHeight);
    if(diffLargura >= 15 || diffAltura >= 15) {
        console.log('executando');   
        ultimaLargura = window.innerWidth;
        ultimaAltura = window.innerHeight;
    }
};

^{http://jsfiddle.net/zc8dsj46/}