coreysyms / foundationstickyfooter Goto Github PK

Solution: sticky_footer.js file
Replace line 31, ' window.onload = function() {'
to '$(window).load(function() {'
and also replace ' } ' to ' });' on line 40.

This little fix will make it work.

Hi!
I've tried your script at the top of my page inside and get this error:
stickyFooter.js?ver=4.6.1:114 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.(…)stickyFooter @ stickyFooter.js?ver=4.6.1:114window.onload @ stickyFooter.js?ver=4.6.1:33
I've also tried to put it in the end of dom just before </body> - then no error. In both cases window.onload in my custom.js won't fire...but the sticky footer work in both scenarios.

Any idea what might cause this problem?

Best, Niklas

Have been tearing my hair out trying every conceivable variation of sticky footers. Yours is the only one that works, but still not 100% as there's a big block of white beneath the footer. Would very much appreciate any advice as I cannot make sense of this:

http://resonate.is/journey/

It's not clear how to install this really. It's also not clear if this is different on Foundation 5. All it says is 'It works great!..' For example, I managed to install this, but I didnt need ANY of the zepto/jquery into between the first <script> tags. Should these scripts go in the header, before you close body, at the footer? I know it says 'no more Zepto!' below, but what does that even mean in terms of installation?

I just try your code it does not look like what I want and even it require more dependency.
So please update readme.

Unfortunately Foundation uses 100% height on body since 5.1.0 which means you have to set it to auto if you want to use foundationStickyFooter.

I've been trying to get som answers in foundation/foundation-sites#4474 (comment) to why they think it is needed (code change says Must be 100% for off cavas to work but my limited testing did not confirm that.

Hi!
Thanks for a great little plugin.
I get the error below but it still seems like it's working.
I'm using this with Foundation 6.

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.stickyFooter @ scripts.min.js?ver=4.4.2:153
window.onload @ scripts.min.js?ver=4.4.2:72

Please add this to bower package.

