Einige der neuen Features der 1.2er Version:

• bessere Domunentation
• verbesserte Effekte
• ‘richtige’ Hash-Objekte
• Swiff Objekt zur Interaktion mit Flash
• die Möglichkeit zu jedem Element Metadaten zu speichern

Bei der Umstellung ist zu beachten, das sich an der API einiges getan hat und man somit evtl. etwas Arbeit in die Umstellung stecken muss – was sich aber meiner Meinung nach mehr als Lohnt.

Demo: ohne Musik oder mit Musik

Da hat jemand im Stargate-Film “Stargate: The Ark of Truth” (Im Deutschen “Die Quelle der Wahrheit”) genau hingeschaut und entdeckt, das in der Zukunft wohl Javascript zum Programmieren verwendet wird. Den passenden Filmausschnitt gibt’s bei youtube.
Via Ajaxian

David Walsh hat dafür eine eine Javascript-Lösung entwickelt, welche auf Mootools basiert und Links auf einer Seite analysiert und – je nach Dateiendung des Links – das target=”_blank” automatisch anhängt. Das Script lässt sich meiner Meinung nach auch sehr einfach an andere Javascript-Frameworks anpassen und ist ein interessanter Ansatz dieses Problem zu lösen und die Seite auch benutzbar zu lassen wenn der Betrachter Javascript abgeschaltet hat oder kein Javascript versteht.

Eine Übersicht, welche Browser den Test mit wie vielen Punkten besteht, gibt es bei Anomalous Anomaly. Allerdings ist dort Opera noch nicht mit 100% gelistet, da die Version, welche den Test bestanden hat, noch nicht öffentlich verfügbar ist.

Beispiel:

<p id="inhalt">Hier kommt beliebiger Inhalt
<a href="#" onclick="document.getElementById('inhalt').innerHTML='Und jetzt der neue Text';">Inhalt tauschen</a>

Wenn jedoch viele HTML-Elemente in dem zu tauschendem Inhalt sind, kann das Austauschen durchaus etwas Zeit in Anspruch nehmen.

Steven Levithan stellt in seinem Blog mit replaceHTML eine JavaScript-Funktion vor, welche diese Aufgabe schneller erledigen kann.

Code:

function replaceHtml(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // Pure innerHTML is slightly faster in IE
    oldEl.innerHTML = html;
    return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    newEl.innerHTML = html;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    /* Since we just removed the old element from the DOM, return a reference
    to the new element, which can be used to restore variable references. */
    return newEl;
};

Beispiel für die Benutzung:

// innerHTML
el.innerHTML = newHtml
 
// replaceHTML
el = replaceHtml(el, newHtml);

Wenn man nur wenige Elemente überschreibt macht die Benutzung von replaceHTML allerdings wenig Sinn. Seine Stärken kann die Funktion nur ausspielen wenn man wirklich viele Elemente austauscht. Und da vor allem beim Verwerfen von vorhandenen Elementen.
Einen kleinen Benchmark, der im Browser läuft, stellt er auch gleich zur Verfügung: Link

Dies war der Grund warum ich mich bei meinem Projekt against-silence.com für diese Werbeform entschieden habe. Die Werbung wird derzeit nur im Forum unter dem jew. 1. Post einer Seite dargestellt. Doch durch die zunehmende Anzahl eingesetzter Werbefilter sind die Klick-Zahlen drastisch gesunken. Um die Besucher auf dieses Problem aufmerksam zu machen dachte ich über eine Lösung nach …

Zu allererst nahm ich mir die JavaScript-Datei von Google vor, die beim Aufrufen der Werbung included wird. Idealer weise wäre hier eine Variable enthalten, die man nach der Ausführung des Scriptes einfach überprüfen könnte.

<script type="text/javascript">
<!--
if ( google_ads_loaded != 1 ) {
// Code wenn Werbung nicht geladen wurde
}
-->
</script>

Leider ist dem nicht so. In dieser ist nur eine Funktion enthalten, welche die weiteren Schritte aufruft. Da hier nicht zugegriffen werden kann musste eine andere Lösung her.

Der Lösungsweg ist allerdings nicht viel komplizierter ausgefallen. GoogleAds erzeugt nach meinen Beobachtungen in jedem Fall ein iframe mit dem Namen “google_ads_frame”. Dieses Überprüfe ich nun einfach auf Existenz und wenn es nicht vorhanden ist, führe ich Code aus.

<script type="text/javascript">
function checkgooglead() {
    var gaf = window.google_ads_frame;
    if ( !gaf ) {
        document.getElementById("addiv").innerHTML = "
<h2>Diese Seite finanziert sich durch freiwillige Spenden und durch Werbung.Bitte schalte deinen Werbeblocker ab!</h2>
";
    }
}
</script>

Das Element mit der ID “addiv” ist in diesem Fall ein Div, welches nur den Code für die GoogleAds enthält. Wenn nun also das Fenster(=Frame) mit diesem Namen nicht existiert, wird der Inhalt des Div’s durch einen freundlicher Spruch ersetz.
Ohne Javascript hat das natürlich keinen Effekt, aber dann würden auch keine GoogleAds geladen werden.

Ausblenden:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {duration: 500});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Größe ändern:

var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});  // Effekt initialisieren
resizebox.start(0); // Größe ändern starten, vom aktuellen Wert bis 0

Danach blende ich die Box noch komplett aus:

$('id-der-box').setStyle('display','none');

Jetzt stand ich allerdings vor dem Problem, das die mootools nicht mit der Ausführung des einen Effekts warten bevor der nächste gestartet wurde. Die Folge war, dass das komplette Ausblenden sofort zugeschlagen hat ohne die beiden anderen Effekte abzuwarten. Nach langem erfolglosen suchen in der Dokumentation und im Forum von den mootools habe ich mich dazu entschlossen die onComplete-Funktion zu nutzen. Durch die Verschachtelung sicher kein eleganter Weg, aber es Funktioniert erst einmal:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {
duration: 500,
onComplete: function () {
// hier jetzt den 2. Effekt initialisieren
var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});
// .. und starten ..
resizebox.start(0);
}
});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Das ganze habe ich in einem Demo zusammengefasst.

Zurück zum eigentlichen Thema.

Auf IT Gears wurde ein interessanter Artikel zur Kompatibilität des IE 7 zu div. Web-Standards veröffentlicht.
Demnach können unter dem IE 7 keine Input-Image-Tags bei Formularen mehr zum Absenden des Forumlars benutzt werden. Auch gibt es wohl einige Unannehmlichkeiten in Bezug auf das Ausfüllen von Formularen mittels Javascript.
Es müssen also wieder Massen von Websites auf Kompatibilität mit dem IE 7 getestet und für diesen Browser angepasst werden. Wobei doch der IE 7 sich eigentlich viel mehr an bestehende Standards halten sollte.