Dienstag, 8. Juli 2008

rgmoodalbox Probleme im IE

rgmoodalbox ist eine Extension von Georg Ringer, die die Moodalbox in TYPO3 integriert. Leider ist die Dokumentation zu dieser Erweiterung unter Umständen etwas fehlerhaft. So kann es durchaus schon einmal vorkommen, dass eine nach dem Manual korrekt eingerichtete Extension in verschiedenen Browsern - allen voran IE6 und IE7 - nicht funktioniert. Das beste Beispiel dafür ist wohl die Beispielseite von Georg Ringer. Auf der Seite sollen die Langfassungen der tt_news-Beiträge dargestellt werden. Das funktioniert auch ganz gut. Nur halt im IE nicht. Zumindest zum jetzigen Zeitpunkt (08. Juli 2008, kurz vor'm Gewitter). Der IE öffnet die Fallback-Links ganz normal, aber keine Moodalbox.

Leider ließ sich der Herstellerseite keine Lösung entlocken. So musste ich bei Google tief buddeln, bis ich auf einer Google-Cache-Seite des Mootools-Forums (wie gesagt: tief gebuddelt) auf eine alternative Schreibweise zum Anlegen eines OnClick-Handlers über die Mootools gestoßen, die im Grunde das macht, was im rgmoodalbox-Manual steht, aber kompatibler ist:

window.addEvent('domready', function(){
var list = $$('dl.csc-textpic-image dt a');

list.each(function(element) {
var url = element.getProperty('href');
url = str_replace(".0.html",".44.html",url);
element.addEvent("click", function(e){
new Event(e).stop();
moobox(url);
});
});
return false;
});
Der Codeschnippsel liest, sobald das DOM bereit ist, zunächst alle Anker (Links) einer bestimmten Klasse ein und durchläuft sie dann alle in einer Schleife. In dieser Schleife wird zunächst einmal die URL umgeschrieben. Das war in meinem Fall nötig, da ich die Zielseiten mit einem anderen Type-Parameter aufrufen wollte (anderes Layout als normal). Die Funktion str_replace kann man nachgoogeln. Anschließend kommt die Änderung gegenüber der Anleitung zu rgmoodalbox. Hier fügen wir per addEvent einen Click-Eventhandler dem Link hinzu. Dieser besteht aus einer Funktion, die zunächst das Event stoppt (entspricht einem return false) und anschließend die Moodalbox über die Funktion moobox() öffnet. Fertig.

Wichtig ist übrigens auch noch der richtige Doctype. Dieser sollte XHTML sein, da man sonst Probleme mit den Mootools bekommt. Dies wird gern falsch gemacht. Beim Heraustüfteln der Lösung zu diesem Problem mit einer statischen HTML-Datei habe ich noch die Erfahrung gemacht, dass es unter Umständen auch von Vorteil ist, den Doctype und den XML-Prolog etwas anzupassen, um das Ganze dem IE besser verträglich zu machen. In TYPO3 habe ich das über

page.config.doctype = xhtml_strict
page.config.xmlprologue = none

erreicht. Das ist aber nur eine optionale Empfehlung, falls es zu unerwarteten Problemem kommen sollte.

Kommentare:

webmaster hat gesagt…

Hallo!
Danke für den Tipp, hab auch das Problem mit dem IE6. In welche Datei muss ich denn diesen Codeschnipsel einfügen oder tauschen? Hab leider keinen Plan wo das hingehört...
LG Manfred

wagii hat gesagt…

Grob geschätzt würde ich sagen: füg das Ganze mal in eine neue Javascript-Datei ein, die Du dann über TypoScript einbindest.

Wie gesagt: die Zeile mit dem str_replace kannste wohl auskommentieren.

thomas hat gesagt…

Vielen Dank dafür - hat mir sehr geholfen!

die alte extraload.js kann komplett entfernt werden wenn man folgendes noch in die javascript datei unter den hier beschriebenen code packt.

function moobox (url) {
MOOdalBox.open( // case matters
url, // the link URL
"", // the caption (link's title) - can be blank
"500 400" // width and height of the box - can be left blank
);
}

zudem muss für das Zusammenspiel mit den tt_news noch der Link so gesetzt werden, wie er auch in der Listenansicht heißt:
var list = $$('.news-list-morelink a');

danach läuft die rgmoodalbox auch mit dem IE > 8