I use fancybox 2.1.5 all over our website. Some popups include an iframe with video on it, player is video-js. This works all well on Mac, Windows, Android with all browers. BUT (isn't there always a "but"?) not well on the iPad and iPhone. Here all video iframe popups are short in height (about 150px), while the popup has the usual 800px wide. The video appears proportional to that height, hence too small.
This is the fancybox code on the page:
<script type="text/javascript"> /* videopopup */
$(document).ready(function () {
$.fancybox({
'width': '800px',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'video/simpleshow.html'
});
});
</script>
It also makes no difference without autoscale (or autoscale 'false') or with a height defined. Any suggestions?
Okay, I figured it out. On the html page thats loaded into the iframe I put style="width:700px; height:380px" directly into the video tag
<video style="width:700px; height: 393px;"
This solved the problem on the iPad
Related
On iPhone I am having problems getting the fancybox (2.1.5) popup to size the html contents within the screen width (so that the user doesnt have to horizontally scroll over).
I am using the iframe fancybox method to display the page contents when the user clicks on an <a> tag thumbnail. This action calls up a fancybox (using type:iframe) to display a new page with an HTML5 video in it. The problem is that the iframe is wider than the screen, and the page content (including the video) partially displays off the screen, requiring the user to scroll horizontally to the right in order to see the whole page. It seems like fancybox is using the iPhone's reported innerWidth value instead of the clientWidth value. Note I have included the following in the head.
<meta name="viewport" content="width=device-width, initial-scale=1" />
I also tried including the overlay : {locked : true } method which doesnt help this particular issue
You can see the problem at http://notheremedia.com Click on the first "Cricket Lives" thumbnail using an iPhone.
Any assistance here is most appreciated.
Fancybox init script below:
$(document).ready(function(){
// Fancybox setup call
$(".iframe").fancybox({
width : '667px',
openEffect : 'elastic',
openSpeed : 1000,
closeEffect : 'elastic',
closeSpeed : 500,
type : 'iframe',
helpers : {
overlay : {
locked : true
}
}
});
});
Problem fixed. It is not a problem with Fancybox. The cause was due to my using width:inherit on a textarea control on the page. When I changed to using width:100%, the FB iframe now sizes properly within the screen width. Apologies for the false alarm.
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.
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.
I am using Facebook C# SDK in my ASP.net application.
I have an iFrame application whose iFrame Size set to Showscrollbars.
The application was working fine till yesterday, but today the iFrame is not stretching to its width (From the documentation Facebook's iFrame width is 760px Link here). The page in my application's width is set to 95%. So I think its not a width problem in my application.
.
I have to use Showscrollbars option for my application.
Did facebook Changed any settings for the iFrame Apps? Help please.
UPDATE Looks like facebook broke something or they are trying to get rid of scrollbar options. I have to change my application to use AutoResize Option. I made the following changes to my asp.net application and it is working fine except one issue (see at the bottom of the question)
<head runat="server">
<title></title>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.Canvas.setAutoResize();
};
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '12345678', //replace with your facebook appid
cookie: true,
status: true,
xfbml: true
});
</script>
</body>
iFrame stretches vertically when the content increases. That's cool but the
ISSUE is Read Here on StackOverflow. I am working on it. If any one figures it out please let me know.
I had the same problem and fixed it with this simple bit of CSS in the iFrame page
body {overflow:hidden;}
everything still fits nicely, with nothing cut off. just gets rid of those pesky scrollbars!
it certainly sounds like a bug, worked fine in all other browsers but FF 3.6
adding the above also has the advantage of not having the srollbars momentarily show on load.
Use code below and it's works on all of my iframe apps :)
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '123456789',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
FB.Array.forEach([200, 600, 1000, 2000, 5000, 10000], function(delay) {
setTimeout(function() {
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
}, delay)
});
</script>
I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>