[JS/DHTML] <SELECT> en z-index

[Verwijderd]

Hoe zorg ik dat ik een transparante iframe krijg over een selectbox?

Zoals bekend, kun je met z-index bepaalde objecten over andere objecten heen plaatsen, zodat je bijvoorbeeld een menu over een page heen kan zetten.
Dit werkt perfect voor alle objecten, behalve voor <OPTION> tags, omdat dit een zgn 'windowed' object is. Doordat het object windowed is, zal hij ten opzichte van een 'nonwindowed' object altijd on-top staan.
Dit betekent in de praktijk dat mijn selectboxes altijd fier door mijn menu heen prikken.
Er is een workaround voor dit probleem, door een iframe over een select te plaatsen, deze een z-index waarde van > 5 geven. Daardoor wordt de iframe zichtbaar en is het mogelijk om daaroverheen een 'normale' layer te plaatsen.
Ik zou dus een script kunnen maken, dat over alle select's een iframe heen zet zodat ik daarover altijd mijn menu zie.
Nou wil je natuurlijk de originele content van de pagina zien, terwijl die ifame er overheen staat, dan maak ik hem dus transapant en dan gebeurt het: de iframe wordt transparant, behalve op het gedeelte waar de select er onder staat.

De volgende source gebruik ik voor de iframe:

code:

<IFRAME
    SCROLLING="No"
    FRAMEBORDER="0"
    SRC="#"
    HEIGHT="100"
    WIDTH="100"
    STYLE="position:absolute;
            left:0px;
            top:20px;
            z-index:6;
            filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);">
</IFRAME>

Als iemand een voorbeeldpage wil zien, kan ik die zo even opzetten, maar denk dat dit nu nog even niet relevant is.


P.s.: Ik Google/Search/MSDN gebruikt, en vindt het nu wel postwaardig.

[whoami]

clientside zut hoort thuis in w&g, niet in p&w
-> W&G

[Skaah]

kun je niet gewoon je select op visibility: hidden zetten wanneer je je menu opent?

[André]

Je zult de select onzichtbaar moeten maken op het moment dat er een DHTML menu overheen gaat.

[Verwijderd]

André schreef op 20 april 2004 @ 15:16:
Je zult de select onzichtbaar moeten maken op het moment dat er een DHTML menu overheen gaat.

Ja, dat is misschien nog wel het handigste. Gewoon als je op het menu klikt alle selects hidden maken, en vervolgens weer visible als je het menu sluit.
Soms denk ik op een bepaalde manier iets op te gaan lossen terwijl de oplossing dichterbij ligt. Dank je wel voor een verhelderend moment.
Hoewel: natuurlijk vindt ik het wel jammer dat er nog geen workaround is voor deze smerige bug en wil ik nog steeds weten waarom die transparency ook niet werkt.

[BtM909]

Verwijderd schreef op 20 april 2004 @ 15:34:
natuurlijk vindt ik het wel jammer dat er nog geen workaround is voor deze smerige bug

Het is geen bug, maar intended behaviour . Selects worden nou eenmaal boven alle andere elementen gerenderd

[Verwijderd]

BtM909 schreef op 20 april 2004 @ 15:43:
[...]

Het is geen bug, maar intended behaviour . Selects worden nou eenmaal boven alle andere elementen gerenderd

Ok, het is logisch dat dit gebeurt, maar het is niet gewoon niet handig dat er objecten zijn die een aparte z-index hanteren, dat niveau van het hoe en waarom wil je als developper van een webpage gewoon niets mee te maken hebben.

[BtM909]

Verwijderd schreef op 20 april 2004 @ 16:35:
[...]


Ok, het is logisch dat dit gebeurt, maar het is niet gewoon niet handig dat er objecten zijn die een aparte z-index hanteren, dat niveau van het hoe en waarom wil je als developper van een webpage gewoon niets mee te maken hebben.

Daar is in het verleden ook al uitvoerig over gediscussieerd . Laten we dat onderwerp maar met rust laten

[Verwijderd]

Daar is in het verleden ook al uitvoerig over gediscussieerd . Laten we dat onderwerp maar met rust laten

/me knikt instemmend.

[SchizoDuckie]

*schop*

Ik had deze vandeweek al even gezien en een mental note gemaakt, maar kom er net pas aan toe om de code die ik gevonden had in een DHTML kalendertje te optimizen.

JavaScript:

function hideTag(overLap, tagName)
{
    var tagList = document.getElementsByTagName(tagName);
    for (i = 0; i<tagList.length; i++)
    {
        if (obj = tagList[i] && obj.offsetParent)
        {
            objLeft   = obj.offsetLeft;
            objTop    = obj.offsetTop;
            objParent = obj.offsetParent;
            objHeight = obj.offsetHeight;
            objWidth = obj.offsetWidth;
            while (objParent.tagName.toUpperCase() != "BODY")
            {
                objLeft  += objParent.offsetLeft;
                objTop   += objParent.offsetTop;
                objParent = objParent.offsetParent;
            }
            if ( !((overLap.offsetLeft + overLap.offsetWidth)  <= objLeft || (overLap.offsetTop + overLap.offsetHeight)  <= objTop || overLap.offsetTop >= (objTop + objHeight + obj.height) || overLap.offsetLeft >=  (objLeft + objWidth))) 
            {
                obj.style.visibility = "hidden"; 
            }
        }
    }
}

function showTag( tagName)
{
    var tagList = document.getElementsByTagName(tagName);
    for(i = 0; i < tagList.length; i++)
    {
        if( obj = tagList[i]; && obj.offsetParent ){ obj.style.visibility = ""; }   
    }
}

Aanroepen als volgt:
hideTag(this.subMenuDiv, 'select')
bij bijvoorbeeld een mouseOver op een menuItem
deze hide dan op dat moment alle <select>'s die this.subMenuDiv overlappen


Hope this helps

[ Voor 5% gewijzigd door SchizoDuckie op 22-04-2004 16:42 ]

[Verwijderd]

Dankjewel voor je hulp.
Ik had ondertussen al bijna hetzelfde script gemaakt, dat ook alle selects hide als je een menu opent en weer visible maakt als het menu sluit. Great minds think alike ;-)