On a desktop, everything works fine with every browser (except ie6 and 7 but that's another problem I can work out on my own). On my Android, I cannot easily close this window.
How the code works:
It should be possible to close it by clicking the "X" in the top right, the "close" link at the bottom, and by clicking anywhere outside this window. On Android, it is possible to close the window under the following circumstances:
If I don't scroll at all, and click the "X" in the top right, it *sometimes* works.
If I click below the "X" enough so that I'm clicking closer to "about", it works. This has something to do with the fact that I made the clickable area of the "X" much larger than the "X" itself (80x80 pixels)
If I click near the bottom "close" link like a madman, it works maybe 1 out of 50 times.
Like I said before, no problem on the desktop.
On my Android (Motorola Milestone) I have tested this on the Android 2.2 native browser, as well as Dolphin HD (same problem) and Opera Mobile (works fine, no problem).
More about the code:
If you look at the code it should be pretty self explanatory... but if you're having trouble understanding what I'm doing...
div id="contentBackground" <-- this creates a dark background
div id="about" class="contentWindow" <-- this creates a box that helps center the next divs...
div class="contentWrap" <-- heavily styles and sets the size of the faux-window
div class="closeWindow" <-- creates "X" in top right area
a class="closeText" <-- just the "close" text at the bottom
In the css these styles are grouped together starting on line 143 of the get.css file. The other styles you can *probably* ignore.
Any help or even moral support would be appreciated greatly .
It's a bit hard to explain how I fixed it, and it's not a satisfying fix, but I ended up making top-right "X" "close button" div (class="closeWindow) outside and above the div=contentWrap and placed it in the correct spot via positioning. In theory, this shouldn't even make a difference but on my Android it does.
I'll make an example of the fix if I have time.
Pealy, if I saw your problem first-hand I might be able to help, but just so you know, iframes with scroll-bars are insanely confusing to use on the Android browser. In fact, from the research I've done, you in fact cannot scroll an iFrame at all.
If you can figure-out a way to use something other than an iFrame, I would suggest doing so.
Hi - thanks for the update. Although my problem is a bit different to yours at the root is the same scrolling problem, hence the question. I couldn't find anything else even remotely similar by googling. It sounds like your workaround didn't solve the issue so I'm still stuck.
I would love to open up my page for you to see but I'd have to let you into my network and would prefer to avoid. Basically I have a page with a lot of buttons in a list. Clicking one when the Prettyphoto box appears is just fine, but if you scroll down and click the click event is generated by the button which was in that position before you scrolled - if that makes any sense. So if 1-10 are displayed on popup, then you scroll to show 11-20 and then click, say, 15 you get the click generated by the 5 button! Annoying it is, everything is fine in IE and Chrome on my laptop, it's just my android 3 device..