Search jQuery

jQuery Forum

Screen name:
bkai76

bkai76's Profile

2 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Popup overlay on Android
[3Replies]
- 26-Feb-2013 04:27 PM
- Forum: jQuery Mobile
I have a weird issue with the overlay for a popup on Android... I haven't had a chance to test this on iOS but I have a simple page with a left navigation panel, a header, and content. On the header I have a button to open the panel and a button to load a popup. Everything works but when I open the popup, the overlay has a large square in the upper-left corner of the window... the rest of the content fades as normal using the overlay. Does this have something to do with my panel or am I just not putting the popup in the proper location?
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <title>cLinks</title>
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
8. <meta name="apple-mobile-web-app-capable" content="yes" />
9. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
10. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
11. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
12. <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
13. </head>
14. <body>
15. <div data-role="page" data-theme="b">
16. 
17. <div data-role="panel" id="menu" data-theme="b" data-display="reveal" data-swipe-close="false" data-position="left" data-position-fixed="true">
18. <ul data-role="listview" data-inset="true" data-corners="false">
19. <li data-role="list-divider" data-theme="a">Menu</li>
20. <li><a href="./">Home</a></li>
21. <li><a href="#">Search/Filter</a></li>
22. <li data-role="list-divider" data-theme="a">Session</li>
23. <li><a href="#" data-ajax="false">Logout</a></li>
24. </ul>
25. </div>
26. 
27. <div id="header" data-role="header" data-position="fixed" data-tap-toggle="false">
28. <a href="#menu" data-icon="bars" data-corners="false">Menu</a>
29. <a href="#add" data-icon="plus" data-iconpos="right" data-rel="popup" data-position-to="window" data-transition="flip" data-corners="false">Add</a>
30. <h1>cLinks</h1>
31. </div>
32. 
33. <div id="content" data-role="content">
35. </div>
36. <div id="add" data-role="popup" class="ui-content" data-theme="b" data-overlay-theme="a" data-dismissible="false">
37. <form>
38. <div data-role="fieldcontain">
39. <label for="linkTitle" class="ui-hidden-accessible">Link Title:</label>
40. <input type="text" id="linkTitle" name="title" value="" placeholder="Link Title" required />
41. </div>
42. <div data-role="fieldcontain">
43. <label for="linkURL" class="ui-hidden-accessible">Link URL:</label>
44. <input type="text" id="linkURL" name="link" value="" placeholder="URL" required />
45. </div>
46. <button type="submit" name="submit">Add Link</button>
47. </form>
48. <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Cancel</a>
49. </div>
50. </div>
51. </body>
52. </html>
I tried pasting this to jfiddle but apparently this problem does not occur on a desktop browser. It does occur on the native Android browser (4.2.2), Chrome for Android, and Dolphin.

Panel not scrolling past page content?
[2Replies]
- 30-Jan-2013 08:40 PM
- Forum: jQuery Mobile
I've been searching through these forums most of the day but can't seem to find anything on this issue:

Laying the foundation for a new site using jqm with 2 panels (left/right) and main content with a fixed header. Right now there is no real data, just simple, random text. I've set everything up using the standard methods as described in the jqm docs. The right panel is fixed and the left panel has a listview. When I have basic data on the content page everything scrolls fine, however when I try to add a listview on the content page the entire site will only scroll as far as the content page even if the left panel is longer.

Is this a known issue? Anything I can do to fix it? If this has already been addressed I apologize but would appreciate a link to the discussion.

I should also add that I've disabled Ajax across the board because I don't need it.

Update: I just realized this seems to be an issue with a fixed header on the content page... as soon as I disable that, my site scrolls just fine with lists in both the left pane and the main content area.

Update 2: I'm just really confused by this... not sure if it has anything at all to do with the listview or even the fixed header in the content area. I changed the data-display to reveal (from push) and it scrolls fine but the panel doesn't stay locked to vertical scroll position. In fact the entire page scrolls in all directions.

Update 3: Figured it out (sort of). I just set both left and right panels as fixed and set the css overflow to scroll. I actually like this better than what I originally wanted. :)

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend