Vis layer FORAN form objects

Det er kun <select>'s der er problemer med, og det korte svar er "det kan du ikke".
Normalt skjuler man selects med visibility attributten via JS, men ellers kan du lave dine layers om til iframes i stedet. De kan nemlig godt ligge oven over selects.

Ah - ok, det er præcis et <select>-object jeg har (troede det var alle input-felter/typer). Hvordan "skjuler man selects med visibility attributten via JS"? Har du mon et eksempel, link el. lign.?

Her er 3 eks:

<div style="border:1px solid black;position:absolute;width:100px;height:50px;top:20px;left:50px;z-index:2"></div>
<select id="test1" name="test1" style="position:absolute;top:40px;z-index:1">
  <option>hej med dig</option>
  <option>hej med dig</option>
  <option>hej med dig</option>
</select>

<div style="border:1px solid black;position:absolute;width:100px;height:50px;top:120px;left:50px;z-index:2" onmouseover="document.getElementById('test2').style.visibility='hidden';" onmouseout="document.getElementById('test2').style.visibility='visible';"></div>
<select id="test2" name="test2" style="position:absolute;top:140px;z-index:1">
  <option>hej med dig</option>
  <option>hej med dig</option>
  <option>hej med dig</option>
</select>


<iframe frameborder="0" style="border:1px solid black;position:absolute;width:100px;height:50px;top:220px;left:50px;z-index:2"></iframe>
<select id="test3" name="test3" style="position:absolute;top:240px;z-index:1">
  <option>hej med dig</option>
  <option>hej med dig</option>
  <option>hej med dig</option>
</select>

Det første eks virker ikke.
Andet eks skjuler/viser selecten når man flytter musen over diven.
Trejde eks benytter en iframe, som godt kan ligge over select når z-index er højre.

Iframen kan fyldes med info enten via src (fil) eller gennem JS.

I FF virker z-index fint og placere diverne oven på. Kræver dog en beggrund forat se:

eks 1 med baggrund:
<div style="background-color:#666666;border:1px solid black;position:absolute;width:100px;height:50px;top:20px;left:50px;z-index:2"></div>
<select id="test1" name="test1" style="position:absolute;top:40px;z-index:1">
  <option>hej med dig</option>
  <option>hej med dig</option>
  <option>hej med dig</option>
</select>

Det ser umiddelbart ud til at virke. Problemet er mit layer er en menu med en eksisterende mouseover/out - og mouseout vil ikke virke :-/ Kan du spotte om man kan indsætte en mouseout i nedenstående, for så tror jeg den er der (den vil nemlig godt skjule dropdown'en - men den vises ikke ved mouseout):

function dropdownmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}

find dynamichide() funktionen et sted i koden. Som jeg kan se det, så bliver den kørt onmouseout nu, så du kan tilføjer "vis select" til denne funktion.

Hvad er det for et menuscript du bruger??

Det er "AnyLink" (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm)

Mht. koden - så står flg.:

function dynamichide(e){
if (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}



Mange tak for hjælpen!

ok, det er faktisk ikke helt den udgave jeg linker til, ser jeg. Kan ikke huske, hvor jeg har en nyere udgave fra :-/

Det er vist denne udgave: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

Ja, det er sidstnævnte - direkte link til js-fil: http://www.dynamicdrive.com/dynamicindex1/anylink.js

function dynamichide(e){
if (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
document.getElementById('selectBox').style.visibility='visible';
}

Husk at din select box skal have et ID. name er ikke nok:
<select id="selectBox" name="selectBox">

Hmm det virker desværre ikke - menuen forsvinder godt nok, men dropdownen kommer frem når man kører over menu-punkterne. Kører man IKKE over menupunkterne kommer dropdownen IKKE til syne igen - selv hvis man tager musen et helt andet sted hen på siden :-/ Weird....

Det er problemet med færdige menusystemet, nå de ikke er forberet på select problemet :(

Og rette kildekoden så det virker er ikke nogen nem opgave. Så er det sikkert hurtigere/nemmere at finde et andet menu system som er forberedt på problemet (f.eks Coolmenu)

Jah - men det hjælper mig ikke. Prøver at rode lidt videre med det :-)

Hvis du er frisk på det, så skift til coolmenu:
http://www.dhtmlcentral.com/projects/coolmenus/

Den har indbygget OnMouseOver/Out funktioner, så den er klar til dropdown problemet. Jeg lavede faktisk et dynamisk script engang, som automatisk fandt alle selects på siden og viste/skjulte dem. Så det kan du få, hvis du skifter :o)

-- og et script, som viser/skjuler alle selects er nu ikke så stort:

function showHideSelects(mode){
  var sels = document.getElementsByTagName("select");
  for(i=0; sels.length>i; i++)
    sels[i].style.display = mode;
}

-- og det kaldes med showHideSelects("none") / showHideSelects("inline") ...