Response title
This is preview!
- Screen name: steveh62
steveh62's Profile
3 Posts
3 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 15-Oct-2012 11:38 AM
- Forum: jQuery Mobile
I'm trying to use the new Popup feature in JQM 1.2. On iPhone/iPad (not desktop and didn't try other mobile devices), if the popup link is down the page so the screen has scrolled, then closing the popup causes the screen to scroll back to the top.
Below is the code I used for testing. It has a "page1" which is a one-item menu and a "page2" which has a bunch of text with a popup link near the bottom. Again, this works fine on a desktop, but the page scrolls to the top on closing the popup when tried on an iPhone/iPad. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Popup Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id='page1' data-role="page">
<div data-role="header" data-theme="d" data-position="fixed">
<h1>Popup Test</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="false" data-theme="d">
<li><a href="#page2">Popup Test</a></li>
</ul>
</div>
</div>
<div id='page2' data-role="page">
<div data-role="header" data-theme="d" data-position="fixed">
<a href="#page1" data-add-back-btn="true" data-icon="back" data-theme="d" data-direction="reverse" >Back</a>
<h1>Popup Test</h1>
</div>
<div data-role="content" data-theme="b" >
<div>
Top of page.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />A bunch of text.<br />
<a href="#popup1" data-rel="popup">Open Popup</a>
A bunch of text.<br />
A bunch of text.<br />
A bunch of text.<br />
A bunch of text.<br />
A bunch of text.<br />
A bunch of text.<br />
A bunch of text.<br />
Bottom of page.
</div>
<div data-role="popup" id="popup1" data-theme="b">
Here is some popup text.
</div>
</div>
</div>
</body>
</html>- 09-Apr-2012 10:36 AM
- Forum: jQuery Mobile
I am seeing a problem with slide transitions with RC2 when compiling for iOS using PhoneGap Build. RC1 did not have this problem. It seems fine when run from a browser, but not when installed onto iPhone via PhoneGap.
When doing a slide transition from Page 1 to Page 2 using fixed toolbars, text from Page 2 appears briefly just before the transition. The same thing happens when reversing back to Page 1 from Page 2.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
</head>
<body>
<div id='home' data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page 1</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page2">Link to page 2</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div>
<div id='page2' data-role="page">
<div data-role="header" data-position="fixed">
<a href="#home" data-add-back-btn="true" data-icon="back" data-direction="reverse" data-iconpos="notext">Back</a>
<h1>Page 2</h1>
</div>
<div data-role="content">
Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text.<br><br>
Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text.<br><br>
Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text. Some more text.<br><br>
</div>
<script type='text/javascript'>
$.mobile.defaultPageTransition = 'slide';
</script></div>
</body>
</html>- 09-Jan-2012 02:01 PM
- Forum: jQuery Mobile
I am trying to use PhoneGap to turn my JQM program into an iPhone/iPad app.
On an iPad using iOS 5, transitions (slide, for example) cause a very noticeable white “flash” to appear immediately after the new page slides in. The flash is a white rectangle covering the left portion of the iPad.
The flash does not appear if transitions are turned off or if I run this from a server using Safari. The iPhone does not show this problem.
Is this a “known” problem? With a “known” solution? :-)- «Prev
- Next »
Moderate user : steveh62
© 2012 jQuery Foundation
Sponsored by 
and others.
