How to add or remove classes based on browser height resize using jquery?

Question

I would like to know if there's a way to add or remove classes based on the browser's height. Right now, I am comparing a div against the browser height and adding a class to it if the browser's height is higher than the div height by doing this:

if (($(window).height()) > $(".sidebar").height()) {
    $("#widget-area").addClass("fixed");
} else {

}

This works since the class is being added when the condition is met. The problem is that if the user resizes the browser's height, the class that was added will keep added even if the condition is not met anymore.

Is there a way to listen to the browser's height and add or remove this class no matter if the browser is resized later on?

EDIT:

I know a lot of you might suggest doing this by media queries but I need this to be done using jQuery.

I have added the window on resize function as suggested. The problem is that the script will only run if the browser is resized. I need it to run as soon as the document is ready and if the browser is resized as well. Here is my code:

$(window).on('resize', function(){
    if (($(window).height()) > $(".sidebar").height()) {
        $("#widget-area").addClass("fixed");
    } else {

    }
});

Answer 1

The CSS media queries is a good way to do this work. But if you want to use jQuery, you should run the code when window resize.

$(window).resize(function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

Also if you want to run code when page load, use .on() and add two event handler to it.

$(window).on('load resize', function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

See code result in demo

Answer 2

Solution via javascript:

If .sidebar has a dynamic height, here is one approach using javascript:

function updateWidgetAreaClassList() {
    var widgetArea = document.getElementById('widget-area');
    var sideBar = document.getElementsByClassName('sidebar')[0];

    if (window.innerHeight > sideBar.offsetHeight) {
        widgetArea.classList.add('fixed');
    }

    else {
        widgetArea.classList.remove('fixed');
    }
}

window.addEventListener('resize', updateWidgetAreaClassList, false);

---

Solution via CSS @media query:

If .sidebar has a fixed height of 400px (for example), the CSS @media query would be the following:

@media screen and (min-height: 401px ) {

#widget-area { [... STYLES HERE...] }

}

Answer 3

Create a function for manipulating your dom in your case add and remove classes. And call that funciton in document.ready function and window.resize function. See below a working example

http://codepen.io/harishgadiya/pen/VpNXmB

HTML

<div id="wrapper"></div>

css

#wrapper{
  height:300px;
  width:300px;
  background:#999
}
.red{
  background:red !important;

}

JS

function resize(){
  var windowHeight = $(window).height();
  var wrapperHeight = $('#wrapper').height();
  console.log(windowHeight , wrapperHeight)
  if(windowHeight > wrapperHeight) $('#wrapper').addClass("red");
  else $('#wrapper').removeClass("red");
}
$(document).ready(function(){
  resize()
});

$(window).resize(resize)

Answer 4

Though I've seen in an answer above $(window).on('load resize', function(){.. which should do the job you can also do something like this:

 var handleResize = function(){ if (($(window).height()) > $(".sidebar").height()) { $("#widget-area").addClass("fixed"); } else { //some other thing } } $(document).ready(function(){ handleResize(); }) $(window).on('resize', function(){ handleResize(); }); 

Answer 5

Go for media query
@media only screen and (max-height: 500px) {

.fixed :100px;



}