[css] nep selectbox inline maken over andere elementen

[djluc]

Ik ben bezig met het maken van een select-vervanger waar we o.a. afbeeldingen in kunnen plaatsen. Dit gebaseerd op een bestaand script. De test staat op http://www.djluc.nl/fileadmin/selecttest/final.html

Ik kom echter 2 problemen tegen:

1. Ik krijg het ding niet inline, zodat ik bijvoorbeeld iets kan maken als: "kies type [select]" omdat deze constant op de volgende regel beland. Ik heb geprobeerd om het ding te floaten en een display:inline te geven.
2. Het uitklap-gedeelte zorgt er voor dat de pagina groter wordt. Deze zou echter over de rest heen moeten vallen. Ik heb geprobeerd om postion: absolute; en een float: left; te geven maar hierdoor stopt het ding met functioneren. Zijn er nog alternatieven?

Dit zijn de laatste items die ik niet voor elkaar krijg. Misschien heeft er iemand een hint hoe ik dit voor elkaar kan krijgen.

[djluc]

Kickje, niemand enig idee hoe ik dit soort dingen voor elkaar kan krijgen?

[roberts]

Mischien 'uitklap-gedeelte' in een div zetten gaat die er wel overheen.

[djluc]

Het is gewoon een ul lijstje:

HTML:

<ul class="selectReplacement">
  <li>This is option 1</li>
  <li class="company">This is option 3</li>
  <li>This is option 4</li>
</ul>

Het wordt een beetje lastig om daar dus een divje omheen te zetten. Dan zou het stylen van de UL al voldoende moeten zijn maar dat werkt niet helaas

[roberts]

Bedoel div om select heen.
<div id="Layer1" style="position:absolute; overflow: visible;">
<select id="something" name="something" tabindex="101">
<option value="1">This is option 1</option>

<option value="7" class="individuals">This is option 7</option>
<option value="7" class="person">This is option 7</option>
<option value="7" class="person">This is option 7</option>
</select>
</div>

[sjaakaq]

Wilde gok, maar misschien helpt een clear:both ?

[djluc]

Bedankt voor je tip! Dit heb ik net even geprobeerd maar het werkt niet, ik krijg dan hetzelfde resultaat. Ik heb het even geupload zodat je kunt zien wat er mis is.

[sjaakaq]

Hmm idd...

Tja...heb er verder niet al te veel verstand van, maar als het je om het resultaat gaat (en niet om een reperteerbare techniek), dan zou ik een DIV relatief positioneren, met als z-index "bovenaan", en die hiden (en laten zien als je op dat pijltje klikt).

BTW, in Opera verschuift de pagina niet naar benden, in IE wel:

Opera:


IE:

[ Voor 49% gewijzigd door sjaakaq op 03-09-2005 22:08 ]

[Vinzzz243]

geef eens een link naar het bestaande script

[killercow]

Volgens mij ligt het gewoon aan de ul;

Deze heeft padding, en margin, daarnaast heeft hij warschijnlijk een display:block waarde wat inhoudt dat hij een eigen regel claimt,

Met een float zou je hem kunnen inline kunnen krijgen, maar een display:inline-block zou ook moeten werken.

