├── README.md
└── stickyFooter.js


/README.md:
--------------------------------------------------------------------------------
 1 | Sticky Footer
 2 | ======================
 3 | The Sticky footer will use the HTML5 tag < footer > and make it "stick" to the bottom of the page.
 4 | Simply add in < footer ></ footer > to your webpage with your desired styled content inside the < footer > tag.
 5 | You may pre-style the < footer > in your css file. 
 6 | The stiky footer will remember your original styles if the page is not long enough to "stick" to the bottom of the page! Even after resize!
 7 | There are no requirements for CSS! No 100% Body Height!
 8 | You don't need a fixed height, or a wrapper!
 9 | 
10 | It even works in mobile and tablet!
11 | 
12 | 
13 | FAQ's as they come up.
14 | =====================
15 | 
16 | <b>Q: What about HTML 5 allowing for multiple footer tags? </b>
17 | 
18 | A: Sticky Footer will only stick the last < footer > on your page.
19 | 
20 | <b>Q: Do I need to apply 100% height to my body?</b>
21 | 
22 | A: This has been changed from don't to does not matter. New sticky footer will still work with height 100%
23 | 
24 | <b>Q: How do I span the full width of the browser with my footer in Foundation?</b>
25 | 
26 | A: If you would like to have your footer span the full width of the browser, apply a style to the footer.
27 | footer { background-color:red; } 
28 | This will give you a full width bar with a background color of red.
29 | 
30 | A more robust example being a 2 column grid respecting footer with a full width bg red and a margin top of 100px when the footer is longer than the height of the page.
31 | 
32 | ```
33 | *app.css*
34 | footer { background-color:red; margin-top:100px }
35 | 
36 | *html*
37 | <footer>
38 |   <div class="row">
39 |     <div class="columns medium-6">
40 |       <p>I am the left side</p>
41 |     </div>
42 |     <div class="columns medium-6">
43 |       <p>I am the right side</p>
44 |     </div>
45 |   </div>
46 | </footer>
47 | ```
48 | 
49 | 
50 | <b>Q: Will this work with out Foundation?</b>
51 | 
52 | A: Yes! This sticky footer will work with out Foundation. I build it with Foundation in mind cause that is what I use.
53 | 
54 | 
55 | 
56 | <b>HELPERS:</b>
57 | 
58 | Please DO NOT apply any classes to the footer IE < footer class="row" > If you would like your row content to respect the grid plase place the row and column(s) inside the < footer > tag. The stickyFooter will not work proprly if you class it with foundation's grid classes.
59 | 
60 | If you would like your footer to be 'hidden' before the sticky footer 'sticks' the footer at the bottom apply an inline style on your footer tag. This will eliminate a 'jump' in the footer to the bottom of the page.
61 | ```
62 |  <footer style="visibility:hidden;">
63 |  ... your footer code ...
64 |  </footer>
65 |  ```
66 | 


--------------------------------------------------------------------------------
/stickyFooter.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * jQuery Sticky Footer 2.3
  3 |  * Corey Snyder
  4 |  * http://tangerineindustries.com
  5 |  *
  6 |  * Released under the MIT license
  7 |  *
  8 |  * Copyright 2013 Corey Snyder.
  9 |  *
 10 |  * Date: Thu Jan 22 2013 13:34:00 GMT-0630 (Eastern Daylight Time)
 11 |  * Modification for jquery 1.9+ Tue May 7 2013
 12 |  * Modification for non-jquery, removed all, now classic JS Wed Jun 12 2013
 13 |  * Modification for Foundation 5 auto height issues
 14 |  * Modification for new DOM change event listener
 15 |  * Modification for old IE mutation events, since not supported uses polling
 16 |  * 
 17 |  * March 13, 2017
 18 |  * Modification for HTML multiple <footer> tag syntax, SF should only grabbing the last <footer> on the page
 19 |  */
 20 | 
 21 | var MutationObserver = (function () {
 22 | 	var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
 23 | 		for (var i=0; i < prefixes.length; i++) {
 24 | 			if (prefixes[i] + 'MutationObserver' in window) {
 25 | 				 return window[prefixes[i] + 'MutationObserver'];
 26 | 			}
 27 | 		}
 28 | 		return false;
 29 | }());
 30 | 
 31 | window.onload = function() {
 32 | 	stickyFooter();
 33 | 
 34 | 	if (MutationObserver) {
 35 |   		observer.observe(target, config);
 36 | 	} else {
 37 | 		//old IE
 38 |   		setInterval(stickyFooter, 500);
 39 | 	}
 40 | };
 41 | 
 42 | //check for changes to the DOM
 43 | var target = document.body;
 44 | var observer;
 45 | var config = { attributes: true, childList: true, characterData: true, subtree:true };
 46 | 
 47 | if (MutationObserver) {
 48 | 	// create an observer instance
 49 | 	observer = new MutationObserver(mutationObjectCallback);
 50 | }
 51 | 
 52 | function mutationObjectCallback(mutationRecordsList) {	
 53 | 	stickyFooter();
 54 | }
 55 | 	 
 56 | 
 57 | //check for resize event
 58 | window.onresize = function() {
 59 | 	stickyFooter();
 60 | };
 61 | 
 62 | //lets get the marginTop for the <footer>
 63 | function getCSS(element, property) {
 64 | 
 65 |   var elem = document.getElementsByTagName(element)[0];
 66 |   var css = null;
 67 |   
 68 |   if (elem.currentStyle) {
 69 |     css = elem.currentStyle[property];
 70 |   
 71 |   } else if (window.getComputedStyle) {
 72 | 	css = document.defaultView.getComputedStyle(elem, null).
 73 | 	getPropertyValue(property);
 74 |   }
 75 |   
 76 |   return css;
 77 | 
 78 | }
 79 | 
 80 | function stickyFooter() {
 81 | 	if (MutationObserver) {
 82 | 		observer.disconnect();
 83 | 	}
 84 | 	document.body.setAttribute("style","height:auto");
 85 | 	
 86 | 	//only get the last footer
 87 | 	var footer = document.getElementsByTagName("footer")[document.getElementsByTagName("footer").length-1];
 88 | 			
 89 | 	if (footer.getAttribute("style") !== null) {
 90 | 		footer.removeAttribute("style");
 91 | 	}
 92 | 	
 93 | 	if (window.innerHeight != document.body.offsetHeight) {
 94 | 		var offset = window.innerHeight - document.body.offsetHeight;
 95 | 		var current = getCSS("footer", "margin-top");
 96 | 		
 97 | 		if (isNaN(parseInt(current)) === true) {
 98 | 			footer.setAttribute("style","margin-top:0px;");
 99 | 			current = 0;
100 | 		} else {
101 | 			current = parseInt(current);
102 | 		}
103 | 						
104 | 		if (current+offset > parseInt(getCSS("footer", "margin-top"))) {			
105 | 			footer.setAttribute("style","margin-top:"+(current+offset)+"px;");
106 | 		}
107 | 	}
108 | 	
109 | 	document.body.setAttribute("style","height:100%");
110 | 	
111 | 	//reconnect
112 | 	if (MutationObserver) {
113 | 		observer.observe(target, config);
114 | 	}
115 | }
116 | 
117 | /*
118 | ! end sticky footer
119 | */
120 | 


--------------------------------------------------------------------------------