Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adding of the files

  • Loading branch information...
commit 28530eefc310c7dd3328a8bb2d1eeb981aa4229c 0 parents
scottjehl authored
11 README.md
@@ -0,0 +1,11 @@
+# jQuery Mobile Fixed Toolbar Legacy Polyfill
+
+Brings support to browsers that don't natively support position:fixed (like iOS4)
+
+- Copyright 2012 Filament Group, Inc.
+- License Dual MIT or GPLv2
+- Author @scottjehl, Filament Group, Inc.
+
+## Usage
+
+Include `jquery.mobile.fixedToolbar.polyfill.css` and `jquery.mobile.fixedToolbar.polyfill.js` just after your jQuery and jQuery Mobile references, in the head of your document. Note that the JS for this fix must be included just after jQuery Mobile itself, so that it can execute before toolbars are initialized.
239 index.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Fixed Toolbars Legacy Polyfill</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
+ <link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
+ <script src="jquery.mobile.fixedToolbar.polyfill.js"></script>
+</head>
+
+<body>
+
+<div data-role="page">
+
+ <div data-role="header" data-position="fixed">
+ <h1>Fixed Toolbar Legacy Polyfill</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+
+ <p>This page includes code for legacy support for jQuery Mobile Fixed Toolbars. <a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">Project site here</a>.</p>
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+ display: block;
+ width: 300px;
+ height: 80px;
+}
+</code></pre>
+
+
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-position="fixed">
+ <p>Footer content goes here...</p>
+ </div><!-- /footer -->
+
+</div><!-- /page -->
+
+</body>
+</html>
16 jquery.mobile.fixedToolbar.polyfill.css
@@ -0,0 +1,16 @@
+/*!
+ jQuery Mobile fixedtoolbar polyfill for blacklisted browsers that don't natively support position:fixed
+ Author @scottjehl
+ Copyright 2012 Filament Group, Inc.
+ License Dual MIT or GPLv2
+*/
+.ui-fixed-faux.ui-header-fixed,
+.ui-fixed-faux.ui-footer-fixed {
+ position: absolute;
+}
+.ui-header-fixed.ui-fixed-hidden.ui-fixed-faux {
+ top: 0 !important;
+}
+.ui-footer-fixed.ui-fixed-hidden.ui-fixed-faux {
+ bottom: 0 !important;
+}
88 jquery.mobile.fixedToolbar.polyfill.js
@@ -0,0 +1,88 @@
+/*!
+ jQuery Mobile fixedtoolbar polyfill for blacklisted browsers that don't natively support position:fixed
+ Author @scottjehl
+ Copyright 2012 Filament Group, Inc.
+ License Dual MIT or GPLv2
+*/
+(function( $, undefined ) {
+
+ // If the supportBlacklist is returning true, it's a blacklisted browser.
+ if( $.mobile.fixedtoolbar.prototype.options.supportBlacklist() ){
+
+ // Keep a reference to the original _create method
+ var oldcreate = $.mobile.fixedtoolbar.prototype._create,
+
+ // Additional scripting to add to the _create method for polyfilling unsupported browsers
+ createPolyfill = function(){
+
+ if( this.options.polyfillSupport === true ){
+
+ var toolbar = this.element,
+ tbType = toolbar.hasClass( "ui-header-fixed") ? "header" : "footer",
+ page = toolbar.closest( ":jqmData(role='page')" );
+
+ // Add faux support class to toolbar
+ toolbar.addClass( "ui-fixed-faux" );
+
+ // set up a function that resets the top or bottom value, depending on toolbar type
+ var resetPos = (function(){
+ if( tbType === "header" ){
+ return function(){
+ toolbar.css( "top", $( window ).scrollTop() + "px" );
+ };
+ }
+ else {
+ return function(){
+ toolbar.css( "bottom", $.mobile.activePage.height() - $( window).scrollTop() - $.mobile.getScreenHeight() + "px" );
+ }
+ }
+ })();
+
+ // Per page show, re-set up the event handling
+ page.bind( "pagebeforeshow", function( e ){
+ var visible;
+
+ // Normalize proper object for scroll event
+ ( ( $( document ).scrollTop() === 0 ) ? $( window ) : $( document ) )
+ .bind( "scrollstart.fixedtoolbarpolyfill", function(){
+ visible = toolbar.not( ".ui-fixed-hidden" ).fixedtoolbar( "hide", true );
+ })
+ .bind( "scrollstop.fixedtoolbarpolyfill", function(){
+ resetPos();
+ visible.fixedtoolbar( "show" );
+ });
+
+ // on resize, reset positioning
+ $( window ).bind( "throttledresize.fixedtoolbarpolyfill", resetPos );
+
+ // on pagehide, unbind the event handlers
+ page.one( "pagehide", function(){
+ $( this ).add( this ).add( document ).unbind( ".fixedtoolbarpolyfill" );
+ });
+
+ // align for pageshow
+ resetPos();
+ });
+ }
+ };
+
+ // Set the blacklist test return false, letting any normally-blacklisted browsers in to be polyfilled
+ $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
+ return false;
+ };
+
+ // Define a new option for polyfillSupport, which can be disabled per call or via data attr data-polyfill-support
+ $.mobile.fixedtoolbar.prototype.options.polyfillSupport = true;
+
+ // Overwrite the _create method with the old and the new
+ $.mobile.fixedtoolbar.prototype._create = function(){
+
+ // Call the old _create method.
+ oldcreate.call( this );
+
+ // Call the polyfill scripting
+ createPolyfill.call( this );
+ };
+ }
+
+})( jQuery );
Please sign in to comment.
Something went wrong with that request. Please try again.