[js] ie, ns6 en ns4 ?!?

[Daniel304]

Ik heb een script voor een folding tree voor mijn menu gevonden en heb hem gedeeltelijk aangepast naar mijn wensen echter dit script werkt niet onder mozilla 1.4 ik heb commentaar in de code gezet...

JavaScript:

var ns6 = document.getElementById && !document.all;
var ie4 = document.all && navigator.userAgent.indexOf("Opera") == -1;

function checkcontained(e)
{
   var iscontained = 0;
   cur = ns6 ? e.target : event.srcElement;
   if (cur.id == "foldheader")
   {
      iscontained = 1;
   }
   else
   {
      while (ns6 && cur.parentNode || (ie4 && cur.parentElement))
      {
         if (cur.id == "foldheader" || cur.id == "foldinglist")
         {
            iscontained = (cur.id == "foldheader") ? 1 : 0;
            break;
         }
         cur = ns6 ? cur.parentNode : cur.parentElement;
      }
   }
   if (iscontained)
   {
      var foldercontent = ns6 ? cur.nextSibling.nextSibling : cur.all.tags("UL")[0];
      if (foldercontent.style.display == "none")
      {
         foldercontent.style.display = "";
         cur.style.listStyleImage = "url(images/open.gif)";
      }
      else
      {
         foldercontent.style.display = "none";
         cur.style.listStyleImage = "url(images/fold.gif)";
      }
   }
}

if (ie4 || ns6)
{
   document.onclick = checkcontained;
}

enig idee hoe dat op te lossen is ?!?

[ Voor 35% gewijzigd door Daniel304 op 15-10-2003 14:43 ]

[crisp]

sloop je hele browser-sniffing eruit en doe alles via de DOM* (je ns4 regel is compleet overbodig want je doet er verder niets mee). de nextSibling.nextSibling constructie is natuurlijk ook heel erg afhankelijk van je document structuur - een enkele spatie of enter tussen 2 tags levert voor Mozilla al een textNode (en dus een sibling) op - beter kan je door je siblings heenlopen totdat je de 'UL' tegenkomt.

Trouwens: je statements afsluiten met een puntkomma is toch wel aan te raden.

* op deze manier browsersniffing doen is echt af te raden, er zijn meer browsers dan IE die document.all kennen, maar niet de specifieke IE implementaties mbt eventhandling etcetera. Je kan beter dit soort constructies gebruiken (property en method-sniffing):

JavaScript:

if (typeof cur.parentNode != 'undefined') cur = cur.parentNode;
else if (typeof cur.parentElement != 'undefined') cur = cur.parentElement;

[ Voor 31% gewijzigd door crisp op 15-10-2003 13:02 ]

[Daniel304]

dat is inderdaad het eerste waar ik over viel... de punt komma's die heb ik inclusief de grotere {} maar even erin gezet.. het is nu een stuk overzichtelijker... Vind hem helaas toch nog erg lastig te begrijpen mede door al die ns6 en ie troep erin...

voor nieuwe code zie first post

[ Voor 9% gewijzigd door Daniel304 op 15-10-2003 14:43 ]

[Daniel304]

Ik heb wat grote veranderingen aangebracht het werkt nog niet helemaal goed...
eerste de nieuwe code deze kijkt niet naar browser soort maar naar de ondersteuning van de browser

JavaScript:

function checkcontained(variable) 
{
   if (typeof variable == 'undefined') variable = window.event;
   var cur = (typeof variable.target != 'undefined') ?  variable.target : variable.srcElement;
   var iscontained = 0;
   if (cur.id == "foldheader")
   {
      iscontained = 1;
   }
   else
   {
      while ( cur.parentNode || cur.parentElement )
      {
         if (cur.id == "foldheader" || cur.id == "foldinglist")
         {
            iscontained = (cur.id == "foldheader");
            break;
         }
         cur = cur.parentNode || cur.parentElement;
      }
   }
   if (iscontained)
   {
//******
// Alleen de volgende regel nog...
//******
      var foldercontent = ns6 ? cur.nextSibling.nextSibling : cur.all.tags("UL")[0];
      if (foldercontent.style.display == "none")
      {
         foldercontent.style.display = "";
         cur.style.listStyleImage = "url(images/open.gif)";
      }
      else
      {
         foldercontent.style.display = "none";
         cur.style.listStyleImage = "url(images/fold.gif)";
      }
   }
}

