How to know if you are resize in width or height?

Asked

Viewed 2,323 times

5

Is there any way to see if the resize() window is occurring in width or is occurring in height?

jquery html css

3 answers

10


Save the height() and/or the width() of the object in a variable and compare in the callback with the previous value.

Example working on Jsfiddle
Change the width or height of the "result" window to see...

jQuery:

// guardar valores em uso
var h = $(window).height(),
    w = $(window).width();

// realizar verificação
$(window).resize(function(){

    // recolher valores actuais
    var nh = $(window).height(),
        nw = $(window).width();

    /* comparar os valores antigos com os novos
     * e realizar acção pretendida aqui!
     */

    // atualizar os valores nas variáveis que guardam o valor antigo
    h = nh; w = nw;
});

Example credit for @Anoop on SOEN in this answer.

  • 3

    There are some examples there Rodrigo?

  • 1

    @Jeffersonalison I applied an example in Rodrigo Deodoro’s answer, you keep the values in a variable and through the method resize do the checking.

  • Ok, Zuul.. next if I want for example to display an alert "vc this moving in width/height".. ?

  • 2

    @Jeffersonalison would be something like if (nh != h) alert("estás a mexer na altura"); else if (nw != w) alert("estás a mexer na altura");. But beware of alerts within the resize method, 100 pixel resize generates 100 alerts :) Unless you’re really fast at moving that mouse ;)

  • In this case the ideal would be to put the $(window) block. resize() within a setTimeout block of at least one second, to prevent the code from running once per pixel.

  • @Zuul, do I make this condition inside resize? Because I could not, it is possible to edit your code?

  • @Jeffersonalison Technically the code is not mine, it’s Rodrigo Deodoro’s. But here is one working example, changes the size of the output window and you will see the magic happening.

Show 2 more comments

2

Try something like this:

$(document).on('ready', function() {
    var width = $(window).width(), height = $(window).height();

    $(windows).on('resize', function() {
        if($(window).width() != width) {
          console.log('A largura mudou para'+$(window).width());
        }

        if($(window).height() != height) {
          console.log('A altura mudou para'+$(window).height());
        } 
    });
});

My reply is very similar to the one of the friend above, but I was already writing when you started, so I decided to send anyway :)

1

You can use Jquery UI. It provides more functions on resize.

For example, as the function returns the Object and in this object we have the original propertySize. So it will be easier to discover the original size.

resize: function(event, ui) { 
    ui.originalSize.width;
}

The doc will help you a lot if you’re interested. Jquery Ui

  • 3

    In my opinion it is unnecessary to add an entire library just for such a simple question...

  • 1

    If it is not the resize of the window, but a resize of objects, I believe it would be more interesting to use the library. But the inclusion of a library really is a downside of this solution.

Browser other questions tagged jquery html css

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