Hi Byron,

Even though not many people own an iPad, who knows what the future brings so it's better to have a website somewhat iPad/Tablet workable.

I was reading the instructions where it says....

Quote

iPhones and other Mobile Safari based agents behave a litte differently than described above for standard desktop browsers. Scrollbars are automatically turned off for all html content, the content's full height is measured, and the floatbox is displayed using the measured full content height. Scrolling individual elements such as a floatbox is difficult and awkward on touch devices, and even when the element is scrollable there is no visual indication of this (such as scrollbars) for the user. Displaying content at full height on these devices allows the content to be viewed using standard touch-drag gestures.

First of all, I do have my content in MAX HEIGHT. But when I checked my test page on the iPad, let's say, when FB opens Isabella's personal blog site, FB only displays part of her website and the rest of it (bottom), gets cut off.... and you can't scroll down because there is no scrolling on that device like you wrote above.

BUT.... I still have my CLEARBOX test page, and Clearbox does display the entire iframed page. So maybe you can take a look at Clearbox's code to figure out why it works on it, but not working the same on FB??

If you don't have an iPad to see what I mean... We can Skype and I'll show you. You don't have to be on camera... just do voice on your end, and I'll do the camera to show you.

I know there's the mobileNewWindow option... but before going that route, it would be nice to see if FB can work the same way as Clearbox.

I should ammend the docs to exclude external domain iframe content. The problem is that your iframe content is coming from other domains and it is not possible to interact with that content with javascript due to cross-domain script blocking. Without being able to access the iframe contents, it can't be measured and so the floatbox can't be auto-sized to it. (And to get same-domain iframe content to autosize, floatbox.js needs to be included in the content page.)

In order to show the full height of the cross-domain content, you need to assign a box height big enough to show all the content. You've got height:max (or height:99%, I forget which) which is a request to fit the box to the screen, which is what you get.

There is no mechanism in Floatbox whereby you can say, if this is a mobile browser set the height to xx pixels, otherwise set it to fit the screen. So for cross-domain iframe content, the mobileNewWindow option is the way to go. In fact, I should probably always invoke mobileNewWindow even when not requested whenever the content is a cross-domain iframe and no explicit pixel height is given.

If your clearbox test page shows your iframe content sized to the browser window with scrollbars from a desktop but shows the same content sized larger than the browser window and showing all the content without scrollbars from an iPad, I'd like to take a look at that test page. Otherwise, it doesn't really apply.

Hi Byron,

Yes... Clearbox behaves perfectly on desktop and on the iPad.

I don't know how it does it, but on the html code of the page, I have rel="clearbox[width=1024,,height=768] and on the desktop, even with w&h set, it will still automatically adjust the w&h if I resize my desktop browser to let's say 800x600.

And most interestingly, even with the setting of width=1024,,height=768, on the iPad, it seems to ignore the w&h and just display any page inside Clearbox entirely, no matter how long the page is... and then you just use the finger to scroll down. And yes, it IS ON the Clearbox window... it doesn't open a new one.

Want to Skype and see it in action on the iPad?

Can't you just send me a link to the clearbox test page? email if you don't want to post it here...

Yes of course..... I just thought we could look at it together if we Skyped.

http://www.makeachildsmile.org/aatest.shtml

If you want to Skype, send me an email with your Skype name.

When I view that page from an iPod Touch, the 'house' icon opens up a page from an external domain in a new window. This page is mobile-specific and is not the same one I get from that link using a desktop. The 'book' icon opens a page from the local domain as an iframe, and indeed the whole content page is visible. But this is not because the box has sized to the content, rather it's because the whole display has kind of fallen apart. The box is still sized to its small size up at the top but the iframe spills out of it in a very strange manner, messing up the iframe content layout too. Not behaviour I want to emulate with Floatbox.

For the external domain content that can't be measured, put mobileNewWindow on the link. This works very well for Mobile Safari clients in a manner that they are used to. For the same domain content, if you don't want the new-window behaviour, include floatbox.js on the content page and this will allow it to autosize to full height in the Mobile Safari clients. (I think most mobile users would prefer the large content to open in a new window - I know I do.)

FYI, I've been playing around with this a bit and believe that the next release will be able to auto-fit to same-domain iframe content without needing floatbox.js included on the content page, but for current releases it needs to be there.

Oh ok! Great! About when is the new release coming out?

Before Christmas.