Jquery-mobile sliding menu panel +scrolling
Solution 1
As of now i am taking above overflow-x: scroll
and for .ui-panel-inner { overflow-x: hidden }
as a solution ,as
this is working fine with mostly devices except for few low resolution device
please refer fiddle
Solution 2
In my opinion, jQuery Mobile's slide panel (FB like) it is not yet ready. I had some issues with fixed navbar and fixed footer. This why I started to search for a better alternative to solve this problem.
Here are some links that I found :
- http://www.berriart.com/sidr/#usage
- http://apptitudes.github.io/SlidingMenuJS/ (my favorite)
- http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
- http://css-tricks.com/off-canvas-menu-with-css-target/
I know it doesn't solve your problem, but it might help in your futur development :)
Comments
-
rachar_P almost 2 years
I am new to jQuery Mobile. I need to add a Facebook sliding panel features to my application.
I gone through with sliding menu panel, it's working fine, but my content in menu panel is exceeding the window size and I want to make it scrollable.
Please tell me how to fix it.
code Refer as
<!DOCTYPE html> <html> <head> <title>FB Style Menu</title> <meta id="extViewportMeta" name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <style> .ui-panel-inner { overflow: hidden !important; padding: 0px; } .ui-controlgroup { margin: 0; } #header { height: 54px; } #bars-button { margin: 7px; } .panel-content { overflow-y: scroll !important } </style> <script> $(document).on('pageshow', '#home', function(event) { alert("init"); init(); //$.mobile.hidePageLoadingMsg(); }); function init() { var header = $('[data-role=header]').outerHeight(); var panel = $('.ui-panel').height(); var panelheight = panel - header; $('.ui-panel').css({ 'top' : header, 'min-height' : panelheight }); } </script> </head> <body> <div data-role="page" id="home" data-theme="b"> <div data-role="panel" id="navpanel" data-theme="a" data-display="overlay" data-position="right"> <div class="panel-content"> <div data-role="controlgroup" data-corners="false"> <a href="#" data-role="button">Business</a> <a href="#" data-role="button">Numbers</a> <a href="#" data-role="button">Money</a> <a href="#" data-role="button">People</a> <a href="#" data-role="button">Business</a> <a href="#" data-role="button">Numbers</a> <a href="#" data-role="button">Money</a> <a href="#" data-role="button">People</a> <a href="#" data-role="button">Business</a> <a href="#" data-role="button">Numbers</a> <a href="#" data-role="button">Money</a> <a href="#" data-role="button">People</a> </div> </div> </div> <div id="header" data-role="header" data-theme="b"> <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a> <!-- /About --> </div> </body> </html>