jquery.mobile.iscroll.js

/*
 * jQuery Mobile in a iScroll plugin
 * Copyright (c) Kazuhiro Osawa
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * dependency: iScroll 3.7.1 http://cubiq.org/iscroll
 */
/*

-head1 name

iPhone like 'position fixed' header/footer manager

=head1 EXAMPLE

<div data-role="page" data-iscroll="enable" id="index">
  <div data-role="header">
    <h1>INDEX PAGE</h1>
  </div>

  <div data-role="content">
	<div data-iscroll="scroller">
      some contents.
    </div>
  </div>

  <div data-role="footer" class="ui-bar">
	<div data-role="navbar" class="ui-navbar">
	  <ul class="ui-grid-b">
	    <li class="ui-block-a"><a href="#home">home</a></li>
	    <li class="ui-block-a"><a href="#timeline">timeline</a></li>
	    <li class="ui-block-a"><a href="#message">message</a></li>
	    <li class="ui-block-a"><a href="#bookmark">bookmark</a></li>
	    <li class="ui-block-a"><a href="#config">config</a></li>
	  </ul>
	</div>
  </div>
</div>


=cut

 */
(function($) {
$(function() {

var SafariWindowHeightFix = 34; // XXX:

function fixed(elm) {
	if (elm.data("iscroll-plugin")) {
		return;
	}

	// XXX: fix crumbled css in transition changePage 
	// for jquery mobile 1.0a3 in jquery.mobile.navigation.js changePage
	//  in loadComplete in removeContainerClasses in .removeClass(pageContainerClasses.join(" "));
	elm.css({
		overflow: 'hidden'
	});

	var barHeight = 0;
	var $header = elm.find('[data-role="header"]');
	if ($header.length) {
		$header.css({
			"z-index": 1000,
			padding: 0,
			width: "100%"
		});
		barHeight += $header.height();
	}

	var $footer = elm.find('[data-role="footer"]');
	if ($footer.length) {
		$footer.css({
			"z-index": 1000,
			padding: 0,
			width: "100%"
		});
		barHeight += $footer.height();
	}

	var $wrapper = elm.find('[data-role="content"]');
	if ($wrapper.length) {
		$wrapper.css({
			"z-index": 1
		});
		$wrapper.height($(window).height() - barHeight - SafariWindowHeightFix);
		$wrapper.bind('touchmove', function (e) { e.preventDefault(); });
	}

	var scroller = elm.find('[data-iscroll="scroller"]').get(0);
	if (scroller) {
		var iscroll = new iScroll(scroller, {desktopCompatibility:true});
		elm.data("iscroll-plugin", iscroll);
	}
}
$('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() {
	fixed($(this));
});
if ($.mobile.activePage.data("iscroll") == "enable") {
	fixed($.mobile.activePage);
}

});
})(jQuery);