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.
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
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