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

Question

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.

Answer 1

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

})