Overlay on ipad

3,047 views
Skip to first unread message

Aduffy

unread,
May 30, 2010, 11:39:07 AM5/30/10
to fancybox
The overlay does not render correct on an iPad if the user has scold
the page first

Janis

unread,
May 31, 2010, 4:26:59 AM5/31/10
to fancybox
Because iPad/iPhone are the new IE6 - they don`t support css poperty
'fixed'.

( http://www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
and http://www.8164.org/designing-for-the-ipad/ )

Janis

Z

unread,
Jun 7, 2010, 9:30:31 PM6/7/10
to fancybox
I have a smiliar problem, although it may be fixable in my localized
enviornment.

I'm designing a website to run on the iPad horizontal, so the entire
site displays within a fixed width/height div. FancyBox loads and
runs, but when an anchor is clicked, the overlay looks to be about
15px up and to the left.
Is there any way I can counter act this?

*note, all web content is kept inside the fixed width/height of the
original div, so users can't "scroll" around the webpage.

On May 31, 4:26 am, Janis <janis.skarne...@gmail.com> wrote:
> BecauseiPad/iPhone are the new IE6 - they don`t support css poperty
> 'fixed'.
>
> (http://www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
> andhttp://www.8164.org/designing-for-the-ipad/)
>
> Janis
>
> On May 30, 6:39 pm, Aduffy <incontrolsoluti...@gmail.com> wrote:
>
> > Theoverlaydoes not render correct on aniPadif the user has scold
> > the page first

Ca-Phun Ung

unread,
Jun 8, 2010, 12:40:16 AM6/8/10
to fanc...@googlegroups.com
Since your viewport is fixed you might consider fixing the scale. Add the following to the <head> of your html:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

This will cause the overlay to cover the entire viewable area on the iPad.


--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.




--
Ca-Phun Ung
+ http://yelotofu.com
+ hongkong, zce, jquery, jqueryui, php, css, html

Z

unread,
Jun 9, 2010, 2:16:28 AM6/9/10
to fancybox
worked perfectly. Thanks!
> > fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/fancybox?hl=en.
>
> --
> Ca-Phun Ung
> +http://yelotofu.com

aklein

unread,
Jun 23, 2010, 11:12:39 AM6/23/10
to fancybox
Hi, ich hatte das Problem auch, wollte aber auch nicht das ich auf
meiner Seite in der horizontalen scrollen muss, daher habe ich
Fancybox ein wenig angepasst - jetzt wird auf dem iPad, iPhone und
iPod Touch das Overlay richtig angezeigt ohne das man den Viewport
beschränken muss und die eigentliche Box auch richtig zentriert und in
der Größe vernünftig angepasst.

Wie das aussieht sehr ihr unter: www.kleinbild.org
und das Script könnt ihr euch unter: http://globals.klein-alexander.net/js/jquery.fancybox-1.3.1.js
laden.
Bitte runterladen und auf eurer Seite einbinden, nicht einfach direkt
von meiner Seite einbinden ;-)
> > > fancybox+u...@googlegroups.com<fancybox%2Bunsubscribe@googlegroups.c om>

aklein

unread,
Jun 23, 2010, 11:15:31 AM6/23/10
to fancybox
Fixed version of fancybox: http://globals.klein-alexander.net/js/jquery.fancybox-1.3.1.js
Please download before use. Example of the modified script: www.kleinbild.org

On 9 Jun., 08:16, Z <rgood...@gmail.com> wrote:
> > > fancybox+u...@googlegroups.com<fancybox%2Bunsubscribe@googlegroups.c om>

lemats

unread,
Aug 20, 2010, 11:04:21 AM8/20/10
to fancybox
Thanks (und Danke) Alex!

Alex replaced
fancybox_get_viewport = function() {
return [ $(window).width(), $(window).height(), $
(document).scrollLeft(), $(document).scrollTop() ];
},
by
fancybox_get_viewport = function() {

if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/
iPad/i))) {

var viewportwidth;
var viewportheight;

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}

else
{
viewportwidth = document.getElementsByTagName('body')
[0].clientWidth,
viewportheight = document.getElementsByTagName('body')
[0].clientHeight
}

return [ viewportwidth, viewportheight, $(document).scrollLeft(), $
(document).scrollTop() ];
}else{
return [ $(window).width(), $(window).height(), $
(document).scrollLeft(), $(document).scrollTop() ];
}
},
Reply all
Reply to author
Forward
0 new messages