android - fixed header scrolls/drags in jquery mobile -
i working on mobile web app using jquery mobile , phonegap. developed hello world app. has header, footer , contents area. header , footer fixed using data-position="fixed" attribute. problem header , footer is, when scroll down , when contents finished , there not need scroll anymore header drags down(for flexibility or indication , there not more contents). in other ios apps, feature exists in apps header , footer not drags , down contents area drags. please see picture mean
as in above picture header dragged towards bottom side not want. want content area have feature. how can make way contents area drags when there no more contents available see?
any css, jquery or jquery mobile trick?
update
html code here
<div data-role="page"> <div data-role="header" id="header" data-position="fixed"> <h1>page title</h1> </div><!-- /header --> <div data-role="content" id="contents"> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>page footer</h4> </div><!-- /footer --> </div><!-- /page -->
unfortunately example not going work because ios not allow that.
solution 1 - ios , android
thankfully there's 3rd party jquery mobile plugin problem , works charm. ios , android solution.
what need iscrollview plugin made on basis of iscroll plugin.
i can't make jsfiddle example because don't work iscrollview, @ least can't make work here example can copy new html file , try on ios.
first here's working online example made: http://www.fajrunt.org/
html :
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>demo</title> <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" /> <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" /> <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" /> <script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script> <script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script> <script src="http://www.fajrunt.org/js/iscroll.js"></script> <script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script> </head> <body> <div data-role="page" class="index-page"> <div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header"> <h1>index page</h1> </div> <div data-role="content" class="example-wrapper" data-iscroll> <p>some content scrolled</p> <p>some more content scrolled</p> <ul data-role="listview"> <li>item 1</li> <li>item 2</li> </ul> <p>even more content. scroll whatever in data-iscroll div.</p> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer"> <h1>my footer</h1> </div> </div> </body> </html> as can see example works magic. 1 more thing, if didn't know iscrollview can fix problem. lets have scrolled bottom of page , there's button page. when click page jump top , page transition page. not error, how viewpoint works. tnx iscrollview page transition point , when page still @ same position.
one last thing if ios developer, iscrollview doesn't have uiscrollview.
solution 2 - ios only
there's pure css fix problem work on ios way showing second solution.
again not solution , official page can found here: http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/
with page changes can initiate ios page scrolling jquery mobile.
html :
<!doctype html> <html> <head> <title>scrollable content demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jquery mobile styles --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <!-- fix scrolling on ios prior ios 6 --> <style type="text/css"> body { margin: 0; } div#container { position: absolute; width: 100%; top: 0; bottom: 0; } div[data-role="header"] { position: absolute; top: 0; left: 0; right: 0; } div[data-role="content"] { position: absolute; top: 41px; bottom: 0; left: 0; right: 0; } .scrollable { overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* ios specific fix, don't use on android devices */ .scrollable > * { -webkit-transform: translatez(0px); } </style> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).one('mobileinit', function () { // setting #container div jqm pagecontainer $.mobile.pagecontainer = $('#container'); // setting default page transition slide $.mobile.defaultpagetransition = 'slide'; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div id="container"> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>scrollable content</h1> </div> <div data-role="content" class="scrollable"> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> <h1>hello cirrus.</h1> </div> <div data-role="footer" data-position="fixed"> <h1>footer</h1> </div> </div> </div> </body> </html> last question
regarding second question. when reach bottom or if on top of page not able prevent bouncing. way can prevent bouncing if prevent scrolling. , not on option in case, need scrolling access bottom of page.
final notes
if want find out more iscroll + iscrollview, how work working examples take @ article.
Comments
Post a Comment