Hi I've got the same problem than the issue #13 I'm running a fresh install of foundation for sites and i still have a small white gap under my footer... when i inspect my page i can see that the script is working (it add a "style: margin-top..." on the footer tag and i've no javascript errors... but there still this gap.

http://dev.numero7.ch/bonum/

Perhaps you can help ?
thanks a lot

Dependencies:

rails 5.0.0.1
foundation-rails 6.3.0.0
Chrome Version 55.0.2883.95
macOS Sierra 10.12.3 (16D32)

Error message:

sticky_footer.self-0220658….js?body=1:114 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at stickyFooter (sticky_footer.self-0220658….js?body=1:114)
    at window.onload (sticky_footer.self-0220658….js?body=1:33)
stickyFooter @ sticky_footer.self-0220658….js?body=1:114
window.onload @ sticky_footer.self-0220658….js?body=1:33

• Scenario 1:
  Given the aforementioned dependencies
  And the user opens the app in the browser for the first time
  When the page loads
  Then the sticky footer works as expected
  And the browser js console has the aforementioned error

• Scenario 2:
  Given Scenario 1
  And the user clicks a link to load a new page
  When the new page loads
  Then the sticky footer doesn't work as expected
  And the browser js console has the aforementioned error

• Scenario 3:
  Given Scenario 2
  And the user refreshes the browser window
  When the page loads
  Then the sticky footer works as expected
  And the browser js console has the aforementioned error

It didn't work for me with Foundation 5.5.3.
I'm on Google Chrome, El Capitan 10.11.3.

So I had to tweak stickyFooter.js for my needs as following:

...
function stickyFooter() {
    ...
    var offset = window.innerHeight - document.body.offsetHeight;
    var current = getCSS("footer", "margin-top");

    // if (isNaN(current) == true) {
    //     footer.setAttribute("style","margin-top:0px;");
    //     current = 0;
    // } else {
    //     current = parseInt(current);
    // }
    current = parseInt(current);
    if (current === NaN) {
        footer.setAttribute("style","margin-top:0px;");
        current = 0;
    }

    if (current+offset > parseInt(getCSS("footer", "margin-top"))) {            
        footer.setAttribute("style","margin-top:"+(current+offset)+"px;");
    }
    ...
}
...

Please check the above change on your end and see if it works.

I'm using StickyFooter in Foundation 5 and have made the needed adjustments for proper rendering in IE8 (Foundation ie8.css & rem.js).

The remaining hurdle is StickyFooter, which doesn't seem to work in IE8, or at least in my implementation. The errors are:

'MutationObserver' is undefined
'observer' is null or not an object

Is it possible to rectify the problem?

Thanks,

Brian

Hi!

I am having a similar issue to what others have had in the past it seems, but I still can't find a fix to work for my site. The code for my sticky footer is at the bottom of my main JS file and looks like this:

var MutationObserver = (function () {
	var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
		for (var i=0; i < prefixes.length; i++) {
			if (prefixes[i] + 'MutationObserver' in window) {
				 return window[prefixes[i] + 'MutationObserver'];
			}
		}
		return false;
}());

window.onload = function() {
	stickyFooter();

	if (MutationObserver) {
  		observer.observe(target, config);
	} else {
		//old IE
  		setInterval(stickyFooter, 500);
	}
};

//check for changes to the DOM
var target = document.body;
var observer;
var config = { attributes: true, childList: true, characterData: true, subtree:true };

if (MutationObserver) {
	// create an observer instance
	observer = new MutationObserver(mutationObjectCallback);
}

function mutationObjectCallback(mutationRecordsList) {
	stickyFooter();
}


//check for resize event
window.onresize = function() {
	stickyFooter();
};

//lets get the marginTop for the <footer>
function getCSS(element, property) {

  var elem = document.getElementsByTagName(element)[0];
  var css = null;

  if (elem.currentStyle) {
    css = elem.currentStyle[property];

  } else if (window.getComputedStyle) {
	css = document.defaultView.getComputedStyle(elem, null).
	getPropertyValue(property);
  }

  return css;

}

function stickyFooter() {
	if (MutationObserver) {
		observer.disconnect();
	}
	document.body.setAttribute("style","height:auto");

	//only get the last footer
	var footer = document.getElementsByTagName("footer")[document.getElementsByTagName("footer").length-1];

	if (footer.getAttribute("style") !== null) {
		footer.removeAttribute("style");
	}

	if (window.innerHeight != document.body.offsetHeight) {
		var offset = window.innerHeight - document.body.offsetHeight;
		var current = getCSS("footer", "margin-top");

		if (isNaN(parseInt(current)) === true) {
			footer.setAttribute("style","margin-top:0px;");
			current = 0;
		} else {
			current = parseInt(current);
		}

		if (current+offset > parseInt(getCSS("footer", "margin-top"))) {
			footer.setAttribute("style","margin-top:"+(current+offset)+"px;");
		}
	}

	document.body.setAttribute("style","height:100%");

	//reconnect
	if (MutationObserver) {
		observer.observe(target, config);
	}
}

The code in my html for my footer is this:

<footer class="page text-center">
  <div class="row">
    <div class="medium-12 columns">
      <span class="copyright">&copy;{{ current_date format="Y" }} Sq1</span>
    </div>
  </div>
</footer>

For whatever reason I am getting this error:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at stickyFooter (app-min.js:1)
    at window.onload (app-min.js:29)

Despite this, the sticky footer seems to be initializing to some extent - it just isn't quite at the bottom of the page. Help would be appreciated! Thanks!

If the browser has a change to the DOM, say an element is deleted from the DOM the sticky footer will respond to the respective changes if a change in body height is the product of said changes.

Hiya, do you know if there's any reason why this is working on my local server but not when it's live here: http://wellmadestudio.com/sites/quastel/family.html

On my local version there is a 40px margin underneath when there isn't much page content.

On the latest Foundation, when you close the alert footer moves up.
Look http://clarionlife.net/F5/
How to beat the problem?

Hi!
There is, when I already have a 100% height of body & html tags, lots extra space underneeth the footer which is scrollable. I alse get this js-error:
scripts.js?ver=4.6.1:125 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at stickyFooter (http://localhost:3000/bms/wp-content/themes/bmstema/scripts.js?ver=4.6.1:125:12) at window.onload (http://localhost:3000/bms/wp-content/themes/bmstema/scripts.js?ver=4.6.1:176:2)stickyFooter @ scripts.js?ver=4.6.1:125window.onload @ scripts.js?ver=4.6.1:176

Any idea what's going on?

I appreciate your script. I've used it on a couple of projects. With the latest project I'm working on, I encountered the same issue as @peteratomic in #13. So I got rid of all other instances of footer tags in my templates and it fixed the problem. However, since with HTML5 you can have multiple footer tags on a page, is there a way that you can configure your script to apply only to the last footer on a page? Thanks!

Hello,

I'm attempting to implement the sticky footer with Foundation 5 and I'm running into the following problem: The footer is pushed below the visible area and while scrolling will reveal it, it's not possible to get to the bottom ("bounces" back up). It should be noted that this will only occur when viewing a page that requires the footer to be pushed to the bottom of the page.

Example here //link removed

Any suggestions would be greatly appreciated, thanks!

The default foundation docs include both zepto and jquery support, so out of the box so to speak, this breaks with the foundation templates as it relies on jquery.

Now uses jQuery.support for feature detection of mutation events. Now catches events bubbling by use of jQuery.support.leadingWhitespace to feature detect IE version 6,7,8.

Shout out to Matias Sebastian for the catch.

website hangs after loading a page in ie9 and ie10. Any suggestions?

A little annoying thing I found with this script is that it makes it really hard to edit any element via inspect element. This apparently only happens in google chrome. Can this be fixed?

For pages with not enough content the footer appears where the page ends (the NOT sticky position) and then flashes and appears at the bottom of the page. I've tried moving StickyFooter.js and putting it before jquery, before foundation, in the header, I don't see any way to get the footer to be at the bottom BEFORE painting the page to screen which is rather unprofessional looking.

The event binding on DomSubtreeModified appears to cause an infinite loop in IE10.