ErikBooy007
Terugkerende gebruiker
- Lid geworden
- 24 mei 2007
- Berichten
- 3.814
Goedemiddag dames en heren!
In een projectje waar ik nu aan werk, wil ik custom input fieldsgebruiken. Geen standaard radiobuttons, checkboxen etc, maar gewoon m'n eigen.
Nu lukt dit op zich al redelijk, met een combinatie van CSS en JS, maar er is één probleempje (afgezien van een compatibility-issue met IE7 die ik nog moet oplossen). Dat probleem zit 'm in de dropdown.
Jullie kunnen het hier: http://backlog.pilotapps.net/UI.php zelf bekijken
De dropdown bestaat uit een div waarin de huidige selectie weergegeven staat en een div met alle opties. De opties zijn standaard verborgen en "schuiven" tevoorschijn wanneer op de huidige optie geklikt wordt. Dat lukt allemaal wel, zoals je zult zien als je op de onderste klikt. Klik je echter op de bovenste, dan zul je zien dat de lijst achter het huidige item van de onderste schuift. Dat is op zich ook logisch, want ik geef in de CSS het huidige item een z-index van 2 en de lijst een z-index van 1.
Waarom het gebeurt is me dus duidelijk, maar hoe ik het kan oplossen is me een raadsel... Wat ik dus graag wil, is dat de lijst altijd "on top of everything" is. Ik zou met JS altijd de actieve dropdown een extra class kunnen geven, om daarvoor te zorgen, maar voor dit probleem gaat mijn voorkeur uit naar een pure-css oplossing.
Bij voorbaat dank!
Groeten, Erik
P.S. Voor diegenen die commentaar willen geven op het feit dat de gebruiksvriendelijkheid van een website die zo van JS afhankelijk is te wensen over laat... don't. Ik weet dat het goed bedoeld is, maar het gaat hier om een web-app, waarbij de client een belang heeft, in tegenstelling tot een normale website waar de aanbieder een belang heeft. Mensen zullen dus JS wel aanzetten, en zo niet... jammer dan Er komt uiteraard nog wel een melding voor mensen die JS uit hebben staan, dat ze het aan moeten zetten om de site te laten functioneren, maar dit hele verhaal even terzijde
In een projectje waar ik nu aan werk, wil ik custom input fieldsgebruiken. Geen standaard radiobuttons, checkboxen etc, maar gewoon m'n eigen.
Nu lukt dit op zich al redelijk, met een combinatie van CSS en JS, maar er is één probleempje (afgezien van een compatibility-issue met IE7 die ik nog moet oplossen). Dat probleem zit 'm in de dropdown.
Jullie kunnen het hier: http://backlog.pilotapps.net/UI.php zelf bekijken
De dropdown bestaat uit een div waarin de huidige selectie weergegeven staat en een div met alle opties. De opties zijn standaard verborgen en "schuiven" tevoorschijn wanneer op de huidige optie geklikt wordt. Dat lukt allemaal wel, zoals je zult zien als je op de onderste klikt. Klik je echter op de bovenste, dan zul je zien dat de lijst achter het huidige item van de onderste schuift. Dat is op zich ook logisch, want ik geef in de CSS het huidige item een z-index van 2 en de lijst een z-index van 1.
Waarom het gebeurt is me dus duidelijk, maar hoe ik het kan oplossen is me een raadsel... Wat ik dus graag wil, is dat de lijst altijd "on top of everything" is. Ik zou met JS altijd de actieve dropdown een extra class kunnen geven, om daarvoor te zorgen, maar voor dit probleem gaat mijn voorkeur uit naar een pure-css oplossing.
Bij voorbaat dank!
Groeten, Erik
P.S. Voor diegenen die commentaar willen geven op het feit dat de gebruiksvriendelijkheid van een website die zo van JS afhankelijk is te wensen over laat... don't. Ik weet dat het goed bedoeld is, maar het gaat hier om een web-app, waarbij de client een belang heeft, in tegenstelling tot een normale website waar de aanbieder een belang heeft. Mensen zullen dus JS wel aanzetten, en zo niet... jammer dan
Er komt uiteraard nog wel een melding voor mensen die JS uit hebben staan, dat ze het aan moeten zetten om de site te laten functioneren, maar dit hele verhaal even terzijde
Laatst bewerkt:
