Jq add/remove class based on window size

I had hoped this would work but it doesn’t. The idea is to fix #footerWrapper to the bottom of the viewport if #wrapper height is less than viewport height, else, remove the fixed declaration for #footerWrapper. This script is at bottom of HTML just above closing body tag:

    var viewportHeight = $(window).height();
	$(window).on('load, resize') {
	    if (viewportHeight > $("#wrapper").height()) {
	            $("#footerWrapper").addClass("fixed"); }
	    else {
	            $("#footerWrapper").removeClass("fixed");
	    	}
	});

CSS:

#footerWrapper {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 60px;
	margin-top: 60px;
	background-color: rgba(230, 230, 230, 1);
	border-top: 3px solid #fff;
	z-index: 999;
	}
	
.fixed {	
	position: fixed;
	left: 0;
	bottom: 0;
	}

Any help would be appreciated.

I did catch the missing right parenthasis after viewportHeight. didn’t fix it.

$(window).height() gets evaluated only once at the start of the script – move the whole declaration into the resize handler and it should work.

Sorry, I’m still a beginner. You mean like this?

$(window).on('load, resize'(){
    if ($(window).height()) > ($("#wrapper").height()) {
            $("#footerWrapper").addClass("fixed"); }
    else {
            $("#footerWrapper").removeClass("fixed");
    	}
});

This still doesn’t work, in fact, breaks other scripts.

What you are talking about here is called a sticky footer, and you don’t need jQuery to get it, there are proper CSS solutions, like http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

2 Likes

JFTR though, there’s an odd close bracket in the if statement. As a general tip, errors like this can easily be tracked with the console – in chrome you can open it with ctrl / cmd + C.

Thanks for the link Remon but there is a much better version of that over here:

It works for responsive design and accommodates a fluid height footer automatically.

As you say there is no need for JS for this.

4 Likes

The console just says missing ) after argument list. I can’t figure out where it’s missing.

That’s brilliant, PaulOB, thanks! I wish I could figure out how to write that js code though just for my own education.

Js isn’t my thing but I think it should be like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
#wrapper {
	background:red;
	padding:5px;
}
#footerWrapper {
	background:blue;
	padding:5px;
}
.fixed {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
}
p{margin:0 0 1em}
</style>
</head>

<body>
<div id="wrapper">
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper </p>
  <p>Wrapper last</p>
</div>
<div id="footerWrapper"> footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer </div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!-- keep script at end of html --> 
<script>
$(window).on("resize", function () {
   
   if ($(window).height() > $("#wrapper").outerHeight() + $("#footerWrapper").outerHeight() ) {
            $("#footerWrapper").addClass("fixed"); }
    else {
            $("#footerWrapper").removeClass("fixed");
    	}
// Invoke the resize event immediately
}).resize();
</script>
</body>
</html>
1 Like

Yes, thanks PaulOB, that works.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.