/u/66746/crop60bb33c8d667f_cropped.png?f=community)
Ik heb een treeview gemaakt in HTML door vrij mooi gebruik te maken van CSS en JS (DOM). Na een dagje prullen zag alles er perfect uit, het werkte super, tot ik het geheel ging testen in IE. Ik ontwikkel altijd in FireFox om pas op het einde de haren uit mijn hoofd beginnen te trekken...
En ja hoor, het was weer zo waar. Als je een hoofditem laat uitklappen dan schuift de checkbox van het volgende hoofditem niet mee... In FireFox en Opera werkt dit perfect, maar IE heeft er niet veel zin in precies.
Het script kan je hier "bewonderen" : http://www.schops.be/mess/treeview.html
Even in het kort hoe het script werkt :
In de list items wordt een INPUT veld en een A tag gezet. Aangezien een checkbox een vervelend object is waarmee je niks kan doen wordt er met Javascript een IMG gezet die een checkbox toont. Het input veld wordt gebruikt om in een FORM de functionaliteit van de checkbox nog te behouden.
Waar het verkeerd gaat is de opmaak. De A tag krijgt een background image (de +/-) en er wordt een spatie gemaakt tussen deze image en de tekst om de checkbox er tussen te plaatsen. Op deze manier is zowel de tekst als de +/- image aanklikbaar. Mijn eerste optie was om de list image te gebruiken van mijn lijst, maar als je onclick acties zet op een LI dan geldt dit ook voor alle subitems die je er eventueel in plaatst en gaat het javascript dus vrij hard fout.
Dus positioneer ik mijn in JS aangemaakte IMG relatief t.o.v. de LI en plaats ik hem er tussen met de simpele CSS code :
Ik was er best wel trots op, een leuk stukje code, maar dan komen de dagelijkse scheldpartijen richting Microsoft weer naar bove...
Ik hoop dat ik het genoeg toegelicht heb. Als er verder nog vragen zijn dan leg ik het graag verder uit. En als iemand een mogelijke oplossing heeft zou het helemaal te gek zijn.
En ja hoor, het was weer zo waar. Als je een hoofditem laat uitklappen dan schuift de checkbox van het volgende hoofditem niet mee... In FireFox en Opera werkt dit perfect, maar IE heeft er niet veel zin in precies.
Het script kan je hier "bewonderen" : http://www.schops.be/mess/treeview.html
Even in het kort hoe het script werkt :
In de list items wordt een INPUT veld en een A tag gezet. Aangezien een checkbox een vervelend object is waarmee je niks kan doen wordt er met Javascript een IMG gezet die een checkbox toont. Het input veld wordt gebruikt om in een FORM de functionaliteit van de checkbox nog te behouden.
Waar het verkeerd gaat is de opmaak. De A tag krijgt een background image (de +/-) en er wordt een spatie gemaakt tussen deze image en de tekst om de checkbox er tussen te plaatsen. Op deze manier is zowel de tekst als de +/- image aanklikbaar. Mijn eerste optie was om de list image te gebruiken van mijn lijst, maar als je onclick acties zet op een LI dan geldt dit ook voor alle subitems die je er eventueel in plaatst en gaat het javascript dus vrij hard fout.
Dus positioneer ik mijn in JS aangemaakte IMG relatief t.o.v. de LI en plaats ik hem er tussen met de simpele CSS code :
code:
1
2
3
4
| UL IMG {
position: relative;
left: 28px;
} |
Ik was er best wel trots op, een leuk stukje code, maar dan komen de dagelijkse scheldpartijen richting Microsoft weer naar bove...
Ik hoop dat ik het genoeg toegelicht heb. Als er verder nog vragen zijn dan leg ik het graag verder uit. En als iemand een mogelijke oplossing heeft zou het helemaal te gek zijn.
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
(buiten het feit dat je het gewoon als HTML verstuurd).
