Quantcast

IPad safari browser

classic Classic list List threaded Threaded
101 messages Options
1234 ... 6
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

IPad safari browser

igfarm
When using shadowbox on the iPad Safari browser, the shadowbox shows up at the top of the page, and now on the current scroll position. Is this an issue that can be fixed on the shadowbox codebase or the iPad?

Thanks,
Jaime
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Zooskifilms
Check it in other browsers and make sure its really only iPad Safari. I had the same problem before and it was a coding issue.

Mark
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

igfarm
I do not think is my code, since its also happening on the http://www.shadowbox-js.com/ site.

I go to:

http://www.shadowbox-js.com/

scroll down so the tiger picture is on the upper part of the screen and touch the tiger picture.  The shadowbox shows up on the upper part of the page.

-- Jaime
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

mjijackson
Administrator
What version of Safari runs on the iPad? It's difficult to test/verify this one because I don't have one.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

combs1945
In reply to this post by igfarm
I have dealt with this problem on iphone safari and android chrome.  My assumption is that iPad is using a variant of the iPhone Safari engine, if not the same one.  

There are no lightview/shadowbox/lightbox internal popups that use JS that do not have the problem of pushing the popup at the top of the page.

I built one that works using css3 that will work for both iPhone and android devices.  It should work for iPad.

http://www.combsconsulting.com/iphone-android-lightbox-lightview-internal-popup/index.html
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Bingo
In reply to this post by igfarm
Its the same problem with the iPhone and iPod touch. They all use the mobile version of safari (http://www.apple.com/iphone/iphone-3gs/safari.html). I really hope this problem can be fixed soon.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

iPad shaddowbox version in css3

combs1945
In reply to this post by combs1945
I built a lightview lightbox shaddowbox variant using css3 that stays centered on the iPad.  I have built the first comprehensive explanation of several methodologies of how to make an iPad Website or Web App.  It covers caching, Flash image swap, lightview popup, and all you need to know about building or porting a website for iPad.
http://www.combsconsulting.com/ipad-website-example/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Calimero
Combs1945 could you repost url to iPad exaple site? It is broken!

Thanx!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Mark
I See the same thing both on my site and the Shadowbox-js site.

Display a picture and SB shows it at the top of the screen, not in the current view window. I see the message about what version of safari/webkit. not sure is there a site that i can point to that will let me know the version that I am seeing. Sure there is in fact.

Anything I can do to help resolve this I would be most keen to do/help etc

Mark
Roy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Roy
This is really a pressing issue. Has anyone got any ideas on how to fix this or sidestep it?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Daniel Da Cunha
I have been able to reproduce the issue on iPad (iOS 3.2) as well as iPhone (iOS 4.0) and also in the iPad emulator in XCode. You might be able to get a hand on that last one for debugging.

I have tried to get it work but didn't had so much time to give so far, will give it a go another day.

Cheers,
Daniel  
Roy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Roy
Good to hear that this is an issue others are interested in. Looking forward to future developments on this bug.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Shane Avery
We have purchased 8 site licenses for shadowbox and have been patiently watching this thread and waiting since May for a response from the developer on this issue.  We also need this to work on the iPad.  Can you please give us at least an ETA when you will look into this?  Are you ever going to look into this?  If not, please let us know so we can seek alternative options.

Thank you.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

_ivan
Absolutely right!!!
This is a huge issue. In the first 3 months Apple sold 3 millions iPads!!!
Please, fix this bug >>>
The shadowbox shows up at the top of the page, and now on the current scroll position
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

_ivan
you could always before shadowbox fires scroll on top for iPad and problem solved
jquery example >>>


if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPad/i))) {
                $('a[rel^=shadowbox]').each(function() {
                                $(this).click(function() {
                                        setTimeout(scrollTo, 0, 0, 1);
                                });
                }); //end:each
}
Roy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: iPad shaddowbox version in css3

Roy
Ivan, Where do I paste this fix?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Pedro
In reply to this post by igfarm
One of the solutions I've found is to have a viewport meta tag if your site has a fixed width. It solved my problem. Here's the code I used:

<meta name="viewport" content="width=800">       

Regards,
-Pedro
Jim
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Jim
In reply to this post by igfarm
For those using jquery, add a scroll event listener and adjust the top position of #sb-container.

$(window).bind('scroll', function(){
  $("#sb-container").css("top", $(window).scrollTop());
});

It doesn't look perfect but will do for now.
Roy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Roy
The "Scroll to the top"-fix looks like the best solution yet. Could someone tell me where to paste what to get that working. Do I add

"$(window).bind('scroll', function(){
  $("#sb-container").css("top", $(window).scrollTop());
}); "

to the "shadowbox.js"-file and if so where.

I am afraid my java-scripting skils are weak to say the least.
All help would be greatly appreciated.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IPad safari browser

Ethan Liu
a summary from this thread

Shadowbox.init({
        handleOversize: "resize",
        onOpen: function() {
                if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPad/i))) {
                        $("#sb-container").css("top", $(window).scrollTop());
                        $(window).bind('scroll', function() {
                                $("#sb-container").css("top", $(window).scrollTop());
                        });
                }
        },
        onClose: function() {
                if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPad/i))) {
                        $(window).unbind('scroll');
                }
        }
});


1234 ... 6
Loading...