object.addEventListener('load',...,...) werkt niet

Status
Niet open voor verdere reacties.

antonwas

Gebruiker
Lid geworden
11 nov 2006
Berichten
254
Beste lezers,

Ik weet dat het load event een berucht event is/was. Met de komst van nieuwe(re) browsers die allemaal object.addEventListener ondersteunen, moet het probleem toch al een stuk minder zijn lijkt mij. Toch heb ik een probleem met een script. Het script komt uit het boek Simply JavaScript (al wel iets ouder, maar wel leerzaam). De code zorgt ervoor dat je eigen tooltips krijgt onder de hyperlinks.

Code:
var Tooltips =
{

	init: function()
  	{
    	var links = document.getElementsByTagName("a");	
	
		for (var i = 0; i < links.length; i++)
		{
		  var title = links[i].getAttribute("title");
		  alert(title);
		  if (title && title.length > 0)
		  {
			links[i].addEventListener("mouseover", Tooltips.showTipListener, false);
			links[i].addEventListener("focus", Tooltips.showTipListener, false);
			links[i].addEventListener("mouseout", Tooltips.hideTipListener, false);
			links[i].addEventListener("blur", Tooltips.hideTipListener, false);
		  }
		}
		alert(links.length);
  },

  showTip: function(link)
  {
    Tooltips.hideTip(link);

    var tip = document.createElement("span");
    tip.className = "tooltip";
    var tipText = document.createTextNode(link.title);
    tip.appendChild(tipText);
    link.appendChild(tip);
    
    link._tooltip = tip;
    link.title = "";
    
    // Fix for Safari2/Opera9 repaint issue
    //document.documentElement.style.position = "relative";
  },
  
  hideTip: function(link)
  {
    if (link._tooltip)
    {
      link.title = link._tooltip.childNodes[0].nodeValue;      
      link.removeChild(link._tooltip);
      link._tooltip = null;
      
      // Fix for Safari2/Opera9 repaint issue
      //document.documentElement.style.position = "static";
    }
  },

  showTipListener: function(event)
  {
    Tooltips.showTip(this);
    event.stopPropagation();
  },
  
  hideTipListener: function(event)
  {
    Tooltips.hideTip(this);
  }
};
window.addEventListener('load', Tooltips.init(), false);

Deze code staat in een los .js bestand wat netjes is gekoppeld aan de html pagina. De variabele links heeft 0 elementen, terwijl dat er 6 zouden moeten zijn (er zijn namelijk zes links op de pagina) Wanneer ik deze code onder de body tag zet, werkt het wel. Het probleem zit hem dus in het afvuren van het load event. Ik werk gewoon met de nieuwste versies van IE, FF, Chrome, Safari.

Kan iemand mij hiermee helpen?

Alvast bedankt,

Anton
 
Hoi Anton,
In plaats van:
[JS]...
window.addEventListener('load', Tooltips.init(), false);[/JS]
moet het worden:
[JS]...
window.addEventListener('load', Tooltips.init, false);[/JS]

  • Test: js-tooltips.htm :rolleyes:
  • Maar deze doet het niet in IE7 vanwege de addEventListener; wat IE8 doet weet ik niet.
  • IE7 wordt momenteel (zie hier) nog door 5% van de IE-surfers gebruikt (IE7+IE8 samen vormen 42% van alle IE-surfers), dus in de praktijk zou ik dit script niet gebruiken.

=======
Het css-hover alternatief!
Maar waarom zo'n ingewikkeld javascript, terwijl het eenvoudig met alleen een css-hover kan?
In plaats van de tooltip in een title-attribuut kan deze in een <span> worden gezet:
HTML:
...
<a href="#">de link<span>link nummertje 1</span></a>
Met als css:
Code:
a span {
    ...
    margin-left: -9999px;
    }
a:hover span,
a:focus span {
    margin-left: 15px;
    }
  • Test: css-tooltips.htm :)
  • Altijd prijs: geen javascript te bespeuren, en cross-browser.

