[JS] IE ondersteunt toevoegen attribuut niet?

[-Lars-]

Ik ben bezig met een hobbyprojectje waarbij ik een originele tekst, een vertaling en de bijbehorende annotaties (aantekeningen) op een hippe manier wil samenbrengen. Dat lukt me wel aardig: het achterliggende programma werkt redelijk en de website die dat programma moet uitspugen begint ook al vorm te krijgen.

Sterker nog, in Firefox werkt dit voorbeeld al precies zoals ik wil (alleen rood onderstippelde woordgroepen hebben annotaties). Internet Explorer ligt echter weer dwars op het gebied van Javascript: de annotaties, die als een hoger liggend vlak op de pagina tevoorschijn moeten komen als men over een geannoteerd woord gaat, komen niet te voorschijn. Ook het markeren van gepaarde woordgroepen komt niet uit de verf.

Probleem is dat ik niet echt weet wat het probleem is . Dit is de eerste keer dat ik zelf echt iets maak met Javascript en het onderstaande is met vallen en opstaan werkend gekregen in Fx (waar het nu zonder waarschuwingen in werkt). De fout zou volgens IE zitten in regel 24, teken 5: "Deze eigenschap of methode wordt niet ondersteund door dit object.").

Ik denk dat de fout ontstaat doordat annotation geen gestandaardiseerd attribuut van een anchor-tag is. Volgens mij had ik ergens gelezen dat het zo wel mag en Fx valt er ook niet over. Dus: ligt het hieraan en zo ja, wat is een betere oplossing? Zo nee, waar ligt de fout dan?

Zoeken op Google en hier levert zo snel weinig concreets op. setAttribute en style of className gaan vaak fout doordat IE daar raar mee omgaat, maar over setAttribute en zelfbedachte attributen is weinig te vinden...

JavaScript:

/*
 * Gives the paired word groups and the
 * translation hide checkbox interactivity
 */
window.onload = function() {
  // Translation hiding
  document.getElementById('medela_hideTr').onclick = function() {
    var translation = document.getElementById('medela_trText');
    if (this.checked) {
      translation.className = 'medela_hidden ' + translation.className;
    } else {
      translation.className = translation.className.replace('medela_hidden','');
    }
  }

  //Translation anchors
  var tra = document.getElementById('medela_trText').getElementsByTagName('a');
  for (var i=0; i<tra.length; i++) {
    // Original counterpart of this anchor
    var ora = document.getElementById(tra[i].getAttribute('href', 2).replace('#',''));

    // Annotation preserving
    if (ora.hasAttribute('title') && ora.getAttribute('title') != '') {
      ora.setAttribute('annotation', ora.getAttribute('title'));
      ora.removeAttribute('title', '');
      ora.className = 'medela_hasAnnotation ' + ora.className;
      tra[i].className = 'medela_hasAnnotation ' + tra[i].className;
    } else {
      ora.setAttribute('annotation', '');
    }

    // Mouse event handling
    tra[i].onmouseover =  function() {
      var counter = this.getAttribute('href', 2).replace('#','');
      highlight(counter);
      setAnnotation(document.getElementById(counter).getAttribute('annotation'));
    }

    ora.onmouseover = function() {
      highlight(this.id.replace('medela_or', 'medela_tr'));
      setAnnotation(this.getAttribute('annotation'));
    }

    tra[i].onmouseout = function() {
      dehighlight(this.getAttribute('href', 2).replace('#',''));
      hideAnnotation();
    }

    ora.onmouseout = function() {
      dehighlight(this.id.replace('medela_or', 'medela_tr'));
      hideAnnotation();
    }
  }
}

/*
 * Highlights specified word group (adds class name)
 */
function highlight(wordGroupId) {
  var wordgroup = document.getElementById(wordGroupId);
  wordgroup.className = 'medela_match ' + wordgroup.className;
}

/*
 * Dehighlights specified word group (removes class name)
 */
function dehighlight(wordGroupId) {
  var wordgroup = document.getElementById(wordGroupId);
  wordgroup.className = wordgroup.className.replace('medela_match', '');
}

/*
 * Sets a new annotation and shows it
 */
function setAnnotation(annotation) {
  if (annotation != "") {
    document.getElementById('medela_anText').getElementsByTagName('p')[0].firstChild.nodeValue = annotation;
    document.getElementById('medela_anText').style.display = 'block';
  } else {
    // Fail-safe for some browsers
    hideAnnotation();
  }
}

/*
 * Hides the annotation block (does not reset the text)
 */
function hideAnnotation() {
  document.getElementById('medela_anText').style.display = 'none';
}

Alle bestanden nog een keer:

• HTML
• JS
• CSS

[TeeDee]

Staan in de aangehaalde topics in [javascript] tag opties invoegen na wijzigen veld misschien tips?

[crisp]

probeer het gewoon eens zo:

JavaScript:

ora.annotation = ora.getAttribute('title');

IE's DOM implementatie is incompleet en buggy...

[-Lars-]

Bedankt voor de snelle antwoorden!

TeeDee schreef op woensdag 31 oktober 2007 @ 16:46:
Staan in de aangehaalde topics in [javascript] tag opties invoegen na wijzigen veld misschien tips?

Nee, helaas niet omdat alle tips betrekking hebben op problemen met setAttribute in combinatie met class/className en style. Dat is niet echt mijn probleem, denk ik.

crisp schreef op woensdag 31 oktober 2007 @ 16:51:
probeer het gewoon eens zo:

JavaScript:

ora.annotation = ora.getAttribute('title');

IE's DOM implementatie is incompleet en buggy...

In plaats van elk title-attribuut naar een annotation-attribuut omzetten bij iedere tag, neem ik aan dat je bedoelt. Dat is natuurlijk een optie, een optie die waarschijnlijk wel zat werken, maar dan krijg ik naast het groene vlakje met de annotatie ook zo'n geel vlakje dat de browser zelf maakt bij title-attributen. En twee vakjes, da's natuurlijk niet hip . En alleen het title-attribuut gebruiken is niet echt een optie omdat zo'n tooltip pas na enkele seconden verdwijnt.

Of bedoel je iets anders?

Sorry, nu zie ik het pas goed. Even proberen...

[-Lars-]

Het stuk JS heb ik nu gemaakt tot (op andere plekken ook jouw wijziging doorgevoerd):

JavaScript:

// Annotation preserving
    if (ora.hasAttribute('title') && ora.getAttribute('title') != '') {
      //ora.setAttribute('annotation', ora.getAttribute('title'));
      ora.annotation = ora.getAttribute('title');
      ora.removeAttribute('title');
      // ora.removeAttribute('title', '');
      ora.className = 'medela_hasAnnotation ' + ora.className;
      tra[i].className = 'medela_hasAnnotation ' + tra[i].className;
    } else {
      //ora.setAttribute('annotation', '');
      ora.annotation = '';
    }

removeAttribute had ook nog een foutje. Crisp, jouw suggestie lijkt echter niet te helpen: IE klaagt nog steeds over dezelfde regel (een regel die nu slechts een commentaarregel is? ).

[ Voor 12% gewijzigd door -Lars- op 31-10-2007 17:38 ]

[crisp]

De fout zit een regeltje hoger (IE zit er nog wel eens naast qua regelnummers ): IE ondersteunt simpelweg geen hasAttribute

[ Voor 4% gewijzigd door crisp op 31-10-2007 23:50 ]

[-Lars-]

Enorm bedankt! Die oplossing werkt perfect.