Safari onclick op a href

[Ytsejammer]

Het volgende werkt in Firefox, Opera en IE. Maar niet in Safari. Wie kan me vertellen waarom?

Het onderwerp heb ik wat aangepast maar het principe is hetzelfde:
Er is een lijstje van auto's. Op elke auto kan geklikt worden zodat de eigenschappen eronder zichtbaar worden middels de style-eigenschap display, de interne div's worden dan zichtbaar.

Ik heb voor <a> gekozen omdat het dan duidelijker wordt dat de items aangeklikt kunnen worden. De <a>'s zijn dus altijd zichtbaar, de div's alleen na het onclick event. Zo ziet zo'n lijstje eruit:

HTML:

<div class="auto" id="4253">
 <a href="#" class="titel">
  <div class="merk" id="merk_4253">Ford</div>
  <div class="type" id="type_4253">focus</div>
 </a>
 <div class="kleur" id="kleur_4253">rood</div>
 <div class="bouwjaar" id="bouw_4253">2005</div>
</div>

zo'n lijstje kan zich dus oneindig herhalen (voor andere auto's uiteraard).

Dan volgt er een scriptje met het onclick event. De functie getElementsByClass is een zelf geschreven functie die alle elementen met de opgegeven className in een array teruggeeft.
(Ik weet het: het opvragen van de parentNode in aExpand is niet echt nodig)

JavaScript:

automerken = function() {
    var autos= getElementsByClass("titel");
    for(var i=0; i < merken.length; i++) 
        merken[i].onclick=aExpand;
}
aExpand=function(e) {
    var merk = this.parentNode;
    var autos = getElementsByClass("autos", merk);
    if(autos[0].style.display == "none")
        autos[0].style.display = "block";
    else
    autos[0].style.display = "none";
   return false;
}

Alleen Safari weigert de div's weer te geven (dus uit te klappen). En returned bovendien geen false omdat er een # achter het url verschijnt. Wie weet waar het probleem schuilt of heeft er een oplossing?

Code kan tussen code tags voor de overzichtelijkheid

[ Voor 4% gewijzigd door BtM909 op 31-05-2007 14:36 ]

[crisp]

Een a-element mag geen blocklevel elementen (zoals div) bevatten, en verder mogen id's niet enkel numeriek zijn

[OkkE]

Ik kan je niet helpen met je probleem, maar ik zie wel 2 puntjes in je HTML die ik wilde melden:
• Een ID mag niet uitsluitend uit nummers bestaan (en volgens mij ook niet mee beginnen).
• Een A element mag geen block (zoals DIV) elementen bevatten.

Denk niet dat deze puntjes het probleem zijn, maar het is sowieso netter om het met correcte HTML op te bouwen. Denk dat een DL een mooie vervanger is. Succes.

// Edit: Grrr, crisp!

[--MeAngry--]

Als bovengenoemde punten het probleem al niet vormen, zou ik sowieso eens kijken of de onclick functie wel aan de A wordt gehangen. Gooi er een alert in of iets dergelijks.

[crisp]

Het daadwerkelijke probleem kan 'm ook nog in de functie getElementsByClass() zitten

[C.44]

getElementsByClass is inderdaad geen bestaande functie, er zijn uiteraard wel manieren om toch een dergelijke (werkende) functie te bouwen.
Zie hier: klik!

[Ytsejammer]

crisp schreef op donderdag 31 mei 2007 @ 15:19:
Een a-element mag geen blocklevel elementen (zoals div) bevatten, en verder mogen id's niet enkel numeriek zijn

Thnx voor jullie reacties. in het voorbeeld had ik idd een numerieke id staan. In het echt is dit niet het geval (nl zoiets als idnaam_123). Verder heb ik van de A een DIV gemaakt met exact hetzelfde resultaat; alleen Safari die niet mee wil werken terwijl het in Opera, Firefox en IE perfect werkt.

Het zou idd in de getElementsByClass kunnen zitten maar dan zou het in alle browsers niet moeten werken neem ik aan. Maar goed in het geval jullie nog iets geks zien:

JavaScript:

function getElementsByClass(className, obj, tagName) {
    if(!tagName) tagName = "*";
    if(!obj) obj = document;
    var childNodes = obj.getElementsByTagName(tagName);
    var elements = new Array();
    var i= -1;
    for(x in childNodes)
         if (childNodes[x].className==className)
            elements[++i] = childNodes[x];
    return elements;
}

dit keer wel in code tags, sorrie voor de vorige keer

[Ytsejammer]

Safari kent de 'in' niet in de for-lus:

JavaScript:

for(x in childNodes)

Is opgelost met de standaard manier:

JavaScript:

for(var i=0; i < childNodes.length; i++)

[crisp]

Ytsejammer schreef op vrijdag 01 juni 2007 @ 17:01:
Safari kent de 'in' niet in de for-lus:

JavaScript:

for(x in childNodes)

Is opgelost met de standaard manier:

JavaScript:

for(var i=0; i < childNodes.length; i++)

for-in itereert over alle properties van een object, als je bijvoorbeeld dit voorbeeld neemt met een document met 1 paragraaf:

JavaScript:

window.onload = function()
{
    var p = document.getElementsByTagName('p');
    for (var i in p)
        alert(i);
}

dan krijg je in Firefox respectievelijk '0', 'length', 'item' en 'namedItem' als properties. Niet zondermeer dus for-in gebruiken op built-in Objects.

Als ik je een alternatief mag geven:

JavaScript:

function getElementsByClassName(className, nodeName, parentElement, callback)
{
    if (!nodeName)
        nodeName = '*';

    if (!parentElement)
        parentElement = document;

    var results = [], s, i = 0, element;

    if (document.evaluate && className.indexOf('|') == -1)
    {
        s = document.evaluate(
            ".//" + nodeName + "[contains(concat(' ', @class, ' '), ' " + className + " ')]",
            parentElement,
            null,
            XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
            null
        );

        while ((element = s.snapshotItem(i++)))
        {
            results.push(element);
            if (callback)
                callback(element);
        }
    }
    else
    {
        s = parentElement.getElementsByTagName(nodeName);
        var re = new RegExp('(^|\\s)' + className + '(\\s|$)'), elementClassName;

        while ((element = s[i++]))
        {
            elementClassName = element.className;
            if (    elementClassName.length &&
                (   elementClassName == className ||
                    re.test(elementClassName)
                )
            )
            {
                results.push(element);
                if (callback)
                    callback(element);
            }
        }
    }

    return results;
}

Deze gebruikt het veel snellere Xpath indien beschikbaar. Dit is eventueel nog uit te breiden wanneer getElementsByClassName native ondersteunt gaat worden (daar zijn plannen voor)