(Op deze manier kan je er nog veel meer aan styling in stoppen: koppen, cursief, vet, enz. en zelfs images; zie bv. test-extended-tooltip-proef.htm.)

=======
Of een js/css-hover combi: veel eenvoudiger!
Als het om een of andere reden gewenst is toch alleen een title-attribuut in de html te hebben staan, dan kan het ook met een simpel klein scriptje om de title-inhoud naar een span te verhuizen, die vervolgens weer op de css-hover draait:
[JS]function makeTooltip(){
for (var i=0; i<document.getElementsByTagName('a').length; i++){
var tip = document.createElement("span");
document.getElementsByTagName('a').appendChild(tip);
tip.innerHTML=document.getElementsByTagName('a').title;
document.getElementsByTagName('a').title="";
}
}

if (window.addEventListener){
window.addEventListener('load', makeTooltip, false);
}
else if (window.attachEvent){ // IE
window.attachEvent('onload', makeTooltip);
}[/JS]
Na het verplaatsen van de title wordt de inhoud daarvan gewist, zodat er geen twee tooltips gaan verschijnen. Zo'n 5 regeltjes script voor de functie ipv de oorspronkelijke ca. 60 regels.
Door een attachEvent toe te voegen, kunnen oude IE's er ook mee overweg.

Het elke keer opnieuw maken van een appendCild bij een mouseover/hover plus elke keer opnieuw vernietigen met een removeChild bij een mouseout/blur is overbodig: de <span> wordt eenmalig aangemaakt en kan gewoon blijven staan omdat de css-hover stijl zorgt voor de show/hide.
Om dezelfde reden hoeven er geen aparte attachEvents op de links geplakt te worden voor mouseover/hover en voor mouseout/blur: dat gaat automatisch met de css-hover.​



  • Test: js-css-tooltips.htm :)
  • Cross-browser.
  • Unobtrusive javascript: als javascript uit staat, verschijnen de normale tooltips zodat de toegankelijkheid is gewaarborgd.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Bedankt CSSHunter, probleem opgelost!

Beste CSSHunter,

Bedankt voor je zeer uitgebreide antwoord. Het probleem is opgelost. Ik ben nog maar een beginner, zoals je merkt. Ik had al wel een vermoeden dat het simpeler zou kunnen. Omdat mijn focus op dit moment bij JS ligt, probeer ik het eerst op deze manier. Ik ben in de war geraakt door het aanroepen van een standalone-functie. Die roep je namelijk wel gewoon aan via
Code:
functieNaam();
. Gelukkig is het probleem opgelost. Nogmaals bedankt!

Groet,

Anton
 
  • IE7 wordt momenteel (zie hier) nog door 5% van de IE-surfers gebruikt (IE7+IE8 samen vormen 42% van alle IE-surfers), dus in de praktijk zou ik dit script niet gebruiken.
Volgens mij heb je nog oude percentages in je hoofd zitten :), IE7 wordt volgens die link (in NL) nog door maar 2.3% gebruikt, IE8 door 17.3%, samen nog geen 20%. Al heb je natuurlijk wel gelijk dat het nog te vroeg is om alleen addEventListener te kunnen gebruiken.
 
Laatst bewerkt:
Naarling: Volgens mij heb je nog oude percentages in je hoofd zitten. :)
Nai!
IE7 wordt volgens die link (in NL) nog door maar 2.3% gebruikt, IE8 door 17.3%, samen nog geen 20%.
Klopt ... als % van alle NL surfers.
Maar:
Ik beweerde: IE7 ... 5% van de IE-surfers, IE7+IE8 samen ... 42% van alle IE-surfers.


  • Want IE789 is (2,3 + 17,3 + 27,2 =) 46,8% van alle NL surfers,
  • en IE7 op IEalles = 2,3/46,8 = 0,049145299145299145299145299145299,
  • wat ik maar afgerond heb op 0,05 = 5%.
  • voor IE78 (19,6/46,8 =) 0,41880 ~ 42%.
:d

