Giter VIP home page Giter VIP logo

foundationstickyfooter's People

Contributors

coreysyms avatar nusserstudios avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

foundationstickyfooter's Issues

Not on working mode

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

Not working

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?

only works after initial page load or page refresh (possible duplicate of #20)

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

Infinite loop in IE10

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

better instructions?

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?

Apply only to last footer

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!

white space at the bottom

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/

No zepto support

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.

Mutation Observer Error and Floating Footer

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!

Hard to use inspect element in google chrome

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?

Not working for me with Foundation 5.5.3

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.

footer appears in the default position and then flashes to the bottom

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.

white space (again)

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

I get a javascript error...

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

Can't make this 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

IE 8?

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

Listeners for DOM changes added

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.

Can't Scroll to Bottom

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.