Ahad Murtaza
Ahad Murtaza

Reputation: 27

How to append div on screen resize

I want to replace div positions when specific screen size is reached like css media queries. I tried it but getting some problems getting the screen size. Here is what i have done till now.

http://jsbin.com/izize3/60/edit

$(window).resize(function () {
    var width = $(window).width();
    if (width >= 768 || width <= 979) {
        $('#div1').appendTo('#container');
    } else if (width > 979) {
        alert("else if is executed");
        $('#div2').appendTo('#container');
    } else {
        alert("Default else");
    }
});

Upvotes: 0

Views: 505

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Because you are using in first if statement:

if (width >= 768 || width <= 979)

Any width > 768 will pass this condition.

You should use instead:

if (width >= 768 && width <= 979)

BTW, please consider for debugging to use console.log() instead of alert().

http://jsbin.com/izize3/73/edit

Upvotes: 4

Related Questions