if (document.addEventListener)
{
   document.addEventListener("click",checkcontained,false);
}
else if (document.attachEvent)
{
   document.attachEvent("onclick",checkcontained);
}
else
{
   document.onclick = checkcontained;
}

Ik heb wel een stukje maar hij gaat hiermee fout.. iemand enig idee ?!?

JavaScript:

var foldercontent;
   if (cur.nextSibling)
   {
      foldercontent = cur.nextSibling.nextSibling;
   }
   else if (cur.getElementsByTagName)
   {
      foldercontent = cur.getElementsByTagName("ul")[0];
   }
   else if (cur.all && cur.all.tags)
   {
      foldercontent = cur.all.tags("UL")[0];
   } 

[ Voor 16% gewijzigd door Daniel304 op 15-10-2003 19:57 . Reden: even de varibele event eruit gehaald ]

[crisp]

heb je er een stukje HTML bij? zo weet ik nog niet hoe je document structuur eruit ziet.
Is verder IE4 ondersteuning wel van belang?
Je afvraging dmv OR-en vind ik ook erg smerig eigenlijk, en ik zou event sowieso niet als variabele gebruiken, liever zo:

JavaScript:

function checkcontained(e) 
{
   if (typeof e == 'undefined') e = window.event;
   var cur = (typeof e.target != 'undefined') ?  e.target : e.srcElement;
   // etc
}

e.e.a. heeft ook te maken met strict javascript compliance - undefined is namelijk niet hetzelfde als false en is eigenlijk ook niet te casten naar false - intern geeft dit dus een warning in de javascript engine

[Daniel304]

ik heb de html code beetje leesbaar gemaakt deze code wordt gegenereerd door een perl script die de menu structuur uit een database haalt.. ie4 is niet zo heel erg belangrijk.. het ligt eraan wat ervoor veranderd moet worden.. moet ik me nog in verdiepen.. (testen van ie4 is voor mij ook erg lastig)

HTML:

<div style="position:relative;left:-24">
   <ul>
      <li id="foldheader"> Modulen</li>
      <ul id="foldinglist" style="display:none" style=&{head};>

         <li id="foldheader"> Gebruikers</li>
         <ul id="foldinglist" style="display:none" style=&{head};></ul>
         
         <li id="foldheader"> Modulen</li>
         <ul id="foldinglist" style="display:none" style=&{head};>
            <li><a href="javascript:menulinks('ed8019657149212393e5bf995c2c9431')"> Install</a></li>
         </ul>
         
         <li id="foldheader"> Servers</li>
         <ul id="foldinglist" style="display:none" style=&{head};>
            <li><a href="javascript:menulinks('e4f2e95c8f850458f86a264bf792d0e8')"> IP-adressen</a></li>
            <li><a href="javascript:menulinks('11066639b238708c841da006e1166dda')"> Locaties</a></li>
            <li><a href="javascript:menulinks('3e8c653b2ee35059fc0a94d568953238')"> Servers</a></li>
            <li><a href="javascript:menulinks('1ce826ae5f9dbd78c19cab92da1f3330')"> Software</a></li>
            <li><a href="javascript:menulinks('e7d0cc30504eaa9be0f21e394370c217')"> Type Software</a></li>
         </ul>
         <li><a href="javascript:menulinks('e1c31bf61d9937925173075207517770')"> Quick Links</a></li>
      </ul>
   </ul>
</div>

[ Voor 29% gewijzigd door Daniel304 op 15-10-2003 19:27 ]

