Website Inhalt spiegeln

So sah es hier gestern, anlässlich des ersten Aprils aus. Für den technisch Interessierten kommt jetzt die Do-It-Yourself-Anleitung:

Zuerst muss dieser Code in die header.php des Themes eingefügt werden:


<script type="text/javascript">
function flipContent()
{
var now = new Date();
if(now.getDate() != 1)
return;

document.getElementById('wrapper').style.MozTransform;
if(document.getElementById('wrapper').style.MozTransform)
{
document.getElementById('wrapper').style.MozTransform = "";
}
else
{
document.getElementById('wrapper').style.MozTransform = "scaleX(-1)";
}
}
</script>

Dann muss noch der <body> Tag um zwei Eventhandler erweitert werden:


<body onLoad="flipContent()" onClick="flipContent">

Damit wird das umdrehen bei jedem Klick und bei ersten Laden ausgeführt.

Jetzt noch eine kleine Erklärung des JavaScript Codes: Die ersten drei Zeilen sorgen einfach nur dafür, dass das Script ausgeführt wird, wenn der erste des Monats ist. Damit musste ich es am Abend nicht wieder entfernen.

Danach wird der „wrapper“-div abgerufen, der praktischerweise alles auf der Seite enthält. In dessen Style-Objekt wird jetzt für die Eigenschaft MozTransform „scaleX(-1)“ geschrieben. Das ist eine CSS3-Transformation, die dummerweise noch nicht so richtig offiziell ist, deshalb gibt es noch keine richtige Eigenschaft dafür. Mozilla benutzt MozTransform, für Chrome und Safari hätte ich wohl WebkeitTransform benutzen müssen.

Der Internet Explorer kennt CSS-Transformationen leider gar nicht, dafür aber sog. Filter. Die hätte man vermutlich auch per JavaScript setzen können.

Fazit: CSS-Transformationen sind cool, aber werden mal wieder nicht in allen Browsern richtig unterstützt… 🙁

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.