this site overcomes the "select / z-index / IE" issue

Discussion in 'Javascript' started by Bucky, Jun 6, 2005.

  1. Bucky

    Bucky Guest

    I know this issue is discussed frequently, but all the threads end
    with, "There is no way around this... this is how IE is designed."

    Well, I found a site that has completely solved this problem. It's not
    hiding the entire SELECT element, or using some other method to
    simulate the SELECT box. It's using real SELECT boxes, and even if the
    menu layer only covers half of the SELECT box, it displays it
    correctly.

    I tried looking in the source, but I can't figure out how it does it.
    Can anyone figure it out? The source code is very clean. I found some
    code that checks for SELECT elements and hides them if overlapping, but
    that doesn't explain how it can hide half of the SELECT element.

    Open this site with IE, and mouse over the menus. You will be amazed:
    http://titantv.com/TTV/Grid/Grid.aspx
     
    Bucky, Jun 6, 2005
    #1
    1. Advertising

  2. Bucky

    Bucky Guest

    > I tried looking in the source, but I can't figure out how it does it.
    > Can anyone figure it out? The source code is very clean. I found some
    > code that checks for SELECT elements and hides them if overlapping, but
    > that doesn't explain how it can hide half of the SELECT element.


    I've narrowed it down to this include file, which unfortunately, is not
    easy to read:

    http://titantv.com/scripts/menu/menu_f_6_IE6DHTML.js.aspx

    It appears that this was generated by this professional software:
    http://www.coalesys.com/products/mercuryuiasp/features/webmenu.asp

    One of the features listed is "Cover IE Select Boxes". =) I just wish I
    could figure out how they do it!
     
    Bucky, Jun 6, 2005
    #2
    1. Advertising

  3. Bucky

    Bucky Guest

    I couldn't fully understand the code, but I did get an idea while
    trying to decipher the code. I tested my idea, and it worked!

    You can cover up an IE select box with an iframe. So whenever you
    display a layer menu with a div tag, you place an iframe of the exact
    size and position underneath it. The iframe will automatically block
    out anything below, even PARTIAL SELECT BOXES!

    Here's the concept:

    div layer menu: z-index: 20
    iframe: z-index: 10
    select: z-index: 0
     
    Bucky, Jun 6, 2005
    #3
  4. Bucky

    small Guest

    hi,
    Good job!!
     
    small, Jun 6, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mike kim
    Replies:
    2
    Views:
    530
    clintonG
    Aug 20, 2003
  2. Jason Hanks
    Replies:
    2
    Views:
    480
    Jason Hanks
    Jun 22, 2004
  3. jensen bredal
    Replies:
    2
    Views:
    434
    jensen bredal
    Apr 15, 2005
  4. Tiddley-Pom
    Replies:
    5
    Views:
    428
    Mark Parnell
    Oct 15, 2003
  5. Jeff Thies

    OT: ftp site to site

    Jeff Thies, Jan 4, 2005, in forum: HTML
    Replies:
    2
    Views:
    422
    Timothy
    Jan 6, 2005
Loading...

Share This Page