CODEWITHSUNDEEP
jqueryhtmlcss
Anthony Russo
Anthony Russo

Reputation: 931

How to adjust div max-height on browser open and reinitialize

Okay I have a div class "content" and whenever the browser resizes to 800px in height the content div resizes its max-height to 500px. The problem I am having is if the browser opens with a height of 800px then there is no scrollbar for the div unless I refresh the browser.

The code I have:

<script type="text/javascript">
$(window).on('resize', function(){
if($(this).height() <= 800){
    $('.content').css('max-height', '500px'); //set max height
}else{
    $('.content').css('max-height', ''); //delete attribute
}
});
</script>

Also I am using jScrollPane and it works fine if I set the max-height in the css but if I use the code above instead a regular scrollbar is used. Any help on either would be appreciated.

Upvotes: 5

Views: 26172

Answers (3)

Ram
Ram

Reputation: 144699

Try this:

$(document).ready(function() {

   $(window).on('resize', function(){
     if ($(this).height() <= 800){
          $('.content').css('max-height', '500px'); //set max height
     } else{
          $('.content').css('max-height', ''); 
     }
   }).resize()

})

Upvotes: 12

WebDevNewbie
WebDevNewbie

Reputation: 1863

Wrap it in 

$(function() {
    //Script in here should run on document.ready
});

Upvotes: 0

Hidde
Hidde

Reputation: 11941

Call that code once in $(document).ready().

Upvotes: 0

Related Questions