Created
April 20, 2011 14:58
-
-
Save csaunders/931559 to your computer and use it in GitHub Desktop.
Long page bug in jQuery Mobile?
This file contains hidden or 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> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> | |
| <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> | |
| <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> | |
| <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- NOTE: How to replicate bug --> | |
| <!-- Scroll to bottom of list in page1 then click page 2 toolbar item --> | |
| <!-- Then scroll to bottom of page2 and click page 1 toolbar item --> | |
| <!-- Page1 will load and have much of it's content shifted up by about 50% --> | |
| <div data-role="page" id="page1"> | |
| <div data-role="header"><h1>Page 1</h1></div> | |
| <div data-role="content"> | |
| <ul id="page1list" data-role="listview"></ul> | |
| </div> | |
| <div data-role="footer"> | |
| <div data-role="navbar"> | |
| <ul> | |
| <li><a href="#page1">Page 1</a></li> | |
| <li><a href="#page2">Page 2</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-role="page" id="page2"> | |
| <div data-role="header"><h1>Page 2</h1></div> | |
| <div data-role="content"> | |
| <ul id="page2list" data-role="listview"></ul> | |
| </div> | |
| <div data-role="footer"> | |
| <div data-role="navbar"> | |
| <ul> | |
| <li><a href="#page1">Page 1</a></li> | |
| <li><a href="#page2">Page 2</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- List Template --> | |
| <script id="listItemTemplate" type="text/x-jQuery-tmpl"> | |
| <li> | |
| <h3>${heading}</h3> | |
| <p>${description}</p> | |
| </li> | |
| </script> | |
| <!-- /List Template --> | |
| <script type="text/javascript"> | |
| page1List = $('#page1list'); | |
| page2List = $('#page2list'); | |
| var entries = []; | |
| for(var i = 0; i < 100; ++i){ | |
| var data = {heading: "Heading For Item " + i, | |
| description: "Description for Item " + i}; | |
| entries.push(data); | |
| } | |
| $('#listItemTemplate').tmpl(entries).appendTo(page1List); | |
| $('#listItemTemplate').tmpl(entries).appendTo(page2List); | |
| page1List.listview('refresh'); | |
| page2List.listview('refresh'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment