I am creating a section on a webpage where the height is determined by screen.availHeight. It works perfectly, but I also want it to reset to the default height in the CSS when the width goes below 1080px. I've tried different approaches, but haven't been successful. The current if statement only uses screen.availHeight if the width is above 1080px, but doesn't reset when the width decreases again.
Additionally, I want it to check the width both on page load and when resized using (window).resize. Is there a way to combine both (window).resize and (document).ready to check the width on initial load and upon resizing?
<script>
$(window).on('load resize',function(){ //Updated line that now functions correctly
if ($(window).width() > 1080)
{
var screenHeight = screen.availHeight;
$('#home').css('height', screenHeight + 'px');
}
else
{
$('home').css('height', '');
}
});
</script>
Here is a demonstration of the webpage -
If you try loading the page with a browser width under 1080px, everything is fine. Then resize above 1080px, still good. But when you reduce the width again, you'll encounter one issue. Refreshing the page at a width above 1080px will reveal another problem. This is my first project involving JavaScript, so I might be overlooking something simple.
The first problem has been resolved - does anyone have a solution for reverting to CSS in the else statement?