SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-index and SELECT Tag

    I've got a DHTML drop down menu that should go over a SELECT box, but the SELECT box ends up on top. The Z-index doesn't seem to help. Any solutions out there?

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <select> is a windowed element
    What's a windowed element?
    Read this article: http://msdn.microsoft.com/library/en...ui05072002.asp

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jofa,
    Thanks. It's not the answer I wanted to hear. But, now I know that this is a problem and some ways around it.

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When the html specification was written - it was decided that the control system for the select box should utilize the system control - rather than the browser's.
    That's my understanding of it.

    Not sure how the solution goes... but ...
    You could try something like this ( off the top of my head, and assuming the menu drops DOWN rather than across )



    Code:
    var cshid=new Array();
    function shider(men){
                    csmen=men;
                    sels=document.getElementsByTagName('select');
                    for (var s in sels){
                            ttop=0;
                            alad=de(s);
                            while (alad){ttop+=alad.offsetTop;alad=alad.offsetParent;}
                            if (ttop<150 && s!="length"){
                                    de(s).style.visibility='hidden';
                                    cshid.push(s);
                                    }
                            }
            }
    function shidden(){
            for (var h in cshid){
                    de(cshid[h]).style.visibility='';
                    }
            cshid=new Array();
            }
    That assumes the drop down aways stops at 150 - however - you could adjust that for dynamic height.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    SitePoint Member
    Join Date
    Mar 2004
    Location
    bangalore
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have same problem, let me know if it is solved...i was trying using the code posted by (Flawless_koder)...but got some problem with it, if you have solved it pls help me out.

    Thanks

  6. #6
    SitePoint Member
    Join Date
    Mar 2004
    Location
    bangalore
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, can u tell me why you have used this alad=de(s); in your code.

    Thanks

  7. #7
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ravi_bgl
    Hi, can u tell me why you have used this alad=de(s); in your code.

    Thanks
    de is a function to get an element by id.
    In it's simplest form:
    Code:
     function de(n){
     	return document.getElementById(n);
     	}
    F
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  8. #8
    SitePoint Member
    Join Date
    Mar 2004
    Location
    bangalore
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot Flawless_koder


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
  •