CODEWITHSUNDEEP
javascriptjquery
Andrew
Andrew

Reputation: 1450

Getting window height with jquery

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
}

Upvotes: 1

Views: 7271

Answers (4)

sheriffderek
sheriffderek

Reputation: 9053

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

@media (max-height: 440px) {

    #content {
        top: 200px;
    }

}

Upvotes: 0

rtpHarry
rtpHarry

Reputation: 13135

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:

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

Upvotes: 5

Vivian River
Vivian River

Reputation: 32410

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

Upvotes: 0

Matt
Matt

Reputation: 3680

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>

Upvotes: 0

Related Questions