Created
March 12, 2012 09:32
-
-
Save scottjehl/2020916 to your computer and use it in GitHub Desktop.
jQuery Mobile FixedToolbar Polyfill for non-fixed-positioning-supporting browsers (like iOS4)
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Fixed Toolbars 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>Single page</h1> | |
| </div><!-- /header --> | |
| <div data-role="content"> | |
| <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> |
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
| /*! | |
| 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; | |
| } |
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
| /*! | |
| 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 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment