Quantcast

shadowbox not filling the whole screen on iPad's Safari

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

shadowbox not filling the whole screen on iPad's Safari

jghad
No matter what positioning the iPad is in (landscape or portrait), shadowbox doesn't fill the safari screen completely (the dark overlay has a gap to the right and bottom of it). Is there some sort of switch I need to turn on to make this work 100% on the iPad? Any info or suggestion is appreciated.

thanks;
J.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

HenzeBerkheij
are you explicitly talking about the black overlay?? i think you have to modify the CSS since it is an CSS problem ;)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

jghad
Exactly. How do I go about modifying the CSS to resolve this issue? Thanks for the help.

henzeberkheij@gmail.com wrote
are you explicitly talking about the black overlay?? i think you have to modify the CSS since it is an CSS problem ;)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

Shiva
hi, I am having the same proble.
were you able to resolve your issue, do you mind to share it with us?

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

Re: shadowbox not filling the whole screen on iPad's Safari

Marco [Websonica]
I have the same problem, It is not a problem of css in my opinion.
I think that count of dimension of browser viewport is not valid on Safari for IPAD.
So maybe is a javascript problem, but I don't know how to fix it.
If I find a solution today I will post it here..
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

Marco [Websonica]
Ok I'll try to share what I found. I'm little confused and a little uncomfortable with this solution..
My solution is a hack I have to thanks the guy that talk about the viewport meta.

At begin you need to set viewport meta as described here:
http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html


I think that there is some problem with vieport setting and reading by Iphone
At beginning I start with a simple jquery setup..

if((navigator.userAgent.match(/iPad/i))) {
$("head").append('<meta name = "viewport" content = "user-scalable = yes"/>');
}

on change of orientation you need to refresh the viewport width beacuse shadowbox seem to use viewport width to calculate the width of #sb-overlay.

I found this little funny snippet of code
http://stackoverflow.com/questions/2831529/having-trouble-using-jquery-to-set-meta-tag-values/5066743#5066743

You need to set up a meta tag viewport with a standard value the above value is safe.. then at change of orientation you can change the meta value with this snippet (thanks to author it works)

 Shadowbox.init({
      onOpen: function() {
                                $('meta[name=viewport]).attr( 'content', 'width=1024, minimum-scale=0.25, maximum-scale=1.6');
});

Simply forcing the viewport width one time is not a solution, because when you change orientation, shadowbox is not able to resize itselfs.
This could be a way to solve it with a little coding, But I warn you I don't test perfectly this way.

In fact I found an other simpler solution:

You can use magic..

I set up meta in this way.. <meta name = "viewport" content = "width = device-height" />

width = device-height ???

this works for me, I wish only to understand better how this works...

Really IPAD calculate the viewport dimension at change of orientation with some complex logic to keep the most of website pretty on their devices.

If you take a test you will find that jquery read the viewport width at 980 when is 1024 in landscape portrait and a little less also in the other orientation. This cause shadowbox strange wrong calculation.

So It works but I don'know why... :-D Thanks to all that wrote about this..
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

Chris
In reply to this post by jghad
I answered this in another thread. There is a solution to extend the height of the overlay using media queries

@media only screen and (device-width: 320px) {
    #sb-overlay {height: 117%;}
}
@media only screen and (device-width: 320px) and (orientation: landscape) {
    #sb-overlay {height: 129%;}
}
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: shadowbox not filling the whole screen on iPad's Safari

wbzdghdn010
In reply to this post by jghad
Ok I'll try to share what I found. I'm little confused and a little uncomfortable with this solution..
http://www.utfifa.com/
http://www.profutcoins.co.uk/
Loading...