How can I add or remove classes based on browser resizing using jquery?
I would like to know if there is a way to add or remove classes based on browser height. Right now, I am comparing the div to the browser height and adding a class to it if the browser height is higher than the div height, doing this:
if (($(window).height()) > $(".sidebar").height()) {
$("#widget-area").addClass("fixed");
} else {
}
This works because the class is added when the condition is met. The problem is that if the user resizes the browser, the added class will be added even if the condition is no longer met.
Is there a way to listen to the browser height and add or remove this class regardless of whether the browser is subsequently resized?
EDIT:
I know many of you might suggest doing this with media queries, but I need this to be done with jQuery.
I added the window to the resize function as suggested. The problem is that the script will only be executed if the browser is resized. I need it to run as soon as the document is ready and also the browser resizes. Here is my code:
$(window).on('resize', function(){
if (($(window).height()) > $(".sidebar").height()) {
$("#widget-area").addClass("fixed");
} else {
}
});
source to share
$(window).resize(function(){
if ($(window).height() > $(".sidebar").height())
$("#widget-area").addClass("fixed");
else
$("#widget-area").removeClass("fixed");
});
Also, if you want to run the code on page load, use .on()
and add two event handlers to it.
$(window).on('load resize', function(){
if ($(window).height() > $(".sidebar").height())
$("#widget-area").addClass("fixed");
else
$("#widget-area").removeClass("fixed");
});
See the code result in the demo
source to share
Solution via javascript:
If it .sidebar
has dynamic height, here's 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 with CSS query @media
:
If .sidebar
has a fixed height 400px
(for example), the CSS query @media
would be as follows:
@media screen and (min-height: 401px ) {
#widget-area { [... STYLES HERE...] }
}
source to share
Create a function to manage your dom in your case, add and remove classes. And call it funciton in document.ready and window.resize function. Below is 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)
source to share
While I saw in the answer above $(window).on('load resize', function(){..
that 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();
});
source to share