CODEWITHSUNDEEP
javascriptjquerywindow
Matt W
Matt W

Reputation: 4133

Get, set and reset height using browser size and resize

I'm still an amateur when it comes to JS, I would like to get the height of the browser window, and then get it to update on resize. Is this possible? (code below)

$(document).ready(function() {
    var winHeight = $(window).height(),
        winWidth = $(window).width();

    $('#wrap_project_horizontal_gallery').css({
        'height' : winHeight - 170
    });
});

I've thought about using setInterval but there must be a better way. Thanks very much for the help

EDIT: This needs to happen without a page refresh

Upvotes: 0

Views: 1745

Answers (2)

Raul Sauco
Raul Sauco

Reputation: 2705

You could bind a method to the resize event in the window and recalculate your variables there, or resize the elements that need resizing.

    $(document).ready(function(){
        $(window).resize(function() {
              // your code here
        });
    });

or using a handler

$(document).ready(function(){
         $(window).resize(handle_window_resize);
});

function handle_window_resize() {
     // your code here
}

Upvotes: 1

varun1505
varun1505

Reputation: 810

You can use the jQuery .resize() method.

$(window).resize(function() {

    var winHeight = $(window).height(),
        winWidth = $(window).width();

    $('#wrap_project_horizontal_gallery').css({
        'height' : winHeight - 170
    });
});

Upvotes: 1

Related Questions