Hi,

if there a way to disable the floatbox on small screens like iphone ?

Example:
- on desktop and tablets: show the media in the floatbox
- on iphone and very small screens: show the media on a new windows

iceman

Set the mobileNewWindow option to true, either globally or per item. In the context of this option, mobile is defined as any device that has a screen with a largest dimension of less that 1000 pixels.

Great.
thanks

Can i change this dimensions?

Buy a different device.
My reference to 1000px is the limit for the physical screen size of the device that is accessing the page. This limit is hard-coded in Floatbox and is not a configurable option.

The iPhone's retina screen clocks in at 960px which is the largest pixel count of a small-screen device that I'm aware of.

Ahh, ok.
Thanks

OffTopic:
I have a little problem with showing the fb on my smartphone:
http://www.fotodesign-fm.de/3-0-Was-ist-machbar.html.

I see the overlay but no fb or content (on desktop it's all fine)

Which smartphone? It's not possible to support every make and model that comes out. I try to make sure Floatbox works well on iOS and Android and thereby cover the vast majority of mobile devices. See the list of supported platforms on the home page.

I've tested it on
- iPod touch (ios 4.3x)
- Galaxy Note (andro 4.03)

I have the problem on both systems with the fb and image groups.
External content (iFrame) and flash media works perfectly.

On my old website (with an older version of floatbox) the fb works fine with images and image groups on my mobile devices.

http://www.fotodesign360.de/3-0-Was-ist-machbar.html

There's some conflict with your css. When I remove your css from the page, it behaves well. I'm currently digging through it to find out exactly what is conflicting. Stay tuned....

That's the most difficult page to debug I've ever encountered. I'm afraid I can't fix it for you. There's multiple conflicts between the css and other scripts on the page.

To make Floatbox happy I had to remove the position:fixed style from .footer in your style.css file. That fixed positioning seems to be throwing off the Android browser for some reason.

I also had to drop both the superbgimage and nivoslider scripts from the page. I can't be sure, but it appears that superbgimage is maybe forcing itself to appear above the floatbox, and nivoslider seems to be interfering with the touch events, although I can't be certain of this. I can't debug other people's scripts.

The page you say is working fine with an older version of Floatbox is not at all the same page. It does not have the problematic fixed position in its css, is not using superbgimage and is using a different version of the nivoslider.

I think the bottom line is that if the three js utilities can't get along, you'll have to pick which ones are most important to you. It might be a good idea to simplify that page a great deal, and then add complications one at a time testing as you go to see what can be done. It's not a Floatbox bug, so I can't fix it. Sorry....

Thanks for your help.

Can i change the floatbox position: fixed to position:absolute ?

I don't precisely understand your question, however....

The primary floatbox container div is fbBox. By default, fbBox has position:absolute. There is an option called disableScroll which, if set to true, will apply position:fixed to the fbBox div. This option will set fixed positioning only if all the content is visible on the screen and if the device supports fixed positioning. Many mobile devices do not support position:fixed.

If i use any elements with position:fixed the floatbox shows as the lowest layer on android stock browser (supports fixed elements).

I have test the following values to see the fb as top element:
- superbgimage z-index: -1 (the fb z-index has no effect)
- no z-index on the wrapper
- fb-options = overlayOpacity: 0 | disableScroll: true

Now i have the following problems:
- disableScroll has no effect - the content scrolls up and down
- if overlayOpacity > 0 = the overlay is the highest layer


ps: i have test other lightboxes
colorbox(slimbox: it works with all my other scripts
fancybox/prettyphoto/nyroModal: has the same problems with other fixed elements

I h've make a simple test site for android: http://www.fotodesign-fm.de/test/
disableScroll has no effect and the overlay is over the fb-content.

Is this a bug from the fb or the stock browser on android ?

Hi,
i've found this article on http://jquery.org/updates/2012/09/04/status-update-85/

Quote

Visual z-index issues in Android 4.0 default browser (#4816 and #4874) – When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Is this the problem ?

Cartographers of old who would encounter foul ground which could not be safely explored and surveyed would mark those areas of their maps with "here be dragons". I need to mark your pages thus.

I've gone as deep into your pages as I will, and shall go no further. They are too complex, too ambitious, and too unstructured.

Not all browsers support position:fixed. The Android browser is one that does not. This is neither a Floatbox bug nor an Android bug. It is just the way things are. In my opinion, not supporting fixed positioning on touch devices that have no scroll bars is an appropriate design decision.

We can see from the demo page that Floatbox is well-behaved on most mobile devices, including the ones you are testing. Certainly we can create pages styled up in such a way as to break various 'lightbox' overlay utilities, and we can bring scripts onto the page that disrupt and displace the intended displays. All I can tell you is, if you want to use Floatbox and you are doing something that is breaking it, don't do that something. Having already spent a few hours scything through those dragons with my best vorpal blade, I have neither the time nor the inclination to go deeper into that lair. The problems are specific to your pages, and not to Floatbox in general. I can't do any more than I have already to sort those problems out for you.

admin wrote

Buy a different device.
My reference to 1000px is the limit for the physical screen size of the device that is accessing the page. This limit is hard-coded in Floatbox and is not a configurable option.

The iPhone's retina screen clocks in at 960px which is the largest pixel count of a small-screen device that I'm aware of.

I'm sure you've clocked this already, but the new iPhone5 has a screen resolution of 1136×640.

Yeah, we've got a problem coding for binary yes/no behaviour based on a small-screen / large-screen distinction, especially when the distinction is made based on pixel count. The iPhone 5, at 4" and 1136px, should go in the small-screen bin, as should the Galaxy S3 at 5" and 1280px. What about the 7" devices (e.g., Kindle Fire) and 10" netbooks, many of which use 1024px? Floatbox tries to put 7" and above devices in the large-screen bin, hence the 1000px boundary.

Pixel-count boundaries no longer work well now that we have 4" devices with more pixels than 10" devices, and we need to support both. I'm going to slice and dice into css media queries to see if there's something in there that will let Floatbox detect physical size as opposed to virtual size.

As always, thanks for being the guy who prods me to pay attention to some of the more challenging aspects of keeping current in a fast changing world.

Although according to this (http://www.campaignmonitor.com/blog/post/3811/what-the-iphone-5-means-to-responsive-email-and-web-design) "while the iPhone 5 has a physical pixel resolution of 1136 x 640, the dip/device-width resolution is 568 x 320", so maybe not so much of a problem.