Question

I have this js code:

$(window).resize(function() {
    var formHeight = $(".box-demo").outerHeight() + 40;
    $(".box-demo").css("top",-formHeight+"px");
});

When you resize the window. The box-demo is recalculating the height of the form. But now i have a problem with this on mobile devices.

Only when the change width. Then this function must be performed. Now it happened when the document changing the height and width. How can i make this. That is only performed when i changed the width of the document.

Thanks for helping!

Answer 1

There’s possibly a better way of doing this, but you could base it on a preset window width value. Only if the width changes should the resizing occur:

var windowWidth;

$(document).ready(function() {
    windowWidth = $(window).width();
})

$(window).resize(function() { 
    if($(this).width() != windowWidth)
    {
        var formHeight = $(".box-demo").outerHeight() + 40;
        $(".box-demo").css("top",-formHeight+"px");
        windowWidth = $(this).width();
    }
});

Edit: You can also avoid having to append the “px” by using:

$(".box-demo").css({top: -formHeight});

Edit 2: If you want to make it change when only the width has changed, you could also add a height check as well:

var windowHeight;
...
if($(this).width() != windowWidth && $(this).height) == windowHeight)