html - How to make ui content fixed while the panel scrolling on jquery mobile -
i've been looking thread on internet 2 months, didn't find anything.
here code:
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="panel" id="mypaneldefault"> <h2>panel header</h2> <p>you can close panel clicking outside panel, pressing esc key, swiping, or clicking button below:</p> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">close panel</a> </div> <div data-role="panel" id="mypanelfixed" data-position-fixed="true"> <h2>panel header</h2> <p>you can close panel clicking outside panel, pressing esc key, swiping, or clicking button below:</p> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">close panel</a> </div> <div data-role="header"> <h1>page header</h1> </div> <div data-role="main" class="ui-content"> <p>click on both buttons , start scroll page.</p> <a href="#mypaneldefault" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">open default panel</a> <a href="#mypanelfixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">open panel data-position-fixed="true"</a> <p><b>tip:</b> see effect of data-position-fixed="true" attribute, try resize window if scrollbar not available.</p> <p>some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..some text enable scrolling..</p><br> </div> <div data-role="footer"> <h1>page footer</h1> </div> </div> </body> </html>
the above code demo of making panel fixed when panel open. wish know how make content or ui-content fixed while panel open. so, ui-content stays fixed panel scrolled or down.
thank you, zamm.
Comments
Post a Comment