I am running IOS 5.1.1 on an IPad One. My application is a HTML5 App and uses JQuery Mobile. I have an IFrame that is programmatically inserted. The IFrame has some criteria that is then used to generate a PDF inside the IFrame.
the PDF won't display unless the I-Pad is rotated.
I cannot scroll the IFrame
On I-Pad 2 (running 4.1.3) I have no problems it displays and (two finger) scrolls fine.
The code is as follows:
JQM Page, Content Section
<div class="content overflowScroll" data-role="content">
</div><!-- /content -->
CSS
.overflowScroll {
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The IFrame Insert
strHtml = '<iframe src="' + fullUrl + '" width="100%" height="95%" style="background-color: #FFFFFF;"></iframe>';
$page.find(".content").empty().html(strHtml);
Update
The problem looks to be IOS5 as the same thing happens on a mobile running IOS5. Is there a good alternative here? Perhaps If i remove dependancy from an iframe?
Related
Is there a way to use the browser native scrollbar when scrollOverflow:true instead of the additional scrolloverflow.js file?
I want to use fullPage.js only on the home page of a WP site and I want all pages to have the default scrollbar.
I managed to solve it by setting scrollOverflow:false (default value) and defining an extra container inside the desired fullpage section like this:
<div id="fullpage">
<div class="section">
<div class="inner-section">...</div>
</div>
...
</div>
CSS:
.inner-section {
height: 100%;
overflow-y: scroll;
}
This seems to work fine on desktop screens, but on mobile screens, there are problems with swiping.
I have a problem with iOS browsers
This is starter conditions:
- We have a simple html page and it contains iframe
- iframe also contains simple html page with form
- iframe haven't scroll and it sizes is fixed
Bug:
Now, if we will open this page on iPhone(from Chrome/Safari browser) and start fill form,
then in some moment when text printing, page scroll down by itself
This is example link
<div id="container">
<iframe src="https://www.w3schools.com/php/demo_form_validation_complete.php" frameborder="0"></iframe>
</div>
Why is this happening? How to prevent these automatic "jumps" of the page?
This might work:
HTML:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
CSS:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Source: https://davidwalsh.name/scroll-iframes-ios
I'm very new to javascript but in mid-level with HTML and CSS.
So here is the issue. I just registered a third party contact form service with Foxyform. They provided a code to paste in the page and upload it. It works fine in desktop views, however when one visits the contact page on different mobile or smaller devices it looks out of space and non-responsive. There is no option to edit it in #media screen within the theme.
Is it possible to make this contact form responsive?
Here are the codes:
HTML:
<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>
Javascript:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
Your contactform provider includes an iframe in your page.
An iframe can not be styled by the website on which is it included as most browser handle it as an own webpage which is embedded in another webpage.
Found a fix with CSS (not jquery/javascript sorry) ( for googleCalendar iframe ) but I used the same concept for foxyForms iframe.
via https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/
html
<div class="responsiveCal">
<iframe src="https://calendar.google.com/calendar/embed? showTitle=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&height=600&wkst=2&hl=nl&bgcolor=%23FFFFFF&src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&color=%23ffcf03&ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
css
.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}
It allowed me to place a row within the container as well to use bootstraps responsive classes. Hope this is right, I'm still a beginner please feel free to correct any mistakes I made..
As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.
I am experimenting some issues while trying to display a pdf in an iframe. On android it works fine but on ios, I have problems because you cannot scroll the pdf. You just see what appears in screen and not anymore. If you try to move the screen you see white. I am loading a webpage inside a uiwebview on ios.
This is a bucle in which I load many pages with many pdfs. So that is why there are a val.id... on id and urls.
This is my code in html:
<div data-theme="e" data-role="page" id="PDFSHOW'+ val.id_boletin + '" data-url="PAGE' + val.id_boletin + '">
<div data-theme="f" data-role="header">
<h1>'+ val.title +'</h1>
</div>
<div data-role="content">
<iframe class="testIframe" src="'+val.link+'" style="width: 600px; height: 5000px; border: medium none;visibility: visible;" >
</div>
</div>
)
I don't know what to do because I always find out that this is the correct way to display it.Any idea