Created
January 20, 2011 01:21
-
-
Save HansCz/787234 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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