I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).
I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.
<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
<iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>
The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).
How can I overcome this issue and provide scrollable iframe solution?
OK. found the solution.
apparently, the problem appear when the main document height is shorter than the iframe that is scrolled.
the parts of the iframe page, that exceed the document height, are not rendered.
So, under my needs, I could solve the problem by adding such a js (with jquery) code:
<script>
$(function() {
var iframe = $("#myIframe");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.
In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.
Related
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...
Ideally I want my Facebook custom tab to expand with the content - I seem to be able to get this working OK in all the latest browsers, but not when it comes to IE7 and IE8.
The pages just cuts off early, hiding the rest of the content. I'm using the following js code right now:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
And my CSS:
#container {
background: url('../images/background.jpg');
height: 100%;
position:relative;
clear:both;
background-repeat: no-repeat;
}
My canvas height is set to fluid.
Any ideas/tips would be much appreciated!
Thanks
MK
Are you talking about a canvas app or a page tab app?
If the latter, the width is 520px - there is no fluid option for page tab apps
I'm using GWT 2.3 and have what I think is an extremely common layout scenario that doesn't seem to be very well supported -- but I hope StackOverflow can tell me I'm looking at the problem wrong.
I'm using layout panels to arrange my app. Typically, you put a layout panel into the RootLayoutPanel, where it takes over the whole browser window.
However, I have a site header and footer that need to be outside of GWT.
The problem is, as the docs clearly say, if you insert a layout panel into an arbitrary HTML element of the page instead of using the RootLayoutPanel, you lose the automatic resize behavior. You must specify the layout panel's starting size, and do any resizing manually.
How would I achieve this manual resizing? I'm pretty sure I can track the resizing of the HTML element via javascript, but how do I then interact with GWT to tell it the new size?
Thanks!
I would recommend using css absolute positioning in your html file :
<body style='position:absolute; top:10em; bottom:10em; left:0; right:0;>
<div id="top" style="position:absolute; left:0; top:-10em; bottom:0; right:0;">
<p> THIS IS THE TOP BANNER </p>
</div>
<div id="bottom" style="position:absolute; left:0; top:100%; bottom:0; right:0;">
<p> THIS IS THE BOTTOM BANNER </p>
</div>
</body>
Your RootLayoutPanel will attach to the body, which now has a 10em top and bottom margin.
One possible pure GWT solution.
You can add a resize handler. In the resize event you can get the new dimensions and resize your component.
The GWT mail sample pre GWT 2.0 Mail used "manual" resizing (but its a bit out of date).
http://code.google.com/p/google-web-toolkit/source/browse/releases/1.7/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java
Basically, you want to hook into the window resize event handler:
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(new ResizeHandler() {
public void onResizeA(int width, int height) {
// Adjust each immediate child widget by calling child.onResize()
}
}
I created a custom facebook landing page using the same template I have used 3 times before. The problem is, this time, ther vertical scrollbar won't go away. This is the resizing code I have been using:
<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});}
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});}
// ]]></script>
and at the bottom of the page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// ]]></script>
My CSS uses body {overflow: hidden;}, inside my app "auto resize" is selected. The issue is not that the ifarme won't resize (it does), it's that I have an empty vertical scrollbar on the right that won't go away.
Since the iframe design uses the whole 520px width, the empty vertical srollbar gives me the dreaded horizontal scrollbar. Judging by the width of the horizontal scrollbar, it's the vertical scrollbar causing it and not anything (that I can find or see) in the HTML/CSS making the page wider than 520px. The problem happens in IE8, IE7 and Firefox.
You can see the page here.
I have tried a few variations of the javascript code from a few different sources, but no luck. Not sure if this is something small I'm missing or if it's yet another facebook bug. This problem is not present on any of my other facebook iframe landing pages. After searching around for an answer and coming up with nothing, I've hit a wall with this one.
Its this code
html {
overflow-Y: scroll;
}
in your style.css style sheet thats causing the problem. When I inspect it with Chrome and remove that value, the scroll bars disappear.