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

Question

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).

Nicolas · Answer 1 · 2013-04-10T11:32:14.660

2

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);
        }
     })();
});

edited Apr 10 '13 at 11:32

answered Apr 10 '13 at 03:07

Nicolas

2,297
3
28
40

thanks after trying you answer for some reason it doesnt seem to work. Any suggestions? – jamesmstone Apr 10 '13 at 03:29
also i noticed the line `var winHeight = $(window).height();;` had 2 `;` but i dont think that would make a difference – jamesmstone Apr 10 '13 at 03:32
Could you post your HTML to try it out? – Nicolas Apr 11 '13 at 00:11

score 0 · Answer 2 · answered Apr 10 '13 at 03:04

0

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?

answered Apr 10 '13 at 03:04

Blue Smith

8,580
2
28
33

out of curiosity with jquery and functions do variables need to be declared in the function or can they be included outside of the function? – jamesmstone Apr 10 '13 at 03:12
This's not jQuery specific question, but a basic Javascript stuff. I think you should read this http://stackoverflow.com/questions/500431/javascript-variable-scope – Blue Smith Apr 10 '13 at 03:16
Check out my answer to clarify how variable scope can be used here – Nicolas Apr 10 '13 at 03:16
thanks after trying you answer for some reason it doesnt seem to work. Any suggestions? – jamesmstone Apr 10 '13 at 03:30
if it helps my html code is essentially `

` – jamesmstone Apr 10 '13 at 03:33
It's not surprised :) Because I've not tested the code, it's just a suggestion in a way it should be. You should debug yourself to find the problem. – Blue Smith Apr 10 '13 at 03:33
I can see there are two
with class 'page'. Do you any external styles related to 'height' for this class? Because it can override the height we set in code.
– Blue Smith Apr 10 '13 at 03:37
nope the height of the divs has never been declared - thanks for all you help – jamesmstone Apr 10 '13 at 03:39

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

2 Answers2