SELECT OPTION hamnar över DIV

[Bellfalasch]

Jag kör en enkel meny på min sajt. Man för musen över en TD som då sätter värdet visible på en DIV som annars ej är synlig. När musen förs bort så är DIC ej visible. Koden för allt detta kommer före allt annat på sidan.

 

Jag har även en SELECT OPTION (form) på sidan. När en, av de många, av mina menyer faller ner över just denna så hamnar ändå den överst och menyn underst. Alltså man kan klicka i SELECT OPTION-fältet med menyn nere. Menyn borde ju ligga överst. Jag kör XP, IE6 SP1. Men även en med W2K, IE6 SP1 fick samma fel.

 

Jag provade med z-index, samt att ge dessa extrema värden. Både på FORM o på själva SELECT (samt min DIV så klart). Kan man avhjälpa detta fel på nåt sätt (om nån fattat vad jag menar).

 

[Stefan K]

Select har tyvärr förmågan att lägga sig över andra saker. Ett alternativ är att med Javascript tillfälligt dölja select-fältet när lagret visas.

 

 

~ Stefan ~

 

"Ingen kan hjälpa alla men alla kan hjälpa någon."

 

[Bellfalasch]

Jag har försökt att få alla select-fält dolda varje gång menyn öppnas, men utan att lyckas. Den vill inte alls döljas. Jag har provat med ID och CLASS på alla SELECT OPTION-fält som sätts visible=false när menyn visas. På de sidor där inga SELECT OPTION-fält så blir det error.

 

Kan nån hjälpa mig med lite smidig kod för det?

 

 

[dAEk^]

Att select-listor hamnar överst beror på att de är medlem av window och inte document som övriga element på sidan är.

 

För att dölja ett element, använd:

document.getElementById("elmID").style.display="none";

eller

document.getElementById("elmID").style.visibility="hidden";

 

beroende på hur du vill att objektet skall gömmas.

 

[Bellfalasch]

getElementById funkar fint, för en scroll-lista. Jag provade getElementByClass men det fanns inte. Anledningen är att jag vill dölja alla scroll-listor då vissa sidor har flera.

 

Sen är problem nummer två att om ingen scroll-lista finns på en sida så blir det error (för menyerna visas på alla sidor). Detta kan förvisso skötas via ASP att jag sätter en variabel (scroller = True) på alla sidor med scrollmenyer. Men kan inte sköta det enkelt o smidigt med JavaScript? Typ If form.scroll[0] > "" Then (eller nåt sånt, chansar bara nu)

 

[inlägget ändrat 2003-12-03 14:11:50 av Bellfalasch]

[Telleluy]

Nåt sånt här borde göra susen.

var vSelects = document.getElementsbyTagName("select");
var i;
for(i = 0; i < vSelects.length; i++){
   vSelects[i].style.display......
}

 

Fast du får ju köra koden var gång menyn skall visas/döljas...

Kan du inte designa om sidan lite(flytta på selectboxen litegranna)?

 

//Telle

 

[Bellfalasch]

Jo förvisso, det var min andra tanke just att designa om. Men det blir lite krångligt då menyerna är lite långa på sina ställen. Men visst, det kan gå. Ska dock prova lite varianter av din kod o se...

 

[dAEk^]

Ett litet tips som kan vara bra att känna till;

 

[*] document.getElementById("elmID").style.display="none";

- Vad gör denna rad ? Jo, den 'tar bort' elementet från layouten helt och hållet. Elementet blir osynligt och underliggande element flyttas upp till den plats där elementet låg då det var synligt.

 

[*] document.getElementById("elmID").style.visibility="hidden";

- Denna rad gömmer elementet men den plats som elementet har reserverat göms INTE. Så om ett element tar upp 100px i höjd när det är synligt, tar det också upp 100px när det är osynligt.

 

Detta är vad som skiljer visibility:hidden och display:none i stort.

 

Just i det här fallet tror jag att det är bäst att använda visibility.

 

Snudd på off-topic:

Om man vill och har tid kan man gömma alla <select>-taggar och ersätta dem med bilder som föreställer <select>-taggen, men det är lite overkill + att det inte kommer se exakt ut för alla OS, speciellt inte för dem som har egna skins i tex win XP.

Men det går!