Litet väl genomskinligt?

Nu är den här, artiklar som uppdaterar sig själva på aftonbladet.se. Ett exempel på snitsiga användningsområden är Marcus Leifbys direktrapporteringar, som skrivs direkt på plats och uppdateras nästan varje minut. Tidigare har läsaren behövt ladda om sidan för att se om det hänt något. Nytt är nu att brödtexten gulmarkeras för att snabbt och tydlig informera läsaren att något har hänt.

Själva uppdateringen sker med ett vanligt asynkront XHR och är inget sexigt i sig. Gulmarkeringen sker med YUIs ColorAnim och är inte heller den så mycket att prata om.

Färganimeringen sker först från transparent till gult.

var anim = new YAHOO.util.ColorAnim(div, {backgroundColor: { to:"#FFFFCC"}});

När musen förs över brödtexten, tillbaka till transparent. Här uppstår det första problemet.

var anim = new YAHOO.util.ColorAnim(div, {backgroundColor: { to:"transparent"}});

YUI stödjer inte animering till transparent. Därför försöker jag ta reda på vilken bakgrundsfärg som gäller för diven som innehåller brödtexten genom att jobba mig uppåt i DOM-strukturen.

var Dom = YAHOO.util.Dom;
var parent = Dom.get(div);
var bgColor = Dom.getStyle(parent, 'backgroundColor');
while (parent && bgColor == 'transparent')
parent = parent.parentNode;
bgColor = Dom.getStyle(parent, 'backgroundColor');
if (parent.tagName.toUpperCase() == 'HTML') {
bgColor = '#fff';
}
}

Saken är biff! Efter tester i FF2/FF3, IE6/IE7 och Opera fick jag problem i Safari, mitt andra problem. Allting fungerade förutom att den gula färgen inte försvann när jag förde musen över brödtexten. Stöder inte Safari onmouseover på divar? Nej - det var inte det. Det visade sig till slut att transparent i Safari kallas:

rgba(0, 0, 0, 0)

Alltså, för att hitta den egentliga bakgrundsfärgen på en div som fungerar i de allra flesta webbläsarna, kan följande kod användas:

var Dom = YAHOO.util.Dom;
var parent = Dom.get(div);
var bgColor = Dom.getStyle(parent, 'backgroundColor');
while (parent && (bgColor == 'transparent' || bgColor == 'rgba(0, 0, 0, 0)')) { // rgba is Safari-transparent
parent = parent.parentNode;
bgColor = Dom.getStyle(parent, 'backgroundColor');
if (parent.tagName.toUpperCase() == 'HTML') {
bgColor = '#fff';
}
}