CODEWITHSUNDEEP
javascriptjquery
jamesmstone
jamesmstone

Reputation: 397

change height of div to browser window height so long a the browser height is greater than x

Hi I'm hoping someone will be able to explain what i am doing wrong here:

 var winHeight = $(window).height(),
 minHeight = 900,
 Height = 900;

 $(document).ready(function () {

 if (winHeight < MinHeight) {
     Height = minHeight;
 } else {
     Height = winHeight;
 }
 $('div.page').css('height', winHeight + 'px');
});


 $(window).resize(function () {
 if (winHeight < MinHeight) {
     Height = minHeight;
 } else {
     Height = winHeight;
 }
 $('div.page').css('height', winHeight + 'px');

});

On my page I have multiple divs with the class "page". I'm trying make the height of these the size of the browser window, unless the browser window is less than 900, then I want them to be 900px tall.

I'm guessing its a syntax issue. Especially since I'm brand new to jquery and javascript ( I only started using it today).

Upvotes: 0

Views: 404

Answers (2)

Nicolas
Nicolas

Reputation: 2367

You have to call $(window).height() on the resize event, so you can respond to the current window size. You can go with this:

$(document).ready(function () {
    //Call the method one time
    updateWindowSize();
    //Subscribe the method to future resize events
    $(window).resize(updateWindowSize);

    //updateWindowSize inside a closure to hide 'minHeight'
     var updateWindowSize = (function(){
        var minHeight = 900;

        //Actual updateWindowSize function
        return function(){
            var winHeight = $(window).height();
            var newHeight = winHeight < minHeight ? minHeight : winHeight;
            $('div.page').height(newHeight);
        }
     })();
});

Upvotes: 2

Blue Smith
Blue Smith

Reputation: 8820

The problem is the value of winHeight is never changed when window resizes. And I wonder where the variable "Height" is used ?

The code should be:

$(document).ready(function () {  
  $(window).resize(function () {
    var winHeight = $(window).height(),
    minHeight = 900,
    Height = 900;
    if (winHeight < minHeight) {
       Height = minHeight;
    } else {
       Height = winHeight;
    }

    $('div.page').height(Height);
  });
});

Make sense?

Upvotes: 0

Related Questions