Skip to content

Instantly share code, notes, and snippets.

@HansCz
Created January 20, 2011 01:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HansCz/787234 to your computer and use it in GitHub Desktop.
Save HansCz/787234 to your computer and use it in GitHub Desktop.
I've wrapped your code in a plugin. Hope it's useful.
Usage:
In your HTML, an element that you want to act as footer (ex. #footer), an element to act as trigger (ex. #trigger) are assumed.
apart from this html file, you'll need to include my snippet somehow, and also bind it to your footer element.
Here is an example illustrating the interdependent code bits:
Files:
----------------
| index.html
| footer_toggle.js
| application.js
index.html:
----------------
<body>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="footer_toggle.js"></script>
<script src=application.js"></script>
</head>
<body>
.
.
.
<div id="trigger">
<p>About</p>
</div>
.
.
.
<div id="footer">
<p>I am a footer</p>
</div>
.
.
.
</body>
</html>
footer_toggle.js:
----------------
(function( $ ){
$.fn.footerToggle = function( method ) {
var methods = {
init : function( options ) {
var settings = {
'speed' : 200,
'footer_element' : $(this),
'button' : $('#about_button')
};
if ( options ) {
$.extend( settings, options );
}
return this.each(function() {
var $this = $(this);
var slide = false;
var height = settings['footer_element'].outerHeight();
settings['button'].click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
settings['footer_element'].animate({ height: "toggle"}, settings['speed']);
if(slide == false) {
if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
$('html').animate({scrollTop: scrollPos+'px'}, settings['speed']);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, settings['speed']);
}
slide = true;
} else {
slide = false;
}
});
});
}
};
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.footerToggle' );
}
};
})( jQuery );
application.js
----------------
jQuery(function($) {
$('#footer').footerToggle({'button' : $('#trigger')});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment