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

Asked

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?

javascript events

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

  • 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.

  • Height and width have to change 15px?

  • How so? As you resize the window, several resize events are already triggered by the browser itself.

  • 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.

  • Yes, what I meant was that you can only increase/decrease the height or just the width, or the 2

Show 1 more comment

1 answer

2


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/

  • bfavaretto, that’s right! thank you very much!

  • The other part you had commented you solved? I was trying to understand, but I could not.

  • Ah I got confused, it went right. Thanks! ;)

Browser other questions tagged javascript events

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