SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Layer Event Passthrough

    I have a terrific signup/signin setup which works great in FF but is giving me grief in IE (two problems). Here's how it works:

    On whatever page you are you can click sign in or sign up. A div with a semitransparent png background appears with the appropriate dialog (div) on top.

    The first problem I have is that the div with the png background allows interaction with the page below it (only in IE). So roll overs work, and you can click on links. This is not desirable. How can I prevent this from happening?

    I tried setting the div's mouseover and mouseout events to stopBubbling, but that didn't help.

    The second problem is that the labels on the first dialog (signup) aren't showing up. They're the same code as the second dialog (signin).

    I'm confused. Any help appreciated.

    - AAA
    Last edited by alfred3x; Apr 17, 2007 at 09:04.
    - A. Alfred Ayache
    PHP/MySQL ZCE

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got any URL to show this?

  3. #3
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't right now, but I'm thinking it may help to set up a test version.
    - A. Alfred Ayache
    PHP/MySQL ZCE

  4. #4
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I now have a URL to demo:

    http://sandbox.lastbyte.ca/

    In IE, click on the Sign In link in the upper right, and note that rolling over the links (3 of them: Sign Up/In, and Lorem ipsum dollor on the left) allows the links to change colour. And, of course, you can click on the links, which is a no-no.

    Ideally, clicking on the cloak should make it go away. But it's not catching the event.

    Finally, the sign up dialog isn't showing the labels, though the sign in one is. I believe this has to do with the filter hack in includes/theme/iestyles.css to get the PNG alpha transparency to work in IE.

    OK, that's it for now.

    Thanks for your help!

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't see any rollovers on this page. And it seems to work fine in IE 7.

  6. #6
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks for letting me know it works in IE 7. IE 6 however, is still an issue.

    All these problems are directly related to the filter hack in includes/theme/iestyles.css:

    Code:
    /* keep these 2 together or hack doesn't work for ie5*/
    * html #cloak {
    background:#000;/* for ie5*/
    voice-family: "\"}\""; voice-family:inherit;
    }
    * html #cloak{/* for ie5.5 and 6*/        
        background:transparent; 
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grafx/s50.png', sizingMethod='scale');
    }
    /* end hack*/
    Thanks for your help,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi alfred3x,

    I don't have a solution for you, but I thought I'd point out something which could cause subtle problems later.

    In the function doCloak you have scrollTop and clientWidth as global variables, that is... window.scrollTop and window.clientWidth. Make them local to their function by declaring them with the 'var' keyword - as well as any other variables that are intended to only have function (local) scope.
    Code:
    var scrollTop = xScrollTop();
    var clientWidth = xClientWidth();
    Also...
    "javascript:" is typically only used in an "href". It is not needed in an event attribute handler. It declares a protocol such as "http:" or "ftp:" and only makes sense as part of a URL.

    One more...
    As Paul O'B mentioned, you might be better off using conditional comments instead of the CSS hacks. Seems like a lot of trouble just to use 'png' .

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Out of curiosity I modified my page grey demo for a little test. In IE6 links do not "bleed through", and I am only using a semi-transparent div - no image. The dialog boxes don't have to be children of the cloak - they only have to be positioned on top of it.

    Also, there seems to be some malformed html in either the signup or signin elements' children.

    I see you've went to an HTML doctype. Good. Now you can get rid of all those yucky " />",

  9. #9
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Mike!

    In the function doCloak you have scrollTop and clientWidth as global variables
    Good catch. I fixed that. You know, I was just wondering yesterday about var. And today I watched an amazing video series by Douglas Crockford (inventor of JSON and Yahoo's Chief JavaScript Architect), in which he went over the difference between using and not using var.

    Then you mentioned it.

    "javascript:" is typically only used in an "href"
    Yep. Inherited code. Say no more.

    you might be better off using conditional comments
    In fact, I *am* using conditional comments in index.php around line 11.

    But I had an epiphany. Let me bounce it off you guys:

    At first I tried using an opaque div for the cloak. Then I found that all children would inherit the opacity, and that wouldn't fly. Which led me to the alpha transparency png and that infernal filter and its litany of side effects.

    Let's revisit the opaque div, but this time make the dialog divs separate (not children of cloak), so they don't inherit the opacity, and we position them as and when they're needed. Thereby neatly sidestepping the filter and associated problems.

    Any thoughts? Issues?

    (Oops, just saw your subsequent post... Hey, great minds think alike. )

    Thanks again for your help,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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