FaizVisram/floating_footer.js

## floating_footer.js
// Set the footer location to the absolute bottom of the page.
function setFooter() {
	if ($(window).height() < $('body').height()) {
		$('footer').removeClass('fixed');
	} else {
		$('footer').addClass('fixed');
	}
}

// reset the footer when the window is resized
$(window).resize(function() {
	setFooter();
});
// display and set the location of the footer after the document has finished loading
$(window).load(function() {
	setFooter();
	$('footer').removeClass('preload');
});

## index.html
<!DOCTYPE HTML>
<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	</head>
	<body>
		<footer class="preload">
			<!-- footer content here -->
			<script src="floating_footer.js" type="text/javascript"></script>
    		</footer>
	</body>
</html>

## style.css
footer.fixed {
	position: absolute;
	bottom: 0;
}

footer.preload {
	display: none;
}
	// Set the footer location to the absolute bottom of the page.
	function setFooter() {
	if ($(window).height() < $('body').height()) {
	$('footer').removeClass('fixed');
	} else {
	$('footer').addClass('fixed');
	}
	}

	// reset the footer when the window is resized
	$(window).resize(function() {
	setFooter();
	});
	// display and set the location of the footer after the document has finished loading
	$(window).load(function() {
	setFooter();
	$('footer').removeClass('preload');
	});
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	</head>
	<body>
	<footer class="preload">
	<!-- footer content here -->
	<script src="floating_footer.js" type="text/javascript"></script>
	</footer>
	</body>
	</html>
	footer.fixed {
	position: absolute;
	bottom: 0;
	}

	footer.preload {
	display: none;
	}