Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

[JS] dynamische labels werken niet in IE?

Pagina: 1
Acties:
Ik probeer een multiselect (<select multiple="multiple">), met JavaScript om te zetten naar een iets gebruiksvriendelijker iets, namelijk een divje met daarin checkboxes. Dat heb ik wel werkend, maar de labels die ik gebruik voor de checkboxes werken niet in IE. Iemand een idee hoe ik dat werkend kan krijgen?
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function convertMultiSelect(){ 
    var aSelects = document.getElementsByTagName('select'); 
    for (var i=0; i < aSelects.length; i++){ 
        if (aSelects[i].multiple){ 
            var div             = document.createElement('div'); 
            div.style.width      = aSelects[i].offsetWidth; 
            div.style.height     = aSelects[i].offsetHeight; 
            div.style.border    = '1px solid #ccc'; 
            div.style.overflow     = 'auto'; 
            var options = aSelects[i].options; 
            for (j=0; j < aSelects[i].length; j++){ 
                var id      = aSelects[i].name.replace(/\[\]$/,'') + j;  
                var label = document.createElement('label'); 
                label.style.display = 'block'; 
                label.style.width = '100%'; 
                label.style.borderTop = '1px solid #eee'; 
                label.setAttribute('htmlFor', id);                 
                var checkbox = document.createElement('input'); 
                checkbox.type  = 'checkbox'; 
                checkbox.name  = aSelects[i].name; 
                checkbox.value = aSelects[i].options[j].value; 
                checkbox.id    = id; 
                checkbox.onclick = function(){ 
                    if (this.checked){ 
                        this.parentNode.style.backgroundColor = '#DDDDDD'; 
                    } else { 
                        this.parentNode.style.backgroundColor = '#FFFFFF'; 
                    } 
                }; 
                if (aSelects[i].options[j].selected){ 
                    checkbox.defaultChecked = true; 
                    label.style.backgroundColor = '#DDDDDD'; 
                } 
                 
                var labeltext  = document.createTextNode(aSelects[i].options[j].text); 
                label.appendChild(checkbox); 
                label.appendChild(labeltext); 
                div.appendChild(label); 
            } 
            aSelects[i].parentNode.replaceChild(div, aSelects[i]); 
        } 
    } 
} 
onload = convertMultiSelect;

orf wijzigde deze reactie 27-05-2006 23:15 (45%)

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated


JavaScript:
1
label.setAttribute('htmlFor', id);

;)

Intentionally left blank

Aha! thanks!

Nieuw gevonden probleempje in IE
Als in de select al een option selected is, dan zet IE wel de background color, maar niet het vinkje in de checkbox, Firefox zet 'm wel gewoon.
code:
1
checkbox.checked = true;

Dit lijkt me ok?

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated


JavaScript:
1
checkbox.defaultChecked = true;

;)

Intentionally left blank

Poehee, super!
Het is bijna eng wat ik je op dit forum als reply zie geven :)

edit: OP edited met werkende code.

orf wijzigde deze reactie 27-05-2006 23:16 (20%)

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated

Ik ben waarschijnlijk 1 van de 5 mensen op aarde die de complete DOM level 0 EcmaScriptBindings gememoriseerd heeft :P

crisp wijzigde deze reactie 27-05-2006 23:18 (6%)

Intentionally left blank

Tijd voor een boek?
:P

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


Acties:
  • 0Henk 'm!

  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated

Mwa, ik zou wel 10 boeken kunnen schrijven, maar gezien het feit dat het a) geen drol opbrengt en b) er al zoveel boeken zijn (waarvan de meerderheid onzin verkondigd, bad practices stimuleerd of gewoonweg tekort schiet) denk ik dat dat weinig zin heeft ;)

Intentionally left blank


Acties:
  • 0Henk 'm!

  • dossiewossie
  • Registratie: maart 2004
  • Laatst online: 10-04 16:44
quote:
crisp schreef op zondag 28 mei 2006 @ 00:45:
Mwa, ik zou wel 10 boeken kunnen schrijven, maar gezien het feit dat het a) geen drol opbrengt en b) er al zoveel boeken zijn (waarvan de meerderheid onzin verkondigd, bad practices stimuleerd of gewoonweg tekort schiet) denk ik dat dat weinig zin heeft ;)
Jammer :)
offtopic:
Aangezien ik net begonnen ben met javascript, zijn er boeken die je echt kan aanraden?
Bad practices spot ik echt niet in boeken, ik neem gewoon lekker klakkeloos alles over, want tjsa, het staat nu eenmaal in het boek, en het is niet voor niets geschreven denk ik dan onbewust.
Geen zin om dingen te leren die ik daarna weer met moeite moet afleren...

Acties:
  • 0Henk 'm!

  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated

De enige boeken die ik eigenlijk aanraadt zijn referenceguides.
Het kunnen spotten van bad practices leer je niet uit een boek, daarvoor heb je gewoon jaren van programmeerervaring nodig en bouw je dus vanzelf wel op. Veel lezen, open staan voor alternatieven en zaken bediscusseren (zoals hier op het forum) helpen daarbij. Uiteindelijk ontwikkel je dan je eigen style wat - als het goed is - een mix is van allerlei good practices :)

Intentionally left blank


Acties:
  • 0Henk 'm!

  • dossiewossie
  • Registratie: maart 2004
  • Laatst online: 10-04 16:44
quote:
crisp schreef op zondag 28 mei 2006 @ 15:08:
De enige boeken die ik eigenlijk aanraadt zijn referenceguides.
Het kunnen spotten van bad practices leer je niet uit een boek, daarvoor heb je gewoon jaren van programmeerervaring nodig en bouw je dus vanzelf wel op. Veel lezen, open staan voor alternatieven en zaken bediscusseren (zoals hier op het forum) helpen daarbij. Uiteindelijk ontwikkel je dan je eigen style wat - als het goed is - een mix is van allerlei good practices :)
Ok, maar ik neem aan dat je het gebruik van boeken niet afraad?
Als ik namelijk een javascript tutorial zoek op internet, dan wordt ik daar meestal niet blij van. En in js van sites neuzen schiet voor mijn gevoel ook niet op, daar zit ook heel veel rotzooi bij.
Ik denk dat ik http://www.howtocreate.co.uk maar eens ga doorspitten, daar krijg ik wel een goed gevoel bij.
Pagina: 1


OnePlus 7 Pro (8GB intern) Nintendo Switch Lite LG OLED C9 Google Pixel 3a XL FIFA 19 Samsung Galaxy S10 Sony PlayStation 5 Games

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank, Intermediair en Independer de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2019 Hosting door True