Förbättring av ”Fade Anything Technique”

Jag har använt mig av en javascript-teknik på vår bröllopshemsida för att få en lite flashig effekt på länkarna i menyn. Tekniken är en egen vidareutveckling av Richard Livseys variant av Adam Michelas ”Fade Anything Technique” (en länk som inte verkar fungera längre, tyvärr). Tekniken, som förkortas FAT, är i sin tur inspirerad av 37 Signals ”Yellow Fade Technique”.

Min variant av FAT har fungerat utmärkt i webbläsare som Firefox och Internet Explorer 6. I Safari har den fungerat, men bara delvis, och det har stört mig. Men nu har jag äntligen löst detta problem!

Tekniken går ut på att tona bakgrundsfärgen av ett objekt från ursprungsfärgen till en vald färg när man för pekaren över ett (annat eller samma) objekt. När man flyttar muspekaren från objektet ska färgen tonas tillbaka till ursprungsfärgen.

Problemet i Safari var att javascriptet inte lyckades få Safari att läsa av ursprungsfärgen korrekt. Jag har gjort en exempelsida för att visa detta.

Såhär ser koden ut för att läsa av bakgrundsfärgen på objektet ”o” i scriptet:

if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }

Första raden (det är tre rader kod i scriptet, även om det kanske är brutet extra här på denna sida) använder getComputedStyle för att läsa av bakgrundsfärgen, vilket fungerar i Mozilla-webbläsare. Andra raden använder currentStyle för att läsa av bakgrundsfärgen, vilket fungerar i Internet Explorer. Tredje raden kollar om någon färg har hittats och om den inte är ”transparent” eller om objektet är BODY, i så fall bryts loopen som koden ligger i. Bryts inte loopen så testas det överliggande objektet för att se om det har en bakgrundsfärg, ända upp till BODY alltså.

Problemet är att getComputedStyle inte fungerar på samma sätt i Safari som i Mozillas webbläsare. För det först verkar man måste anropa det på ett annat sätt och för de andra returnerar det ett annat svar om bakgrundsfärgen är transparent. För att läsa detta fick jag ändra ovanstående kod till följande kod:

if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
else if (o.currentStyle) c = o.currentStyle.backgroundColor;
else c = document.defaultView.getComputedStyle(o,null).getPropertyValue('background-color');
if ((c != "" && c != "transparent" && c != "rgba(0, 0, 0, 0)") || o.tagName == "BODY") { break; }

Här har jag möblerat om lite så att det blir en ”if – if else – else”-sats istället och lagt till en rad som anropar getComputedStyle på ett annorlunda sätt som fungerar i Safari. På sista raden har jag även lagt till Safaris variant av att säga att färgen är genomskinlig, nämligen ”rgba(0, 0, 0, 0)”.

Detta är i princip allt som behövdes för att lösa problemet, det ser enkelt ut men det tog mig några timmars felsökning att komma fram till det. Testa det fungerande exempelscriptet för att se hur Safari hittar rätt bakgrundsfärg.

1 reaktion till “Förbättring av ”Fade Anything Technique””

  1. Ser ut att funka fint.
    Men du kanske skulle ta bort utskriften av hexa ur den färdiga filen som är länkad i exempelscriptet.

    Eller lägga en länk till ett produktionsklart script eller vad vi ska kalla det.
    Sweet hur som helst :)

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *