Disable main page when panel is open?

Disable main page when panel is open?

So I've got a typical jQuery mobile app with a panel that I programmatically add to each page in a single html file. I used phonegap to create an android app, the problem now is when the panel is open the user can still move the main page by using his finger to scroll it up or down. When the user taps the main page the panel closes, which is good, I just want to remove the option to interact with the main page while the panel is open.

Also when you scroll the panel to the top or bottom then continue to scroll if the main page isn't also at either the top or bottom it will scroll a bit as well.

I've seen that the panel/page scroll relationship hasn't been perfected in jQuery mobile but is there anything that might correct this behavior? I believe the when a panel is opened that an overlay is put on top of the main page, can I access that somehow?

I've managed to use a css hack to stop most movement:
  1. /* CSS to stop the page from scrolling to the top when panel is opened */
  2. .ui-panel.ui-panel-open {
  3.     position:fixed;
  4. }
  5. .ui-panel-inner {
  6.     position: absolute;
  7.     top: 1px;
  8.     left: 0;
  9.     right: 0;
  10.     bottom: 0px;
  11.     overflow: scroll;
  12.     -webkit-overflow-scrolling: touch;
  13. }
  14. /* Stop the main page from scrolling past the menu if the page is longer than the menu  */
  15. .ui-page-active {
  16. height: 70% !important;
  17. }

but this only works when the phone is in portrait mode. Landscape breaks this and I can't tweak it enough to the point where it works.


Any help would be seriously appreciated, if this is even possible.








    • Topic Participants

    • rbend