Skip to content

Instantly share code, notes, and snippets.

@ricky-f

ricky-f/scrollingissue.html

Created February 8, 2012 00:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ricky-f/1763662 to your computer and use it in GitHub Desktop.
Save ricky-f/1763662 to your computer and use it in GitHub Desktop.
Download ZIP
Scrolling Issue Demo
Raw
scrollingissue.html
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fixed Toolbars</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/toolbars/../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/toolbars/../_assets/css/jqm-docs.css" />
<script data-main="http://jquerymobile.com/test/docs/toolbars/../../js/jquery.mobile.docs"
src="http://jquerymobile.com/test/docs/toolbars/../../external/requirejs/require.js"></script>
<script src="http://jquerymobile.com/test/docs/toolbars/../../js/jquery.js"></script>
<script type="text/javascript">
$('#test').live('pageinit', function (event) {
$("[data-position=fixed]").fixedtoolbar({ tapToggle: false });
for (i = 0; i < 500; i++) {
$('#longlist').append('<li>This is now row number ' + i + ' in this long list that has been created</li>')
}
$('#longlist').listview('refresh');
$('#scrollup').bind('click', scrollup);
$('#scrolldown').bind('click', scrolldown);
function scrollup() {
$.mobile.silentScroll(window.pageYOffset - $(window).height() - 100);
}
function scrolldown() {
$.mobile.silentScroll(window.pageYOffset + $(window).height() - 100);
}
});
</script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-position="fixed" data-theme="f">
<h1>
Fixed toolbars</h1>
<a href="http://jquerymobile.com/test/docs/toolbars/../../" data-icon="home" data-iconpos="notext"
data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>
<div data-role="content">
<ul id="longlist" data-role="listview" data-theme="c" data-dividertheme="d">
</ul>
</div>
<!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
<input type='button' value='PAGE UP' id="scrollup">
<input type='button' value='PAGE DOWN' id="scrolldown">
</div>
</div>
<!-- /page -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment