CODEWITHSUNDEEP
javascriptjquery
Seong Lee
Seong Lee

Reputation: 10580

jQuery - resize an elements height to match window without refreshing, on window resize

I have the following script that works okay if page is refreshed but I want to be able to dynamically get the size of the resized window without refreshing the page and apply respective height to a section.

var w = $(window).width();
var h = $(window).height();

$('section').height(h);

What am I missing to make it work more dynamically?

Upvotes: 2

Views: 1297

Answers (4)

George
George

Reputation: 36794

Try the following, the function will be called every time the window is loaded or resized:

$(window).on('load resize', function(){
    var w = $(window).width();
    var h = $(window).height();

    $('.section-content').height(h);
});

You confirmed in the comments that section should in fact be .section-content.

JSFiddle

Upvotes: 4

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

function setToWinSize(){
    var win = $(window);
    $('section').width(win.width()).height(win.height());
}

$(function(){        // on DOM ready

  setToWinSize();    

  $(window).resize(function(){
     setToWinSize();
  });

});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

Try setting height width on window resize.

Window resize height/width change Fiddle

Jquery:

$(window).on('resize', function(){
var h=($(window).height();
var w=$(window).width();
$('.section-content').height(h);
});

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

$(window).resize(function(){
    var w = $(window).width();
    var h = $(window).height();
    $('.section-content').height(h);
});

Upvotes: 2

Related Questions