ps, noder firefox werkt het al aardig, (waarom test je niet met firefox? dan heb je gemakkelijke debug tools, (en je weet zeker dat je iig alleen de standaart hoeft te gebruiken om het aan de gang te krijgen)

[djluc]

Vinzzz schreef op zondag 04 september 2005 @ 15:53:
geef eens een link naar het bestaande script

Het origineel komt uit een artikel. Deze staat hier: http://easy-designs.net/articles/replaceSelect2/ de uiteindelijke versie staat hier: http://easy-designs.net/a...eSelect2/files/final.html

@killercow: het werkt inderdaad zoals ik wil alleen moet het dus over de pagina heen vallen. Als ik echter de display: block verander naar inline werkt het niet meer helaas. Verder werk ik uiteraard in firefox. Waarom niet?

[ Voor 5% gewijzigd door djluc op 06-09-2005 10:54 ]

[Bram77]

djluc schreef op donderdag 01 september 2005 @ 20:32:

Ik kom echter 2 problemen tegen:

1. Ik krijg het ding niet inline, zodat ik bijvoorbeeld iets kan maken als: "kies type [select]" omdat deze constant op de volgende regel beland. Ik heb geprobeerd om het ding te floaten en een display:inline te geven.
2. Het uitklap-gedeelte zorgt er voor dat de pagina groter wordt. Deze zou echter over de rest heen moeten vallen. Ik heb geprobeerd om postion: absolute; en een float: left; te geven maar hierdoor stopt het ding met functioneren. Zijn er nog alternatieven?

Vraag 1.

code:

<nobr>.....</nobr>

Vraag 2.
Ik denk dat je toch echt een layer zult moeten gebruiken om te kunnen doen wat jij wil. Als je de voorbeelden bekijkt op de pagina waar je het script vandaan hebt, dan zie je dat het daar in alle voorbeelden op de zelfde manier wordt weergegeven.

[ Voor 13% gewijzigd door Bram77 op 06-09-2005 10:47 ]

[djluc]

Ik heb een nieuwe versie geupload met daarin nobr tags. Dat helpt helaas ook niet.

dan zie je dat het daar in alle voorbeelden op de zelfde manier wordt weergegeven.

Dat is dus niet zo, daar verspringt de pagina niet!

[thomaske]

djluc schreef op dinsdag 06 september 2005 @ 10:55:
Dat is dus niet zo, daar verspringt de pagina niet!

Als ik die link bekijk in IE, dan verspringt de pagina ook. Wanneer je de ul absolute positioneerd, dan verspringt ie niet, maar vallen de input-boxen een beetje over elkaar, maar dat is misschien ook wel op te lossen

[Bram77]

Haal anders de volgende regel eens weg...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Gokje....misschien dat hij dan wel werkt.

Bij mij verspringt de pagina in alle voorbeelden op de website (IE 6)

[djluc]

Bram77 schreef op dinsdag 06 september 2005 @ 11:09:
Haal anders de volgende regel eens weg...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Gokje....misschien dat hij dan wel werkt.

Bij mij verspringt de pagina in alle voorbeelden op de website (IE 6)

Bedankt voor de tip maar helaas maakt ook dit geen verschil. Redelijk frustrerende bezigheid nu het ding verder gewoon goed werkt...

[djluc]

Ok ik heb weer wat voor elkaar gekregen. Ik heb de selectbox inline gemaakt. Hierdoor heb ik echter weer een nieuw probleem geintroduceerd: het openklap-menu verschijnt nog steeds links http://www.djluc.nl/fileadmin/selecttest/final.html

UPDATE:Op dit moment functioneerd het menuutje al redelijk. Het is inline geworden en opent op de juiste manier. Ik heb dit gedaan middels een combinatie van display: inline; en een extra div om het gehele menu heen met een inline-block; Het menu wordt bij het openen een position: absolute waardoor het over de rest heen valt.

Op dit moment is het enige probleem: Ik mag aan inline elementen geen breedte geven Hierdoor is niet het gehele menuitem maar alleen het gedeelte wat vol staat met tekst aanklikbaar

[ Voor 53% gewijzigd door djluc op 09-09-2005 13:35 ]

[djluc]

Een nieuwe update, het werkt! Nog de puntjes op de i zetten maar dan is het ok. Hij staat nog steeds hier: http://www.djluc.nl/fileadmin/selecttest/final.html

Alleen is de breedte nog niet goed waardoor er scrollbars ontstaan. Dat is natuurlijk niet zo mooi. Daar moet ik nog wel even wat aan doen. Het is echter raar want zowel de li's als de ul's zijn 200px.

[freakin_ruben]

Als je naar rechts scrollt in je list zie je dat alleen je geselecteerde li te breed. De rest hovert maar 184px, en in je code staat dan ook

code:

    ul.selectReplacement li.selected {
        ...
        width: 200px;
    }

ook dacht ik dat een scrollbar altijd 20px breedt was dus als je ul 200px is, is 184 zowiezo wat krapjes

[Vinzzz243]

16px volgens mij vandaar de 184. Ik heb je een mailtje gestuurd djluc. als het zinvol is wat erin staat, dan plak je het zelf maar hier...

[sjaakaq]

djluc schreef op zaterdag 10 september 2005 @ 13:16:
Een nieuwe update, het werkt! Nog de puntjes op de i zetten maar dan is het ok. Hij staat nog steeds hier: http://www.djluc.nl/fileadmin/selecttest/final.html

Alleen is de breedte nog niet goed waardoor er scrollbars ontstaan. Dat is natuurlijk niet zo mooi. Daar moet ik nog wel even wat aan doen. Het is echter raar want zowel de li's als de ul's zijn 200px.

Helaas dat de selectbox nu helemaal onzichtbaar is in Opera Toen ik keek dacht ik "wat vaag, ik dacht dat dit over een selectbox ging maar ik zie alleen tekst en een invoerveld". Bleek dat er dus nog ergens een selectbox moest staan (die er in IE dan ook keurig staat )

[ Voor 18% gewijzigd door sjaakaq op 10-09-2005 21:56 ]

[djluc]

Ik heb een nieuwe versie geupload. Deze werkt eindelijk correct in FF. Nu IE nog.. Ik heb op mede op advies van Vinzzz, zie mailtje beneden, wat aangepast. Ik heb zodra het menu dicht is de breedte op 200px gezet. Als deze opent op 184px zodat er ruimte voor de scrollbar is. In IE heb ik nog steeds die veel te grote marge waardoor ik daar wel moet scrollen. Die moet ik nu oplossen.

Waarom het in Opera ineens niet meer werkt weet ik niet. Ik zal eens kijken of ik Opera kan installeren om te testen. Maar dat ik voor latere zorg.

Het mailtje van Vinzzz waarvoor dank!

Ey luc
Ff snel gekeken.

Waarom heb je ul.selectReplacement li.selected 200px breed gemaakt?

Als ik daar 184 van maak. Is de scrollbar bijna niet meer nodig.

Ik zit nog te kampen met 3px.

Als ik ul.selectOpen aanpas en breedte 203px geef, dan werkt t goed in FF.

IE heeft problemen met die display:inline;

Volgens mij werkt IE zoals het hoort zonder deze display:inline, dus wellicht een optie om die property NIET voor IE te setten.

Denk da k nog een ul nodig heb met 1 li en die helemaal opmaak zoals de geselecteerde li in de hoofdlijst. Zodat altijd bovenaan de juiste optie staat (zoals de normale <SELECT>

vinzzz

edit:
Ik heb net Opera gedownload, rot-reclame..., en ik denk dat het in Opera fout gaat omdat ik position absolute gebruik zodat de select er overheen gaat.

edit:
edit2: In Opera is het ding nu ook zichtbaar. inline-block schijnt dingen te verbergen in Opera Nu nog wat formaat-aanpassingen maken want er zijn weer scrollbars en dan gaat het misschien nog ooit goedkomen

[ Voor 15% gewijzigd door djluc op 12-09-2005 21:47 . Reden: opera getest ]

[djluc]

En ja hoor, nog maar eens een update: Het werkt! Hij wordt nu zelfs net zo breed als de content wat precies de bedoeling is Nu moet ik alleen safari nog. Waarom het daarin niet werkt (scrollbar horizontaal) is me helaas niet duidelijk. Mocht er iemand toevallig een idee hebben hoor ik het graag.

[Vinzzz243]

is dat de versie die op je webspace staat?
Ik kan eens kijken dan naar wat er evt misgaat...(en maybe een oplossing )

Ik zie op de link die je in je startpost hebt gezet, wel in IE en FF een te hoge beginhoogte voor de select (sluit niet mooi aan beneden de pijl) en in IE is de pijl nog niet clickable. Ik kijk er morgen naar.

overweeg je nog niet om je versie te wijzigen zodat het precies de functie van een echte <SELECT> nabootst (lees: de startwaarde altijd tonen, en lijst pas eronder) ?

[ Voor 34% gewijzigd door Vinzzz243 op 17-09-2005 02:32 ]

[djluc]

De hoogte heb ik net gefixed in de online versie. Het klikken op het pijltje in IE werkt nu ook. Dit middels een lelijke maar werkende hack. Alleen in safari is dat scrollen zo vreemd. Ik heb wel een screenshotje nu:

Klik voor grotere versie

Wat bedoel je verder met "een echte select" Vinzzz? In browsers is de werking van mijn ding nu hetzelfde als die gewone <select> Bedoel je niet een select als in Microsoft Word? Daarin onthouden ze de keuze's bij bijvoorbeeld font-keuze.

[Vinzzz243]

ik kan op het moment niet testen in safari (mac pas weer maandag op werk).

Het pijltje is in IE niet meer clickable na een item te hebben gekozen.
Wat ik bedoelde heb ik hier omcirkelt:


Jij vervangt de kleine clickable balk door de complete lijst, terwijl een 'ordinary' <SELECT> deze laat staan.

EDIT:
ik heb even (wellicht voor de volledigheid) een checkbox en radiobutton replacement script op mn webspace gegooid.
is nog niet definitief af:
- labels werkend maken
- functionaliteit js nakijken (gebruik van getelementsbyclass en getelementbyid kan sneller en netter)
- configje uitbreiden in js file
- alleen gecontroleerd in FF en IE6 (IE5x geeft al errors by getelementsbyclassname)

[ Voor 59% gewijzigd door Vinzzz243 op 17-09-2005 18:22 ]

[djluc]

Ik ben geheel from scratch begonnen! Op http://www.djluc.nl/fileadmin/selecttest/select.html is de nieuwe versie te vinden. Op dit moment werkt deze in FF. In IE worden de classes totaal niet overgenomen, alleen bij een hover?

@vinzzz: ik heb in mijn nieuwe opzet meteen je voorstel meegenomen om de geselecteerde waarde te laten staan!

[klokop]

_{Je kan ook gewoon met CSS een plaatje in de < option > 's zetten...}

[djluc]

klokop schreef op donderdag 22 september 2005 @ 12:15:
_{Je kan ook gewoon met CSS een plaatje in de < option > 's zetten...}

Crossbrowser? Volgens mij niet.

Ik heb een vreemd probleem/verschil tussen IE en FF. In FF werkt dit als ik dit in de adresbalk intik:

JavaScript:

javascript:alert(document.getElementById('selectReplaceOption-somethingelse-0').className);

In IE doet het echter helemaal niets, je krijgt dan een lege alert

[ Voor 40% gewijzigd door djluc op 22-09-2005 15:28 ]

[Vinzzz243]

over browsers:

op de mac krijg ik bij safari wel de juiste werking alleen valt het openklapgedeelte achter de tekst (is helemaal wit)
mac IE werkt ook niet
netscape en FF wel.

wat me ook opviel (ik noem maar wat puntjes he, je kunt er wat of je doet er nix mee )
als je begint met optie 12 zit er geen image in, is dat bewust, of 'bugje' ?

[ Voor 33% gewijzigd door Vinzzz243 op 22-09-2005 15:34 ]

[djluc]

Vinzzz, bedankt voor je uitgebreide feedback!

Vinzzz schreef op donderdag 22 september 2005 @ 15:33:
over browsers:
op de mac krijg ik bij safari wel de juiste werking alleen valt het openklapgedeelte achter de tekst (is helemaal wit)

Ik heb nu een z-index van 100 er aan gehangen. Dit zal het probleem wel oplossen denk ik aangezien deze nog niet ingesteld was.

wat me ook opviel (ik noem maar wat puntjes he, je kunt er wat of je doet er nix mee )

Bugje: gefixed. Ik wordt echt gek van dit ding...

[Vinzzz243]

haha als het zo makkelijk allemaal was, was het wel ergens te vinden via google
zaterdag weer tijd (alleen geen MAC thuis).

als ik trouwens

code:

<a href="javascript:alert(document.getElementById('selectReplaceOption-somethingelse-0').className);">test</a>

<div id="selectReplaceOption-somethingelse-0" class="aap"></div>

krijg ik aap terug in IE5.x en IE6

[ Voor 62% gewijzigd door Vinzzz243 op 22-09-2005 16:24 ]

[djluc]

Ok nieuwe screenshots. Ik heb met de IE developer toolbar gekeken en zie dat er wat goed fout gaat in de DOM:

Er staat 2x een class in. Hierdoor worden de items niet goed gestyled denk ik. De verantwoordelijke code voor dit soort aanpassingen:

JavaScript:

document.getElementById('selectReplaceOption-'+sObj.id+'-'+selIndex).className=document.getElementById('selectReplaceOption-'+sObj.id+'-'+selIndex).className.replace(/ ?selectReplaceOptionHover/g, '');

[djluc]

En jawel, gewoon nog maar eens een update! Het bovenstaande probleem is inmiddels opgelost, setAttribute houdt in IE in dat er gewoon een extra class= wordt toegevoegd wat uiteraard voor problemen zorgt. De benadering object.className werkt wel correct.

Inmiddels werkt het systeem goed. Ik heb nog een scrollbar in Internet Explorer welke ongewenst is In FF is deze echter al weg door het gebruik van: display: table-cell;. Verder is er een max-height probleem wat nog steeds niet te fixen is omdat ie dit niet kent.