[js/dom] display:block gaat fout in <li> - Softwareontwikkeling

zaterdag 22 oktober 2005 20:07

Acties:

Verwijderd

Topicstarter

Hallo
ik heb hetvolgende probleem. Ik heb een ul li tree, waar ik in de li een hyperlink heb.

Nu heeft de hyperlink de volgende style:

code:

#container li a {
  width: 99.99%;
  display: block;
  padding: 1px;
}

Nu heeft de ul waar het hele zaakje onder zit een onclick event. Maar deze triggerd niet meer op het klikken van de list-items-images in Internet Explorer, wel in Fire Fox.

Ik wil de <a> als het kan wel de volledige breedte laten houden en dat werk alleen in IE als ik de display: block als style heb.

Weet iemand hoe ik dit kan oplossen?

Update:
Als ik ook een "display: block" op de <li> zet dan werkt het wel.

[ Voor 8% gewijzigd door Verwijderd op 22-10-2005 21:01 ]

zaterdag 22 oktober 2005 20:19

Acties:

crisp

Devver

Pixelated

Heb je misschien een vollediger voorbeeld, inclusief de javascript die je gebruikt?

Intentionally left blank

zaterdag 22 oktober 2005 20:25

Acties:

Verwijderd

Topicstarter

heb zo helaas niks ter beschikking om het online te zetten, vandaar de gehele html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<style>
#container {
  width: 200px;
}
#container ul {
  margin: 0px;
  margin-left: 20px;
  padding: 0px;
}
#container li {
  list-style-type: none;
  list-style-image: url(dot.gif)
}
#container li li {
  display: none;
}
#container li li.open {
  display: block;
}

#container li a {
  width: 99.99%;
  display: block;
  padding: 1px;
}
#container li a:hover {
  padding: 0px;
  border: 1px solid #FF6600;
  background-color: #FF9966;
}
</style>

<script>
window.onload = function() {
    var tree = document.getElementById('tree');
    addEventListener(tree, 'click', treeClick);
}

function treeClick(e) {
    var node = e.target || e.srcElement;
    while(node && !/^li$/i.test(node.nodeName)) {
        node = node.parentNode;
    }

    alert("click");

}

function addEventListener(node, type, handler) {
    try {
        node.addEventListener(type, handler, false);
    } catch(inferiorBrowserException) {
        node.attachEvent('on'+type, handler);
    }
}
</script>
<body>

<div id="container">
<ul id="tree">
  <li><a href="http://www.google.nl">google</a></li>
  <li><div>div</div></li>
  <li><a href="#">3</a></li>
</ul>
</div>

</body>
</html>

Als je op het list item image klikt van de "div" node, dan krijg je wel een alert. Op de li's met een <a> erin niet

update:
zag dat ik de ul niet gesloten had, maar daar ligt het niet aan

[ Voor 15% gewijzigd door Verwijderd op 22-10-2005 20:30 ]

zaterdag 22 oktober 2005 21:18

Acties:

crisp

Devver

Pixelated

Grappige implementatie van addEventListener, hoewel het W3C event model en het IE event model technisch niet met elkaar te vergelijken zijn; ik ga even kijken

[ Voor 68% gewijzigd door crisp op 22-10-2005 21:19 ]

Intentionally left blank

zaterdag 22 oktober 2005 21:27

Acties:

crisp

Devver

Pixelated

Ah kijk, da's inderdaad een bekent euvel in IE. Workaround: gebruik geen list-style-image maar een (achtergrond)plaatje.
Verder kan ik je aanbevelen een beter crossbrowser event registratie script te gebruiken; je zit hier al onnodig moeilijk te doen in je functie treeClick (en why een regexp als je ook gewoon node.tagName.toLowerCase() != 'li' kan doen wat veel efficienter is?), terwijl je met een script als dit gewoon met het 'this' keyword kan werken - ook in IE.

Intentionally left blank

zaterdag 22 oktober 2005 21:51

Acties:

klokop

swiekie swoeng

_{het voorbeeld doet het helaas niet helemaal okidokie.}

"Passing silhouettes of strange illuminated mannequins"

zaterdag 22 oktober 2005 22:11

Acties:

Verwijderd

Topicstarter

pfff ik wordt er helemaal gek van...

Alle pogingen om mijn tree netjes te maken falen.
Een simple tree voorbeeldje van internat (of het forum werkt altijd), maar ik heb dingen die net weer nier werken...

Wat wil ik:
- Mijn tree netjes houden qua html opmaak. Echter dit gaat mis bij de volgende stappen.
- Bij een mouseover op de hele regel (in de box) van een border voorzien en een achtergrondkleur:
border: 1px solid #FF6600;
background-color: #FF9966;
Dit kan niet op de "li" zelf, omdat de border en kleur ook om de subitems komt te staan. Hiervoor moet ik dus een <a> of <div> in de <li> plaatsen.
- Een + of - tekentje bij een node met subitems. De list-item-image wordt afgeraden, in plaats daarvan een background images. Maar daar staat al iets, vaak de "puntjes" van de tree. Dus dan maar een Image. Dus wordt het al <li><img/><a></a></li>.
- Dan moet er nog een plaatje bij de hyperlink -> <li><img/><a><img/></a></li>.

- Sommige gevallen wil ik ook nog iets rechts laten floaten, een knoppenpaneeltje -> <li><img/><a><img/></a><div></div></li> (zou ook nog in de <a> kunnen). Hiervoor moet alweer het nodige aan de css wordt geklust om het in dezelfde regel te laten floaten.

Als ik dit zo weer zo.... vind het ik het alles behalve makkelijk en overzichtelijk.

Doe ik nu iets grandioos fout, of ligt het aan mijn "eisen"

[ Voor 10% gewijzigd door Verwijderd op 22-10-2005 22:12 ]

zaterdag 22 oktober 2005 22:13

Acties:

crisp

Devver

Pixelated

klokop schreef op zaterdag 22 oktober 2005 @ 21:51:
_{het voorbeeld doet het helaas niet helemaal okidokie.}

Het gaat niet om het menu - dat is enkel een demonstratie voorbeeld en niet eens door mij geschreven; ik heb de disclaimer er maar weer even bijgezet though...

Intentionally left blank

zondag 23 oktober 2005 17:14

Acties:

Verwijderd

Topicstarter

Ik heb vandaag weer wat geklust. Maar loop weer ergens tegen aan.
Er wordt geen event getriggerd bij een onclick op een stuk "padding":

code:

1
2
3

<ul style="margin: 0px;">
<li onclick="alert('click')" style="border: 1px solid red; list-style-type: none; padding-left: 20px;"><div style="height: 20px"> tekst </div> </li>
</ul>

In de 20px padding wordt een plaatje getoont.
Maar de onclick event wordt wel getriggerd door FireFox, maar niet door InternetExplorer 6.

Weet iemand waar dit aan kan liggen?

Pagina: 1

Reageer