iOS jquery scrollview plugin does not scroll y on an iframe - javascript

I am using scrollview plugin on a jquery mobile file and works great on iOS. However when I use an iframe, scroll y is not applied and its content remains fixed. How to apply scroll y on an iframe? Thank you
<div data-role="page" id="init" data-theme="a">
<div data-role="header" id="head" data-position="fixed" data-tap-toggle="false">
</div>
<div data-role="content" data-scroll="y" id="cont" data-theme="a" style="border:none;">
<iframe data-scroll="y" src="http://www.abcd.com" style="border: 0px none;" height="100%" width="100%">
</iframe>
</div>
<div id="id3">
</div>
</div>
all necessary jquery mobile and scrollview plugins are attached.

Please #Jaume try this,
$(function() {
$('#cont').scrollview({
direction:'y'
})
})
Else, you need to include the jquery.mobile.scrollview.js file.

Related

Disable page scroll but allow Google map scroll

I have an app using appmobi/xdk/appframework when I put in the package
It disables the scrollinf of the page vertically on the iPhone. However, it also disables the scrolling of the Google map on the page. Any ideas on how to re-enable the map scrolling?
Just add scrolling="no" in your panel and data-footer="none" if u want more space for map
<div id="main" class="panel" selected="true" scrolling="no" data-footer="none">
<!--If your are using the appmobi 3.4.0 platform -->
<div id="#pagetitle" title="Yourtitle" class="panel" scrolling="no">
<div id="map-google" style="overflow:visible;">
</div>
</div>
<!--If your are using the appmobi/intel XDK 4.0 platform-->
<div id="#pagetitle" title="Yourtitle" class="panel" style="overflow:hidden;">
<div id="map-google" style="overflow:visible;">
</div>
</div>
the key is to add style="overflow:hidden" on your panel.
Here is sample code with appframework + google maps: http://jsbin.com/UKaQetO/1/edit
works on iphone,android and windows phone.

not loaded iframe that is contained in a HTML file

I have the following situation. I have a jquery mobile page with multiple pages.
The pages content in separate pages and are loaded with Jquery Ajax.
In one of the page, there is a iframe and its content comes from a jsp page.
HTML file one, is a jquery main pages with multiple page
<div id="page1" data-role="page" data-title="page1">
</div>
<div id="page2" data-role="page" data-title="page2">
</div>
<div id="page3" data-role="page" data-title="page3">
</div>
CONTENT of page 3 :
<div class="ui-header ui-bar-a ui-header-fixed" data-role="header" role="banner">
</div>
<div class="ui-content" data-role="content" role="main">
....
<tr>
<td valign="top">
<iframe name="uploadIframe" src="uploadImage.jsp" marginheight="0px" marginwidth="0px" scrolling="no" width="350" height="50" frameborder="1" ></iframe>
</td>
</tr>
....
</div>
The problem I have is that the iframe content which is uploadImage.jsp is not loaded.
Coould anyone help me ?
Wait for the content loaded event.
var doc = window.frames.uploadIframe.document;
doc.addEventListener("DOMContentLoaded", function () { /* ready */});

jQuery mobile popup dimension

My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.

How to fix a header with jQueryMobile

I am new to jQueryMobile. I have one problem regarding fixed headers. I have this code in my header div:
<div data-role="header" hieght="100px" data-position="fixed" data-theme="a" style="min-height: 45px;">
<h1>Nieuwspoort</h1>
</div>
In this div I have put data-position="fixed". The header is fixed but after I scroll the page my header is hidden and after I am done scrolling my header becomes visible again.
Proper fixed header support has been introduced into jQueryMobile from version 1.1-rc1 onwards.
To fix your headers make sure to add the following attribute
data-position="fixed"
If you would like to disable tap-to-toggle then add the following
data-tap-toggle="false"
Your pastebin example modified to work:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a" style="min-height: 45px;">
<h1>Nieuwspoort</h1>
</div>
You need to ensure you are using 1.1-rc1 with jQuery 1.7.1

jquery mobile static footer without toggle

I have a page with a fixed footer
<div data-role="page" id="next_collection" data-theme="d">
<div data-role="header" data-theme="elw">
Title
</div>
<div data-role="content" style="min-height: 246px;">
Some content
</div>
<div data-role="footer" data-id="footer_nav" data-position="fixed">
<img src="images/icon.png" />
</div>
</div>
This works on Android and iPod, but on iPhone 4s it toggles (hide/show) the footer if you touch the screen. I tried to fix it like in this old question but this does not work anymore. For $.mobile.fixedToolbars.setTouchToggleEnabled() i get:
$.mobile.fixedToolbars is undefined
How to stop the footer from toggle in the newer versions?
As #commadelimited says, the toggle has been a new feature not available in prior versions.
The meta data to add to your header or footer to remove that toggle feature is:
data-tap-toggle="false"
so, in your case, the footer should looks like:
<div data-role="footer" data-id="footer_nav" data-position="fixed" data-tap-toggle="false">
<img src="images/icon.png" />
</div>
And here should be some kind of reference from their site: link to google search

Categories