www.webdeveloper.com
Results 1 to 4 of 4

Thread: Android Browser unable to click some links

  1. #1
    Join Date
    Aug 2011
    Posts
    6

    Unhappy Android Browser unable to click some links

    (I posted this yesterday and I was informed it needed to be approved by a monitor, but it's been about 16 hours now so I'm re-posting)

    This is my first of likely many posts so hello to all!

    First-off, I debated if I should put this in the javascript, css, or html section. I suspect the problem has more to do with css hence my posting here.

    Secondly, I'm doing web development and following (or trying to follow) the mobile-first philosophy.

    OK here's the issue:
    I'm currently creating a site that uses a lightbox-like pop-up window (or faux-window) to display content. The problem comes with "closing" the window...

    Here's the site: http://www.getdesign.ca/problem1.htm

    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:
    I'm using my own code and not a pre-made lightbox. I basically have absolute positioned divs in the center of page with css display set to "none". When you click a link, javascript switches them to "block". When you click to close the window, javascript sets it back to "none".

    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.

    Compatibility
    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 .

  2. #2
    Join Date
    Sep 2011
    Posts
    2

    Did you resolvethis?

    Hi, just wondering if you made on progress on this? I have a problem which sounds vaguely similar (erratic behaviour after scrolling in an iframe/prettybox) and would appreciate any pointers..

  3. #3
    Join Date
    Aug 2011
    Posts
    6
    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.

  4. #4
    Join Date
    Sep 2011
    Posts
    2
    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..

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles