CODEWITHSUNDEEP
javascriptjquery
Chudz
Chudz

Reputation: 160

Jquery get size of window and apply to div css and adjust on browser resize

Ok so I want to make a div full screen. The only way I can do this is through JavaSript/jQuery. CSS won't work with this one.

I want to get the size of the browser and apply the size to a css of a div.

$(function(){

  var wheight = $(window).height();

  $(window).resize(function() {
    wheight = $(window).height();
  });

  $('.slide').css({"height":wheight+"px"});

});

It kind of works however the window resize section wont work and the css does not adjust on the fly to the browsers height.

Any idea where I have gone wrong?

Thanks

Upvotes: 0

Views: 708

Answers (2)

Zakaria Wahabi
Zakaria Wahabi

Reputation: 213

Try this:

$(function(){

   var wheight = $(window).height();

   $(window).resize(function() {
      wheight = $(window).height();
      $('.slide').css({"height":wheight+"px"});
    });

});

Upvotes: 0

styke
styke

Reputation: 2174

You are only setting the size of the element once and not everytime the window is resized. This is how I would've done it: 

$(function () {

    //Adjust element dimensions on resize event
    $(window).on('resize', function () {
        $('.slide').css('height', $(this).height() + "px");
    });

    //Trigger the event
    $(window).trigger('resize');
});

Upvotes: 1

Related Questions