I'm developing a Cordova / Phonegap app. In some point of my app I load a page where I want a google calendar to be shown so user can see the agenda.
I just copy-pasted the iframe from google calendar, but, while it shows correctly my calendar in browser testing, when I create iOS app, it doesn't show itself, nor in simulator, nor in device.
Why is this happening?
....
</div>
<iframe src="https://www.google.com/calendar/embed?src=whitedragongroup%40gmail.com&ctz=Europe/Madrid" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</body>
PS:
I tried placing div inside previous div but result is the same.
Related
I have an Angular app displaying a video like this:
<video ng-if="videoToPresent.shouldShow" width='640' height='360' controls autoplay>
<source ng-src="{{videoToPresent.url}}" type="video/mp4" />
</video>
This worked perfectly on mobile Safari until the new iOS 10 update. Now, it renders the video poster and the play button in the center, but it does nothing upon clicking the play button.
I read an article in WebKit's blog describing how use of the playsinline attribute is supported, so I tried adding that as well but without any success.
Anyone know what's going on with the new update? Thanks!
I have a phonegap/cordova application that pulls blog posts from a wordpress website. However, I have a problem that when an image on a page is tapped, it opens up fullscreen, which hides the navigation of the app. This behavior is less than ideal, since the user has to exit the app and reopen it to get the navigation controls back.
Here is a screenshot of the behavior using the iOS simulator: http://imgur.com/a/lpxeV
The behavior also occurs on iPad Air 2.
Is there a way to disable this behavior in phonegap/cordova?
The code was in this format:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attachment_38739" style="width: 310px" class="wp-caption alignright"><img class="wp-image-38739 size-medium" src="http://unfspinnaker.com/wp-content/uploads/2015/02/BodyFound_GarrettMilanovich_3-300x200.jpg" alt="The body will be sent to the medical examiner’s office for further investigation. Photo by Garrett Milanovich " width="300" height="200"><p class="wp-caption-text">The body will be sent to the medical examiner’s office for further investigation. <br> <em> Photo by Garrett Milanovich </em></p></div>
The following jquery fixed the problem:
$(document).ready(function(){
$('.ui-link').click(function(e) {
e.preventDefault();
});
});
Using a meta tag in HTML page should solve the problem.
<meta name="viewport" content="user-scalable=no" />
I copied the google maps example out of the jquerymobile-docs. I need fixed toolbars (header and footer), but when I include the iframe-popup in the content, then the toolsbars are scrolling and jumping back on the right position. It works well in desktop browsers but not on iPhone 5.
This is the popup which causes the problems:
<div id="popupMap" class="popupMap" data-role="popup" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<iframe id="mapIframe" src="http://view.jquerymobile.com/1.3.2/dist/demos/widgets/popup/map.html" width="480" height="320"></iframe>
</div>
I've created a full demo: here
Please copy the code and run it on iPhone to see what I mean. Then remove the popup-code (iframe) and compare the results.
Is there a workaround for it?
I am new to it and trying to create a simple mobile phone web page which calls external web pages. I have a button at bottom of page it is fixed. what i does, i call another page from same folder which has external links, i call the page through Object element. I am facing height problem when device in landscape view, only half of the page is display and the scroll bar also not moving further down. same when i click on external link of the called page.
need suggestion and help.........
<content style="width:95%;">
<!--<iframe src="h2.htm" id="iframe_a"></iframe>-->
<object id="vp" type="text/html" data="h2.htm" style="width:100%; overflow:scroll;"></object>
</content>
<!--<div id="siteloader"></div>
<script>
$("#siteloader")
.html('<object data="h2.htm">');
</script>-->
<div id="downloadButton" style="position:fixed; bottom:0; z-index:2; background:#fff; width:100%;"><input TYPE=SUBMIT Value="DOWNLOAD AT&T REMOTE SUPPORT" />
</div>
I making prototype web app for iPad, and I want to embed google map.
I embedded map with this if frame code from google's tutorial:
<iframe width="720" height="340" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Belgrade,+Serbia&aq=0&sll=37.0625,-95.677068&sspn=38.638819,79.013672&ie=UTF8&hq=&hnear=Belgrade,+City+of+Belgrade,+Central+Serbia,+Serbia&ll=44.809,20.465641&spn=0.022226,0.062571&z=14&output=embed"></iframe>
But, in safari I get map with some withe rectangle: http://cl.ly/2u2G0p1T3x3O1Q1X3A1B
and when I add this web app to my homescreen, I don't get map, I get white div: http://cl.ly/0O3n2c3N3C0C1F2x0l2a
Where is some other way to implement google map on iPad web app? :|
I haven't tried making an app yet but I would probably try using Googles javascript api instead of an iframe. I believe your amount of control is much better with js than with the static version.