I have a news section on a page, when i click on a news a fancybox iframe is opened showing the news page.
The news page contains 3 images on top ad some text on the body of the page, and on page load i create a new Swiper slider with the images.
Unfortunately on iOS Safari, creating the slider with those images make the content of the iframe being incorrectly sized.
This behaviour only happens on iOS Safari because if i test in chrome with device toolbar enabled everything works as expected.
I've attached a video of the issue at this link
First, fancybox works fine. The script attaches load event to iframe element and then (inside that event) reads width/height of body element and uses these values to resize iframe parent element so that iframe dimensions matches page size.
If you (or some 3rd party script) change layout, then, obviously, page dimensions will change, too. In that case, you can execute parent.jQuery.fancybox.getInstance().update(); (from within iframed page) to call update method that will do resizing again.
Related
I have a link, it looks like that:
link text
The target (shop) is an iframe with the name shop. Clicking the link and showing someplace.html in the iframe only works, if the page that contains the iframe is already loaded.
So my problem is, how can I make it work even if the page that contains the iframe is not loaded? I tried loading the page with the iframe by redirecting to it when the link was clicked using its onclick, that worked, but I still have to load someplace.html afterwards and this is where I am stuck.
Any ideas how to solve that? I can use jQuery or plain JavaScript ... doesnt matter.
Thanks!
If you have a link with a target "shop", you must have a iframe called "shop". It is possible to load the iframe with a blank page if there is no initial content.
I'm adding facebook login buttons to fancybox (version 1.3.4) modals (one for join, one for login). The facebook buttons all get instantiated when the page loads, but are hidden. After triggering the fancybox login modal, the facebook buttons get rewritten in the modal and load correctly the first time. However if you close the modal and then reload it a second or third time, there is no facebook login button. It's just blank. When I look at the inline html block
that fancybox based the modal on, the facebook button markup that was generated when the page initially loaded is gone...actually not completely gone, but the button code deep in the iframe is wiped out.
I've seen suggestions to iframe these facebook buttons, so I tried adding an iframe instead of the raw facebook button markup. Note that I am not using the iframe fancybox type and I can't currently do that. When I include <iframe src="/myfacebookbuttonpage"></iframe> in the modal section, again it loads correctly the first time and then after closing the modal, looking at the source I can see the iframe rewritten as <iframe src="about:blank"></iframe> and the innards of the iframe are blank.
Anyone have any idea what's going on here? Or is this attempt to include facebook login buttons in fancybox modals completely wrong for some reason?
It's a bug in fancybox v1.3.2+ when using inline iframes.
As a work around, you may edit the fancybox js file or apply the workaround in your custom fancybox script.
Go here for further instructions
I'm trying to get Fancybox to center up on the screen within a facebook iframe app. Everything works fine on my test page outside of FB but once I put it in my app it shows up centered according to the iframe height not the viewable screen. I have also noticed that the 'centerOnScroll': true is also ignored when using inside FB app. Any suggestions would be great and much appreciated.
Centering in a iframe according to it's viewable height is generally not workable. Have a look at the following answer.
Fix an element inside an iframe in the center of the screen
I want resize the iframe height of my tab page. I am trying FB.Canvas.SetSize method, also I try with jQuery and javascript resize the iframe but don´t work.
My application is not a Canvas.It is a tab page so i think "FB.Canvas method should not work with tab page".
How could resize my tab page on facebook profile?
How could drop the iFrame scrollbars on tab page?
Excuse me I also need to know if I could modify the share button with a custom image.
Thanks in advance
Provide some code
Make sure you have the Canvas Height option is set to Settable under the App Advanced Settings
Use asynchronous Loading of your JS-SDK and put your FB.Canvas.setSize(); inside the fbAsyncInit function
Please note that the fbAsyncInit function may fire (and hence your FB.Canvas.setSize();) before all images of your page are loaded! which means actual height of page is not reached yet!
I want to have a web site appear on an iphone with an iframe that takes up 1/3rd of the height of the screen, and 100% of the width. Inside this iframe i want to have a very wide page for the user to flick scroll through, but when that is scrolled i don't want it to affect the rest of the page outside the iframe.
I've done this with some simple html that works fine on the desktop in all browsers by setting the iframe's width to 100%, however on the iphone it forces the entire page to the width of the iframe's contents, and scrolling of the iframe contents is not independent of scrolling of the rest of the page.
Can anyone suggest why? I have a suspicion that iframe contents are inlined on the iphone to save ram...
The iPhone Safari browser uses HTML 5, which doesn't specify required support for scrolling iFrames. I've seen several other users with the same problem, but I'm afraid it won't happen inside of the iFrame element.
You can also check out the JQTouch JavaScript library, some users have found success with their tools.:
http://groups.google.com/group/jqtouch/browse_thread/thread/23fdfd81ed7cd004?pli=1
http://www.w3schools.com/html5/tag_iframe.asp