I am using bootstrap and I like it’s Accordion fixed footer. But then I saw something really awesome in http://downtothewire.co.nz/ . A footer that would expand when clicked as well as expand when reach the bottom of the page - so it doesn’t seem odd to just see the clickable footer. This was realized by looking at the following stackoverflow question- http://stackoverflow.com/questions/22910374/fixed-footer-that-expands-when-scrolled-to-bottom-of-page .
I tried to download and see using the stackoverflow website as well as checking the code in downtothwire.co.nz but could get it to work. Even the jsfiddle from the stackoverflow.com question is not working. So something may have changed. Can somebody look at https://github.com/ark1/Sticky-Footer-jQuery-Plugin and the downtothewire site and point me in the right direction. Of if there is another script that does this I’d appreciate it
PaulOB
April 27, 2015, 8:34am
2
It’s working in Firefox but chrome has an issue with the mime type. If you copy the code locally it works.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#Container {
height:1000px;
}
.liner {
margin:0 auto;
width:960px;
}
#Footer {
width: 100%;
z-index:100;
position:relative;
overflow: hidden;
background:red;
}
#Footer p {
height:300px;
}
}
</style>
</head>
<body>
<div id="Container" class="liner">
<p>Main content</p>
</div>
<div id="Footer">
<div class="liner">
<p>Footer content</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/*
*
* Copyright (c) 2009 Heyday (dev [at] heyday [dot] co [dot] nz)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license
*
*/
/**
*
* @name jquery.heyday.stickyfooter
* @version 1.0
* @author Shane Garelja (shane [at] heyday [dot] co [dot] nz)
* @requires jQuery
*
*/
/*
* Sticky footer plugin for jQuery
Minimum CSS:
.liner {
margin:0 auto;
width:960px;
}
#Footer {
width: 100%;
z-index:100;
position:relative;
overflow: hidden;
}
Ideal markup example:
<body>
<div id="Container" class="liner">
<p>Main content</p>
</div>
<div id="Footer">
<div class="liner">
<p>Centred footer content</p>
</div>
</div>
</body>
Example usage:
$('#Footer').stickyfooter();
*/
;(function ($) {
$.fn.stickyfooter = function (options) {
// Settings
var settings = $.extend(
{
// Height in pixels of drawer in "closed" state
visible: 60,
// ID of toggle element that opens/closes drawer
toggleCSSSelector: '#Toggle',
// Class added to toggle to indicate it it open/closed
drawerOpenCSSClass: 'open',
// Callback to set toggle state to inactive
inactiveToggle_Callback: function() {
$(settings.toggleCSSSelector).animate({'opacity':'0.2'});
},
// Callback to set toggle state to active
activeToggle_Callback: function() {
$(settings.toggleCSSSelector).animate({'opacity':'1.0'});
},
// Callback to add class to toggle to indicate open state
drawerOpen_Callback: function() {
$(settings.toggleCSSSelector).addClass(settings.drawerOpenCSSClass);
},
// Callback to add class to toggle to indicate closed state
drawerClosed_Callback: function() {
$(settings.toggleCSSSelector).removeClass(settings.drawerOpenCSSClass);
}
}, options ),
// Global vars
$window = $(window),
$footer = $(this),
_drawerOpen = false,
// Functions
setFooterPos = function(firstRun) {
var footerTopPos = ($footer.height()) * -1,
availableHeight = $(document).height() - $window.height(),
kickInPos = $window.scrollTop() + $footer.height() - settings.visible;
// Set to pos fixed bottom if content less than window height
if ((availableHeight <= 0)) {
$footer.stop().css({position: 'fixed', left: '0px', bottom: 0});
settings.inactiveToggle_Callback();
} else {
// Set to pos relative if footer visible
if ((availableHeight <= kickInPos) && ($footer.css('position') != 'relative' || firstRun)) {
$footer.stop().css({position: 'relative', bottom: 'auto'});
settings.inactiveToggle_Callback();
// Set to pos fixed if footer NOT visible
} else if ((availableHeight > kickInPos) && ($footer.css('position') != 'fixed' || firstRun)) {
if (firstRun) {
$footer.stop().css({position: 'fixed', left: '0px', bottom: footerTopPos}).animate({'bottom': footerTopPos + settings.visible})
} else {
$footer.stop().css({position: 'fixed', left: '0px', bottom: footerTopPos + settings.visible});
}
settings.activeToggle_Callback();
}
}
};
return this.each(function() {
if (($.browser.msie && $.browser.version <= 6) || navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
// Not supported
} else {
$footer.wrap('<div></div>').parent().css({'width': '100%', 'height':$footer.height()});
$window.bind('scroll.stickyfooter resize.stickyfooter', function () {
if (!_drawerOpen) setFooterPos(false);
});
$(settings.toggleCSSSelector).bind('click', function(e) {
e.preventDefault();
if ($footer.css('position') != 'relative') {
if (_drawerOpen) {
$footer.stop().animate({ bottom:
Math.min(
$footer.height() - settings.visible,
$(document).height() - $window.height() - $window.scrollTop()
) * -1 });
settings.drawerClosed_Callback();
_drawerOpen = false;
} else {
$footer.stop().animate({bottom: $footer.height() - $footer.height()});
settings.drawerOpen_Callback();
_drawerOpen = true;
}
}
});
setFooterPos(true);
}
});
};
})(jQuery);
</script>
<script>
$(function() {
console.log('do footer');
$('#Footer').stickyfooter();
});
</script>
</body>
</html>
Hey. Thanks for this. It’s working. How come it wasn’t working before.
PaulOB
April 28, 2015, 11:22am
4
I think it was just not working in the fiddle because of mime type restrictions or maybe https restrictions.
Chrome shows his error on the console on that fiddle.
Refused to execute script from ‘https://raw.githubusercontent.com/ark1/Sticky-Footer-jQuery-Plugin/master/jquery.heyday.stickyfooter.js ’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.
Ok cool. One last question. I was wondering how to reduce the size of the visible footer. I tried to mess with the css but couldn’t make it any smaller. Any help here will be greatly appreciated.
PaulOB
April 28, 2015, 3:55pm
6
Hi,
If you mean the height of the sticky portion of the footer then that is controlled in the JS settings here.
// Height in pixels of drawer in "closed" state
visible: 60,
It;s set at 60 so just change it to what you need.
The height of the footer itself is set in the css here:
#Footer p {
height:300px;
}
But generally you would not want a fixed height at all and just let the content dictate the height or use a min-height.
thanks. i wasn’t able to find the javascript. since there was so much to sift through
PaulOB
April 28, 2015, 7:15pm
8
It’s just a few lines from the top of the file.
;(function ($) {
$.fn.stickyfooter = function (options) {
// Settings
var settings = $.extend(
{
// Height in pixels of drawer in "closed" state
visible: 60,
um. so now that we have an answer, how do we mark this resolved
PaulOB
April 29, 2015, 12:06pm
11
You just did
In most cases there is no need to do anything as a thread reaches its logical conclusion.
system
July 29, 2015, 7:11pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