Het was een beetje manipulatief (maar wel statisch verantwoord) schrik aanjagen:


  • als iets het alleen maar in IE9 doet, verwaarloos je nu 42% van de IE-gebruikers (met name de XP'ers, die Win7 zouden moeten aanschaffen om naar IE9 te kunnen upgraden :mad:).
En dat nog niet de helft van de NL-surfers tegenwoordig IE gebruiken ... is mooi meegenomen. ;)

Met vriendelijke groet,
CSShunter
__________
PS: Hierbij denk ik dat het aantal IE-gebruikers op het totaal ook nog wat geflatteerd is. Alle (doorgaans niet-IE surfende) zichzelf respecterende webbouwers zullen om de haverklap op IE testen (div. versies ook nog), en die bezoeken tellen uiteraard ook mee voor de statistieken. Zou aardig zijn om al die test-bezoeken eens in kaart te brengen, en af te trekken van het zogenaamde IE-gebruik!
  • Nu wordt natuurlijk ook op andere browsers getest, maar ik heb zo'n donkerblauw vermoeden dat die een stuk minder herbezoeken nodig hebben voor bug-bestrijding; dus een ponds-ponds-gewijze aftrek (= neutralisering) van test-bezoeken zal niet opgaan.
 
hah, ok, dat had ik dan verkeerd gelezen. Maar welk percentage van het aantal IE surfers IE7/8 gebruikt lijkt me niet zo heel relevant. Welk percentage van het totale aantal bezoekers dat doet is veel interessanter.

als iets het alleen maar in IE9 doet, verwaarloos je nu 42% van de IE-gebruikers (met name de XP'ers, die Win7 zouden moeten aanschaffen om naar IE9 te kunnen upgraden ).
Aan de andere kant zijn ze natuurlijk vrij om een andere browser te installeren, zoals Opera/FF/Chrome, zelfs op Win2K kun je nog de nieuwste versie van Opera installeren. Al kun je voor essentiele zaken de IE8/7 gebruikers natuurlijk nog niet negeren.

PS: Hierbij denk ik dat het aantal IE-gebruikers op het totaal ook nog wat geflatteerd is. Alle (doorgaans niet-IE surfende) zichzelf respecterende webbouwers zullen om de haverklap op IE testen (div. versies ook nog), en die bezoeken tellen uiteraard ook mee voor de statistieken. Zou aardig zijn om al die test-bezoeken eens in kaart te brengen, en af te trekken van het zogenaamde IE-gebruik!
Maar je kunt je afvragen hoeveel sites in aanbouw er worden meegeteld. Volgens mij gebruikt statcounter voor hun statistieken de statistieken van sites waarop hun analytics software geïnstalleerd staat. Analytics software installeren op een site die nog niet af is heeft niet zo heel veel zin en kan je statistieken (in het begin althans) alleen maar bederven.
 
Laatst bewerkt:
[We gaan een beetje offtopic]
Aan de andere kant zijn ze natuurlijk vrij om een andere browser te installeren,...
Tuurlijk, hoewel ik denk dat bij de IE-gebruikers relatief veel mensen zitten die niet weten dat dat kan (cq hoe makkelijk dat is), en/of van oudsher IE op hun kast hebben staan en daar niet van af willen omdat ze die snappen, en/of niet weten wat ze missen, enz.

Maar je kunt je afvragen hoeveel sites in aanbouw er worden meegeteld. Volgens mij gebruikt statcounter voor hun statistieken de statistieken van sites waarop hun analytics software geïnstalleerd staat... enz.
Ah, geen idee eigenlijk. O, ze zeggen dat ze een mix hebben van leden (met tracking code) en anderen: "We do NOT base our Global Stats solely on the activity of our members. Our Global Stats are based on the unknown persons who randomly visit our member websites." (gs.statcounter.com/faq#member-activity). Dan zouden de site-in-aanbouw er wellicht toch bij kunnen komen.
[/We gaan een beetje offtopic]

Maar het probleem van Anton is opgelost. :)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan