Quantcast

extend overlay on iphone?

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

extend overlay on iphone?

wc
When I click on a link using the shadowbox on an iphone (including the examples on the shadowbox site), the shadowbox appears at the top of the page and overlay only extends as far as the first screen.  If I scroll down further, the overlay ends.  This makes it difficult to use if I have a long page of material.  If someone clicks on something at the bottom of the page, the shadowbox and overlay open at the top and users probably won't notice as the part of the page they are looking at will not change.  

Does anyone have any insights on how to fix this or suggestions on where I should look in the code in order to extend the overlay to ensure the entire page is covered?  It's fine the various desktop browsers.  I figure iphone users can adapt and jump back up to the top of the page if need be to view the material, but there still needs to be some indication that the shadowbox has opened.  I've tried editing the lines with #sb-overlay in the css, but didn't see any results.

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

Re: extend overlay on iphone?

thomas
exact same problem... any idea ?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Bill
Same problem seen here too. Would also really appreciate some advice on this one.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

cadmonkey33
Similar problem here. Overlay only covers 2/3 of the screen.
Works great other than that.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Tex
Yeah, and not just shadow box. It appears to happen with all lightboxes that I've seen so far.  I was hoping iPhone os 4 would fix the way it handles the browser window, but no.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Tex
In reply to this post by cadmonkey33
I feel like the bigger issue is that it always seems to sit at the top of the page.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Bubbly
In reply to this post by wc
I have the exact same problem and I would like an answer.

The full height overlay seems to be working in Lightbox on all browsers including iphone. Example: http://www.elcandor.com.ar
However, lightbox only displays images.

How do I implement a similar trick to shadowbox? Help would be appreciated.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Larsen
Same here. Any progress?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

sakisan
In reply to this post by Tex
Hello,
it works on my side with a plugin in wordpress using thickbox but i've the same trouble as everyone here with shadowbox... So it doesn't come from the iPhone... I'm looking for an css issue, please anyone who could help will be more than welcome!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

sakisan
In reply to this post by wc
i'm looking for how to fix it and found a man saying he did it.
See my link on this thread : http://shadowbox-js.1309102.n2.nabble.com/IPad-safari-browser-tp4713039p4713039.html
It could be better to be all on the same thread.

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

Re: extend overlay on iphone?

Rob
Not the ideal solution, but you guys can try this code. First, paste this into the <head> of your page:

<script type="text/javascript"> document.onkeydown = function(ev) { var key; ev = ev || event; key = ev.keyCode; if(key == 37 || key == 39 ) { ev.cancelBubble = true; ev.returnValue = false; } } if((navigator.userAgent.match(/iPad/i))) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipad.css\" charset=\"utf-8\" \/>"); document.write("<meta name=\"viewport\" content=width=1024px, minimum-scale=1.0, maximum-scale=1.0 \/>"); } else if(navigator.userAgent.match(/iPhone/i)) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphone.css\" charset=\"utf-8\" \/>"); document.write("<meta name=\"viewport\" content=width=768px, minimum-scale=1.0, maximum-scale=1.0 \/>"); } else { document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>"); } </script>


Then, make a separate css called iPhone.css

In that file, change the following sb css codes to

#sb-container{position:absolute;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:absolute;height:1400px;width:1500px;}

You'll need to adjust the overlay px depending on your page height/width, but this is a working solution
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Chris
In reply to this post by wc
There is a solution using media queries to extend the height of the overlay

@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: extend overlay on iphone?

wbzdghdn010
In reply to this post by wc
Same problem seen here too. Would also really appreciate some advice on this one.
http://www.utfifa.com/
http://www.profutcoins.co.uk/       
       
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: extend overlay on iphone?

Ernest Blair
In reply to this post by wc

Sometimes, when the position of an element is set to fixed, it can create problems on the default Android browser. In my case, I have a mobile menu that is visible only when the visitor clicks on the menu icon. Displaying the mobile menu also adds an overlay.

If the overlay is using a fixed position , no matter what, on my Android device, as soon as I scroll down, the menu will close itself. If I replace the fixed position by an absolute one, the menu stays open when I scroll down.

This happens only the default Android browser, there is already an existing question on SO
Loading...