IPad FB size issues

Page: 1

Author Post
Member
Registered: Jan 2013
Posts: 21
Hi, I am using a FB iframe to display search results. The content normally shows 10 results in a windows enviroment using IE or FF.

When I view the FB on an IPad I do not get the ability to Scroll which I know is normal on such devices but is there setting I can change so that all the 10 results can be seen.

The website to view the FB is http://www.holidaynerja.co.uk and you can invoke the FB IFrame from "LIve Search" doing a date search, simply put in dates, property type and town.

The call to FB code is here
lightbox_noscroll('http://www.holidaycosta.com/iframes/search.php?lang=eng','width:1050 height:710 sameBox:true afterBoxEnd:rescroll()');

I hope you can help.
Administrator
Registered: Aug 2008
Posts: 3382
Of course I can help. ;)

You're setting an explicit height of 710px on that floatbox, and that's not enough height to show all the content. Remove that height option altogether and the floatbox will auto-size to the content. On devices with scrollbars, it will auto-fit to the screen height and show scrollbars to get to the extra content. On scrollbarless devices the floatbox will size to the full height of the content and users can swipe-scroll the page to see the offscreen content.
Member
Registered: Jan 2013
Posts: 21
Thanks Byron., I will give that a go.

Just on another note and I am pretty sure the answer is NO but agin on an IPad I have various Flash Virtual tours in FB Iframes but they do not work on the IPad, I assume that is normal owning to the lack of Flash support in the Safari browser?
Administrator
Registered: Aug 2008
Posts: 3382
That is correct. iOS devices cannot play Flash content, and there's nothing Floatbox can do to force them to.
Member
Registered: Jan 2013
Posts: 21
I thought as much :(

Just tried the other issue and removed the "Height" but it has made no difference.

I have a webpage that is stripped down and shows the code a little clearer http://www.holidaynerja.co.uk/indexSearch.html Hope it makes sense :)
Administrator
Registered: Aug 2008
Posts: 3382
Ah, I see. The content is not present to be measured when the floatbox opens but is added to the iframe after it loads.

You could try calling the fb.resize() API function after all the content is in place. This should auto-size the floatbox to fit the new content. (See the API Reference for details.)

Another approach would be to set mobileNewWindow to true to open that content in a new window on scrollbar-less devices. (See the Options Reference for details.)

I suspect you would prefer to travel the fb.resize road.
Member
Registered: Jan 2013
Posts: 21
so like this?

lightbox_noscroll('http://www.holidaycosta.com/iframes/search.php?lang=eng','width:1050 sameBox:true fb.resize( ); afterBoxEnd:rescroll()');
Administrator
Registered: Aug 2008
Posts: 3382
No, fb.resize() is a javascript function, not a floatbox option. You would need some code on your page to fire that function after all the content is present. Sorry, I can't tell you where and when to place that. It's dependent on your page content and code and what you are doing to bring the content into that iframe after the iframe is loaded in the floatbox. I assume you've got some javascript running to bring that in, but I don't know for sure.
Member
Registered: Jan 2013
Posts: 21
Hi Byron; I have asked my web guy to look into it but he has come back as follows:

I’ve tried the suggested method and there’s no luck with it.



Please contact floatbox support and explain the following:



You are loading a cross-domain iframe on the floatbox 4.18



You’ve tried the following:

-calling the parent fb.resize() which will not work due to cross-domain

-adding the floatbox.js to the loaded iframe and calling fb.resize() from it, which calls it ok but doesn’t do the trick on the ipad.



I’ve been reading about it and there’s a “mobileNewWindow” option which I don’t understand clearly but seems to have done the trick for this other gal:

http://floatboxjs.com/forum/topic.php?id=1018



Maybe it’s just a matter of updating floatbox or something. There is also something about calling floatbox from the iframe itself, ask them about it.



Also ask them if there’s a way to manually set the content height (given that floatbox cant read the cross-domain iframe’s height) which is basically the problem (not the box height itself but the content’s height). Or if there is another way to call the fb.resize() once the iframe is loaded or if we can manually resize it (the iframe has a fixed height so there’s no need to auto do anything).


Hope you can help ;)
Administrator
Registered: Aug 2008
Posts: 3382
If it is cross-domain iframe content, there is no hope of resizing the floatbox to match the content size. There is no scripting possible across domain boundaries and so the primary page cannot ask the iframe content how big it is, nor can the iframe content send a request to the main page asking it to resize the floatbox.

There must be something lost in the translation here, but if the iframe content has a fixed height, why not set the floatbox height option to that value? The initial problem was that the floatbox height was set to 710px and the content was taller than this. If the content is always a certain height, match that in the height option.

If you're using Floatbox version 4.18 you need to upgrade to get all the mobile goodness that has been added to later versions. If you use the current version of Floatbox, that iframe content will open in a new window on scrollbar-less mobile devices and you won't need to worry about sizing the box to hold the content.
Member
Registered: Jan 2013
Posts: 21
Hi Byron, just to say thank you very much for your input. We have updated to 5.7 and added the.“mobileNewWindow” option. All works fine on ipad now opening in a new window.

I am however having an issue with the license Ad keep appearing although I have a valid key??
Administrator
Registered: Aug 2008
Posts: 3382
The license key install on holidaynerja.co.uk is fine and you can't be getting nag screens there. I suspect you're accessing the pages using a different domain name than the one used for registration. What's the URL of the page where you are seeing nag screens? I'll know the reason why in about 6 seconds if I can see the page.

You can check the status of the license key on any page that uses Floatbox by viewing the page and typing "javascript:fb.key()" (without quotes) into the address bar of any browser except Firefox.
Member
Registered: Jan 2013
Posts: 21
Hi Byron, the License reminder appears actually in the iframe. The iframe content is hosted by holidaycosta.com of which I have a license as part of a 3 user license so I am not sure why it is happening.

You can see it for yourself if you go to www.holidaynerja.co.uk and do a Live Search. Sometimes it happens sometimes not.
Administrator
Registered: Aug 2008
Posts: 3382
The Live Search link opens up a cross-domain iframe in the floatbox. That iframe is served from holidaycosta.com. The floatbox.js file is included in the page served from holidaycosta.com. There is no license key that matches that domain, hence the registration reminders.

Simply remove floatbox.js from that content page. It is being used only to call fb.resize() from the body onload function. But this call does nothing anyway, as the open floatbox you are trying to resize is not on this page and you can't do anything with the floatbox on the parent page as script cannot go across domain boundaries.

Page: 1