SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layers and drop-boxes

    I have a site in which a cascading menu is implimented using layers. Unfortunately, if I have any <SELECT> drop-downs on the page, the layers always pop up behind the box! What do I have to do to ensure that the layer is always displayed in the forground in front of anything else on the page?

    Thanks

    Paul
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we see some code please? But at first glance all it seems like you'd have to do (in order to make your drop down menu display on the foreground every time) is increase your layer's z-index (or their 3D positioning).

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    these don't hide underneath layers. Display:none will get rid of them, as will a set division with overflow:scroll, which hides the drop-down as its scrolled out of view.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give the z-index thing a bash, thanks. Not sure I follow the "set division with overflow:scroll" suggestion - can you elaborate?

    TIA

    Paul
    Paul Simpson, BSc, MCNI, MCNE

  5. #5
    SitePoint Zealot fmavituna's Avatar
    Join Date
    Apr 2003
    Location
    istanbul
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is standart problem in JS, the best way to solve it hide all dropdown boxes near the layer.

    Check this out;
    http://students.infoiasi.ro/~mishoo/site/calendar.epl

    In this calendar you can see this feature.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya, more explanation here:

    www.webreference.com/dhtml/diner/seethru/

    Although, I've seen a workaround using IFRAMEs in the dropdowns that mus appear later source order than the SELECT. Kind of a PITA, but it works.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fmavituna
    This is standart problem in JS, the best way to solve it hide all dropdown boxes near the layer.

    Check this out;
    http://students.infoiasi.ro/~mishoo/site/calendar.epl

    In this calendar you can see this feature.
    That is the most awesome calendar script I've ever seen... (Sorry to go off-topic, had to say it though.)


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
  •