jquery-mobile/js/jQuery.mobile.fixHeaderFooter.js

/*
* jQuery Mobile Framework : prototype for "fixHeaderFooter" plugin - on-demand positioning for headers,footers
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change 
*/
(function($){
$.fn.fixHeaderFooter = function(options){
	return $(this).each(function(){
		$(this).find('.ui-header').addClass('ui-header-fixed fade'); //should be slidedown
		$(this).find('.ui-footer').addClass('ui-footer-fixed fade'); //should be slideup		
	});
};				

//single controller for all showing,hiding,toggling		
$.fixedToolbars = (function(){
	var currentstate = 'inline',
		showAfterScroll = false,
		delayTimer,
		ignoreTargets = 'a,input,textarea,select,button,label,.ui-header-fixed,.ui-footer-fixed';

	$(function() {
		$(document)
			.bind('tap',function(e){
				if( !$(e.target).closest(ignoreTargets).length ){
					$.fixedToolbars.toggle();
				}
			})
			.bind('scrollstart',function(){
				if(currentstate == 'overlay'){
					showAfterScroll = true;
					$.fixedToolbars.hide(true);
				}
			})
			.bind('scrollstop',function(){
				if(showAfterScroll){
					showAfterScroll = false;
					$.fixedToolbars.show();
				}
			});

		$(window).bind('resize orientationchange', function(){ $.fixedToolbars.hide(true); });	
	});
	
	function setTop(el){
		var fromTop = $(window).scrollTop(),
			thisTop = el.offset().top,
			thisCSStop = parseFloat(el.css('top')),
			screenHeight = window.innerHeight,
			thisHeight = el.outerHeight();

		return el.css('top', el.is('.ui-header-fixed') ? fromTop - thisTop + thisCSStop : -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight) );
	}

	//exposed methods
	return {
		show: function(){
			currentstate = 'overlay';
			return $('.ui-header-fixed,.ui-footer-fixed').each(function(){
				var el = $(this),
					fromTop = $(window).scrollTop(),
					thisTop = el.offset().top,
					screenHeight = window.innerHeight,
					thisHeight = el.outerHeight(),
					alreadyVisible = (el.is('.ui-header-fixed') && fromTop <= thisTop + thisHeight) || (el.is('.ui-footer-fixed') && thisTop <= fromTop + screenHeight);	
					
				if( !alreadyVisible ){
					el.addClass('in').animationComplete(function(){
						el.removeClass('in');
					});
					setTop(el);
				}
			});	
		},
		hide: function(immediately){
			currentstate = 'inline';
			return $('.ui-header-fixed,.ui-footer-fixed').each(function(){
				var el = $(this);
				if(immediately){
					el.css('top',0);
				}
				else{
					if( el.css('top') !== 'auto' && parseFloat(el.css('top')) !== 0 ){
						var classes = 'out reverse';
						el.addClass(classes).animationComplete(function(){
							el.removeClass(classes);
							el.css('top',0);
						});	
					}
				}
			});
		},
		hideAfterDelay: function(){
			delayTimer = setTimeout(function(){
				$.fixedToolbars.hide();
			}, 3000);
		},
		toggle: function(){
			return (currentstate == 'overlay') ? $.fixedToolbars.hide() : $.fixedToolbars.show();
		}
	};
})();

})(jQuery);