So basically, I want a div called #content to have a css top value of 200px if the browser height is less than 440px. However, this seems to not be working. What am I doing wrong?

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

So basically, I want a div called #content to have a css top value of 200px if the browser height is less than 440px. However, this seems to not be working. What am I doing wrong?

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

• javascript
• jquery

• 1 Is #content already position: absolute or relative? – Michael Berkowski Commented Jan 3, 2012 at 20:45
• Do you need it to work once? Or does it need to listen to the height changes and adjust accordingly? in which case you might want to use a CSS media query. – Madara's Ghost Commented Jan 3, 2012 at 20:46
• Your code appears correct. You probably just need to set your div to have fixed or absolute positioning. Can you post your html/css? – mrtsherman Commented Jan 3, 2012 at 20:47

4 Answers 4

I think you need to handle $(window).resize() event or that logic is only going to be run once.

<script type="text/javascript">

$(window).resize(function(){
  var bohi = $(window).height();
  if(bohi < 440) {
      $("#content").css("top","200px");
  } else {
      //this part works, so it's hidden
  }    
});

</script>

Here is a jsfiddle that seems to be working:

• http://jsfiddle/kNbuy/

Note that $(window).height() doesn't need the parseInt() its already treated as a number.

You need to place this code in your document ready handler like so:

<script>

$(document).ready(function(){

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

});

</script>

OK. I think I see what your problem could be.

You haven't specified what the 'position' attribute of your #content element is. If you're not getting the behavior you want, I suggest that you try adding position:absolute to the style for #content.

I remend that you carefully study how the 'position' attribute works. You may be surprised by the results you get by changing the position css attribute of #content and it's parent element.

Also, you may want to consider having the page automatically execute some code to adjust itself whenever the user resizes the browser window. This can be handled with $.resize().

As of 2015, I remend using CSS media queries for this instead of JavaScript.

@media (max-height: 440px) {

    #content {
        top: 200px;
    }

}