[crisp]

Probeer trouwens eens de domviewer van Mozilla, ik denk dat je er dan vrij snel achterkomt dat cur.nextSibling.nextSibling niet verwijst naar je UL-element

[Daniel304]

Ik weet het... die heeft geen properties

[ Voor 35% gewijzigd door Daniel304 op 15-10-2003 20:09 ]

[Daniel304]

got it working now... het lag niet alleen aan het javascript maar ook aan de html code

HTML:

<div style="position:relative;left:-24">
   <ul>
      <li id="foldheader"> Modulen
         <ul id="foldinglist" style="display:none" style=&{head};>
            <li id="foldheader"> Gebruikers
               <ul id="foldinglist" style="display:none" style=&{head};></ul>
            </li>
            <li id="foldheader"> Modulen
               <ul id="foldinglist" style="display:none" style=&{head};>
                  <li><a href="javascript:menulinks('ed8019657149212393e5bf995c2c9431')"> Install</a></li>
               </ul>
            </li>
            <li id="foldheader"> Servers
               <ul id="foldinglist" style="display:none" style=&{head};>
                  <li><a href="javascript:menulinks('e4f2e95c8f850458f86a264bf792d0e8')"> IP-adressen</a></li>
                  <li><a href="javascript:menulinks('11066639b238708c841da006e1166dda')"> Locaties</a></li>
                  <li><a href="javascript:menulinks('3e8c653b2ee35059fc0a94d568953238')"> Servers</a></li>
                  <li><a href="javascript:menulinks('1ce826ae5f9dbd78c19cab92da1f3330')"> Software</a></li>
                  <li><a href="javascript:menulinks('e7d0cc30504eaa9be0f21e394370c217')"> Type Software</a></li>
               </ul>
            </li>
            <li><a href="javascript:menulinks('e1c31bf61d9937925173075207517770')"> Quick Links</a></li>
         </ul>
      </li>
   </ul>
</div>

het stukje javascript waar nog een fout inzat is 'commented'

JavaScript:

var foldercontent;

//   if (cur.nextSibling)
//   {
//      foldercontent = cur.nextSibling.nextSibling;
//   }

   if (cur.getElementsByTagName)
   {
      foldercontent = cur.getElementsByTagName("ul")[0];
   }
   else if (cur.all && cur.all.tags)
   {
      foldercontent = cur.all.tags("UL")[0];
   }

[ Voor 33% gewijzigd door Daniel304 op 15-10-2003 22:34 ]

[r0bert]

Is het nu niet zo dat als 'cur.all' niet wordt ondersteund/bestaat (en cur.getElementsByTagName ook niet nat.), je een fout krijgt in deze regel:

JavaScript:

else if (cur.all && cur.all.tags)

kan aan mij liggen hoor, maar volgens mij krijg je een JSerror als je een property opvraagt van een object wat niet bestaat..

[ Voor 11% gewijzigd door r0bert op 15-10-2003 22:48 ]

[crisp]

ik bedenk me nu ook dat een geneste UL in een LI natuurlijk geen nextSibling is, maar een childNode

r0bert schreef op 15 oktober 2003 @ 22:47:
Is het nu niet zo dat als 'cur.all' niet wordt ondersteund/bestaat (en cur.getElementsByTagName ook niet nat.), je een fout krijgt in deze regel:

JavaScript:

else if (cur.all && cur.all.tags)

kan aan mij liggen hoor, maar volgens mij krijg je een JSerror als je een property opvraagt van een object wat niet bestaat..

nee hoor, het zal intern in de interpreter wel een warning genereren, maar aan de oppervlakte zal het uiteindelijk gezien worden als zijnde 'false', gelijk een check als if (document.all) { }
dit is inderdaad mooier:

JavaScript:

if (typeof cur.all != 'undefined' && typeof cur.all.tags != 'undefined') { }

[ Voor 79% gewijzigd door crisp op 15-10-2003 23:05 ]