Shadowbox for mobiles (iphone, ipad, ipod) : an alternative.

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox for mobiles (iphone, ipad, ipod) : an alternative.

Pierre CIHOLAS
Hello and thank you Michael for you shadowbox, your script is amazing.

I am doing a "responsive" website (adaptive to mobile devices) with the whole system of shop and registering on a popup (on a shadowbox !) and the shadow box didn't work properly on mobiles devices as the position:fixed is not accepted or wrongly interpreted.

My "over site" is also a web app so I installed the cubiq script opening a popup saying "clic here to add to the home screen" and when the shadowbox of this oversite opened the script was running but if I clic on add to home screen, it's the main site that adds, not the webapp loaded in the shadowbox, so here is the trick I used :



1. Enable the option "Skip Setup", so the instruction "Shadowbox.setup();" must be manually writen to start Shadowbox.

2. In the footer of your pages add the following script :

<script type="text/javascript"> //stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit if(navigator.platform != 'iPad' && navigator.platform != 'iPhone' && navigator.platform != 'iPod') { Shadowbox.setup() }; </script>
3. On you link opening in Shadowbox add : target="_blank"



So now, when you want to open a link with shadowbox, if you are on a mobile device it opens in a new browser window, and on a computer it opens on shadowbox.

I hope it will be usefull for someone, it's tested on Iphone, iPad, iPod, Safari (windows), Firefox, Opera, Chrome all up to date.