1

I've built a phonegap android app using jQuery mobile and I've been trying to disable the page, as in disable scrolling and the ability to click on anything, while the panel is open. Clicking items on the main page isn't a problem as a click or touch simply closes the panel, however the user is still able to slide the screen up and down.

I've tried adjusting the .ui-page-active height to 70% and that fixes it on portrait but flip the screen to landscape and the issue comes back, I'm able to slide my finger up and down the main page while the panel is open and make it scroll up and down.

I tried a couple of code examples from this: https://github.com/jquery/jquery-mobile/issues/5493

but to no avail. I'm also trying to figure out how the panel overlay works. If I'm not mistaken isn't there an overlay placed over the page content when a panel is opened that I can use somehow?

If someone has had a similar problem or can point me in the right direction I'd seriously appreciate it.

javArc
  • 317
  • 2
  • 6
  • 14
  • See Omar's and my answers to: http://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile/21556605#21556605. this will set your content height to device height and make the content div scrollable instead of the whole page, then see http://stackoverflow.com/questions/19084168/how-to-keep-panel-height-fixed-with-scroll-if-content-overflow-for-jquery-mobile/19139236#19139236 to keep your panel at the window size. The combination of the 2 should work for you (if your panel is small, you might only need the first part). – ezanker Apr 03 '14 at 22:37
  • Tried the code from both examples but the content still moves. I made a [fiddle](http://jsfiddle.net/HErtL/2/) of my code, which for some reason it isn't working but it does, I think my pages classes get structured a little differently because I use javascript to inject my panel into multiple pages. – javArc Apr 04 '14 at 01:04
  • Check this answer here if it help its a CSS fix ---- http://stackoverflow.com/questions/22672236/jquery-mobile-panel-open-scrolls-page-to-the-top-how-to-change-this/22675170#22675170 – Tasos Apr 04 '14 at 06:54
  • Check my answer here ---- http://stackoverflow.com/questions/22672236/jquery-mobile-panel-open-scrolls-page-to-the-top-how-to-change-this/22675170#22675170 --- also try changing the ---- .ui-page-active height from 70% --- to 0% --- and see if that helps. – Tasos Apr 04 '14 at 06:58
  • Here is your fiddle updated with my original suggestion: http://jsfiddle.net/ezanker/HErtL/3/ – ezanker Apr 04 '14 at 13:32
  • @Tasos Thanks for the suggestion, unfortunately setting the value to 0% breaks the design, when in landscape now the bottom 10% of the content is constantly cut off. – javArc Apr 05 '14 at 19:02
  • @ezanker Thanks for cleaning up my fiddle! I tried importing your code to my page and unfortunately it doesn't affect the ability to scroll, I can still move the content from the page up and down while the panel is visible. – javArc Apr 05 '14 at 19:06
  • Make sure and call ScaleContentToDevice(); inside $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {}); so that when the page is shown, the content is appropriately scaled. – ezanker Apr 06 '14 at 00:05

0 Answers0