jquery mobile iframe scrolling problems, when tapping on links - jquery-mobile

I have encountered a weird issue with jQuery Mobile, where when tapping on a link in an iFrame and scrolling makes the persistent header in the parent HTML document move up and down with the scrolling. The interesting part is that this behaviour only happens when jQuery mobile has loaded a page in the iFrame. The full example can be seen here: http://www.cs.au.dk/~gedefar/jqm/parent.html (remember to load it on iPhone).
To the code and sorry for the lengthy example, but in order to show the problem I need three pages, parent.html, that contains the iframe, and two child pages, child_{1,2}.html that are loaded in the iFrame (with links to each other):
<div data-role="page">
<div id="header" class="header" data-role="header"
data-position="fixed" data-theme="c">
Foo Bar header
</div>
<div data-role="content">
<iframe src="child_1.html" />
</div>
</div>
child_1.html:
<div data-role="page">
<div data-role="content">
<h1> Child page 1</h1>
Go to child 2
<p>
Normal text, where the header is perfectly positioned when touching
here.
</p>
<p>
No problems below, when this page loaded directly in the iFrame. But loading
child 2 using JQM we get the scolling issues.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
child_2.html (no real difference to child_1.html, except the description):
<div data-role="page">
<div data-role="content">
<h1> Child page 2</h1>
Go to child 1
<p>
Normal text, where the header is perfectly positioned when touching
here and moving up and down after the first touch.
</p>
<p>
The problem is with list items below containing a link. For those the
header is not fixed. For the other it is fixed.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
What I find really weird is that the header is only moving when scrolling, if the first tap of the scroll is on a link on the child page. So any ideas here how to proceed? Or
Updated
I have tested the above scenario on different versions of iOS and it works perfectly in 7.0.3, but anything older than 7.0.0 the above problem is present. I don't have access to an Android phone, so I haven't been able to test it there.

Related

JQM Message not showing up

I am having a problem getting a simple header message to show up while using Jquery mobile 1.4.2. The message shows on page load then quickly disappears. I cannot figure out what is hiding the message from displaying. Weirdly enough, when I delete the 'panel' from the page the message shows, however I need the panel for the functionality of the page. Also, while messing around with the Jsfiddle I noticed that earlier versions of JQM displayed the message properly. Thanks
Jsfiddle is http://jsfiddle.net/sAKq5/
<div data-role="page" id="pager">
<div data-role="panel" id="addpanel" data-position="right" data-animate="false">
</div>
<div class="header" data-role="header">
</div>
<div data-role="main" class="ui-content">
<h3>Your Table </h3>
<table id="xx">
</table>
<ul id="xxx">
</ul>
</div>
<div class="actionMsg">
<h5> Message holder at length </h5>
</div>
<div class="footer" data-theme="a" data-role="footer" data-position="fixed" class="actionMsg">
<h2>
Powered by
</h2>
</div>
</div>
Adding in the line
z-index: 1000;
into the css allows the message to be shown. If z-index is less than 1000, message still is not shown.

Unnecessary scrolling of page on iOS

I am Using cordova-2.1.0, JQueryMobile-1.3.0 for iOS app. Some of the pages in my app has very small content still that pages scrolls. I am testing it on iOS 6. How to stop scrolling of the pages having small content. I dont want to use the preventDefault.
It's just looks normal when I tried in the fiddle http://jsfiddle.net/JEqKh/
this is the HTML I used. Try import the libraries in the <head></head> tag
<div data-role="page" id="menu">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="mainMenu">
<li style="height:50px"><img src="a.png" class="ui-li-icon"/>Menu1
</li>
<li style="height:50px"><img src="b.jpg" class="ui-li-icon"/>Menu2
</li>
</ul>
</div>
</div>

jQuery Mobile back button not showing up when linked to drop down UL

So I have one page that works perfectly fine, I am actually creating the links programatically and any link to get to the page with the working back button from is fine - I can see the back button no problem, but then I have a drop down that is just UL full of links and the two pages I link to from there don't show the back button.
Here is the top of the working page.
<div data-role="page" id="detailsPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title"></h1>
</div>
There here is the one that doesn't work.
<div data-role="page" id="calendarPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title">Calendar</h1>
</div>
Here is the UL that has the link to the calendar page that won't show a back button.
<div class="ui-block-b">
<ul data-role="menu" id="optionsDropDown">
<li>
<span data-role="button" data-icon="arrow-d" data-iconpos="right" data-iconpos="left">Calendar</span>
<ul data-role="listview" data-inset="true">
<li data-icon="false">
Thursday
</li>
<li data-icon="false">
Friday
</li>
<li data-icon="false">
List All Sessions
</li>
<li data-icon="calendar">
<a href="#calendarPage" >Calendar</a>
</li>
<li data-icon="gear">
<a href="#settingsPage" >Settings</a>
</li>
</ul>
</li>
</ul>
</div>
The back button on detailsPage always works, the back button on calendarPage never shows up. I have trolled the site but people seems to have issues when they mess with changeHash which I haven't touched.
Could I be screwing something up in the JS? I can't see anything obvious, I could post my whole JS file but I don't even touch these pages from there or mess with the links or anything. I thought maybe because the display is set to none on that list I just showed you above that it wouldn't work but then I tried changing that - it make no difference if you can see it initially or not. I don't get any errors in the console. I am so stumped at the moment. I hope someone can help.
Thanks
Not sure if it is a possible cause but according to the docs, data-role="button" is only valid on <a>, <button> and <input> type elements. I don't see <span> listed there and wonder if that is affecting your navigation?
There is also no valid data-role="menu" attribute listed.
What version of jQuery Mobile are you using? Are you relying on any third party widgets?

How can I use Bootstrap's tabs and jQuery Mobile's pages?

I am working on a site that uses Bootstrap for desktop and jQuery Mobile for mobile devices. I am running into a problem with the HTML structure for tabs in Bootstrap vs. pages in jQuery Mobile. Essentially the jQuery Mobile pages end up being nested if I use Bootstrap's HTML (as seen below). When the jQuery Mobile data-role="page" tags are nested it does not seem to work. Any ideas?
<div class="tabbable" data-role="page"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1" data-role="page">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2" data-role="page">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
The solution I used to solve this problem was a jquery mobile plugin called subpage.
I changed the nested pages to subpages and it worked.

get header and footer out of the page dom

I'm building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.
This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it's ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.
The matter is about my header/footer bar. I'd like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.
So this is a classic page structure:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
For me the easiest way to go is like that:
<div data-role="header"></div>
<div data-role="page">
<div data-role="content"></div>
</div>
<div data-role="footer"></div>
And fix the content with CSS positioning.
But I'd like to find something smarter.
What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?
Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
Basically you put a data-role="footer" element in each page like this:
<div data-role="footer" data-id="foo-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.
Here is a demo: http://jsfiddle.net/SpRAA/

Resources