Icontem

JavaScript Sticky Footer: Make a HTML section stick to the footer of a page

Recommend this page to a friend!
     
  Info   View files Example   Screenshots Screenshots   View files View files (5)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2016-12-15 (19 hours ago) RSS 2.0 feedNot enough user ratingsTotal: 151 This week: 14All time: 308 This week: 2Up
Version License JavaScript version Categories
sticky-footer 1.0.0BSD License1.0HTML, jQuery
Description Author

This is a jQuery plugin that can make a HTML section stick to the footer of a page.

It takes a given page element and adjust its positioning parameters so it always appears fixed relatively to the bottom of the page.

Innovation Award
JavaScript Programming Innovation award nominee
December 2015
Number 3		 Some times it is necessary to show information to the user in a way that he notices it better. Showing that information in footer that is is a fixed position attached to the bottom of the page could be one way to make the user notice it.

This jQuery plugin can make page section be attached to the bottom of the pages.

Manuel Lemos
  Performance   Level  
Name: Christian Vigh <contact>
Classes: 7 packages by
Country: France France

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 4x

Winner: 2x

Details

INTRODUCTION

StickyFooter is a small jQuery component that helps html contents to stick to the bottom of the browser window, when the inner html page content are smaller than the browser window size.

As an example, this is useful for displaying the traditional "contact me - legal mentions" and other stuff that we all like to see at the end of the pages we visit...

But please keep this strongly in mind : the footer will appear at the bottom of the browser window only if the height of the html page displayed is less than the height of the browser window. Should the html page be taller, the footer will appear outside of the screen and you will have to scroll down in the browser window to make it appear. This, definitely, is not a bug but my intended way of doing it...

EXAMPLE

The following example shows a short html page ending with "* END OF PAGE*" ; the background of the <body> element has been set to have a linear color gradient, AND sticky footer is NOT enabled :

Without sticky footer

If you maximize your browser window, you will notice that the color gradient is repeated several times vertically ; by enabling the stickyFooter on your footer htlm contents, you will see :

With sticky footer

Notice now that the color gradient is spreading the whole window.

HOW TO USE IT ?

This is really simple ; first, include jQuery :

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

Then include the stickyfooter source :

<script language="javascript" type="text/javascript" src="thrak.ui.stickyfooter-1.0.0.js"></script>

Put in your page body the html code that represents your footer (it is simpler to enclose it within a div element) :

	<div id="stickyfooter">
		<hr />
		Contact us...
	</div>

Finally, call the stickyFooter() function after your page has been loaded, on the html element(s) you declared in the previous step :

<script type="text/javascript">
$(document). ready
   (
		function ( )
		   {
				$('#stickyfooter'). stickyFooter ( ) ;
    	    }
    ) ;
</script>

HOW DOES IT WORK ?

Well, there is no magic in that.

The top margin of your footer (identified by id="stickyfooter" in the above example) will be adjusted if the html page height is less than the browser window height, so that the footer will appear to "stick" to the bottom of the window. This remains true even if you change the window size, since the stickyfooter component handles window resize events.

Adversely, the margin of your footer html code ('#stickyfooter' in the above example) will be set to 0 if your page is longer than the browser's window height. The footer will now appear, not at the bottom of the window, but at the bottom of the page and you will have to scroll down to make it visible.

CAN I MODIFY THIS BEHAVIOR DYNAMICALLY ?

Do you mean "Can I enable then disable stickyfooter dynamycally without reloading the page ?"...

Well, if you want an answer to that question, ask it to someone else but not me...

If you want a quick glance at what might happen for example if you enable the stickyfooter AFTER the page has been loaded, have a look at the following screen shot :

Sticky footer enabled after page loading

Noticed how the color gradient appears twice this time ?

However, if you have a solution or explanation for this, feel free to contact me at christian.vigh@orange.fr !

Screenshots  
  • images/without-sticky-footer.png
  • images/with-sticky-footer.png
  • images/stickyfooter-after-page-load.png
  Files folder image Files  
File Role Description
Accessible without login Plain text file index.html Example Demo file
Accessible without login Plain text file LICENSE Lic. License file
Accessible without login Plain text file NOTICE Data Notice
Accessible without login Plain text file README.md Doc. Documentation
Plain text file thrak.ui.stickyfooter-1.0.2.js Class Class file

Downloadsticky-footer-2016-12-15.zip 305KB
Downloadsticky-footer-2016-12-15.tar.gz 304KB
Install with ComposerInstall with Composer
 Version Control Unique User Downloads Download Rankings  
 0%
Total:151
This week:14
All time:308
This week:2Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.