Es gibt viele Plugins für WordPress, die es dir ermöglichen, deiner Website Tabs, Akkordeons, Lightboxes oder andere Goodies hinzuzufügen. Wir werden in diesem Beitrag ein paar Mal davon sprechen, also nennen wir sie einfach Tabcordabox, wenn wir die allgemeine Kategorie meinen.
Die Details von Tabcordaboxes variieren je nach Plugin, aber das Prinzip ist immer dasselbe: Ein Element wird angezeigt, die anderen werden ausgeblendet, und bei einer bestimmten Aktion wird eines der ausgeblendeten Elemente angezeigt, während das zuvor angezeigte ausgeblendet wird. Wenn du an Tabs denkst, sind die Elemente einige wie auch immer geartete Inhalte, die Aktion ist das Klicken auf einen Tab.
Wenn es sich bei deinen Elementen um H5P-Inhalte handelt, ist es sehr wahrscheinlich, dass das erste Element angezeigt wird, die anderen jedoch nicht, selbst wenn sie eigentlich angezeigt werden sollten. Warum ist das so? Es gibt eine kurze (technische) Beschreibung auf h5p.org, aber hier findest du einige ausführlichere Informationen.
H5P-Inhalte sind etwas speziell, da sie in einem iframe dargestellt werden. Die Größe des iframes wird das erste Mal berechnet, wenn der H5P-Inhalt gestartet wird. Das funktioniert gut, wenn der H5P-Inhalt der sichtbare ist. Für die anderen, die versteckten, bekommt H5P als Höhe lediglich 0 Pixel ab. H5P weiß nicht, dass du auf beispielsweise einen Button einer Tabcordabox klickst, um einen anderen Inhalt anzuzeigen. Daher weiß H5P nicht, dass es die Größe des iframes ändern sollte – und behält einfach die Höhe von 0 Pixel bei.
Aber ich habe schon gesehen, dass sich die Größe dieses iframe-Dingens ändert!
Es gibt mehrere Ursachen, wenn sich die Größe des iframes ändert. Zum einen passiert das, wenn sich die Höhe des Inhalts innerhalb des iframe ändert und der Inhaltstyp dem H5P-Kern mitteilt, dass die Größe des iframe angepasst werden soll. Zum anderen passier das, wenn sich die Größe des Browserfensters ändert – insbesondere die Breite. Dann registriert der H5P-Kern dies, ändert die Größe des iframes und teilt auch dem Inhalt innerhalb des iframe mit, dass die Größe geändert werden soll. Letzteres ist das, was wir brauchen, aber der H5P-Kern weiß nichts von einer Tabcordabox.
Du kannst einfach überprüfen, ob das oben beschriebene Szenario auf deine Website zutrifft:
- Öffne deine Website – der erste H5P-Inhalt wird angezeigt,
- aktiviere ein anderes Element – der andere H5P-Inhalt wird nicht angezeigt, und dann
- ändere beispielsweise die Größe des Browserfensters.
Der andere H5P-Inhalt sollte nun angezeigt werden, da der H5P-Kern durch die Größenänderung des Browsers ausgelöst wurde und die Höhe des iframes neu berechnet hat.
Und das ist jetzt die Lösung?
Nein. Und ja.
Einerseits könnte H5P zusätzlichen individuellen Code für jede der anderen Tabcordaboxes bekomen, so dass es auf die „Klickereignisse“ hören könnte. Das wäre Wahnsinn.
Andererseits könnten die anderen Plugins einen Befehl hinzufügen, um eine Größenänderung des Browsers zu simulieren, die H5P erkennen würde.
window.requestAnimationFrame(() => { window.dispatchEvent(new Event('resize')); });
Diese Lösung ist nicht spezifisch für H5P, aber dennoch: Was ist, wenn es andere Inhalte gibt, die unter einem ähnlichen Problem leiden, aber einen anderen Ansatz benötigen? Dann müssten die Tabcordaboxes auch für diese zusätzlichen Code hinzufügen. Auch das wäre Wahnsinn.
Ein Notbehelf
Man könnte ein weiteres Plugin schreiben, das versucht, die Tabcordaboxes und H5P zusammenzubringen. Eines davon ist SNORDIANs Resize Pulse, aber das ist nur ein Workaround, eine Art Notlösung.
Standardmäßig löst das Plugin die oben erwähnte Simulation der Fenstergrößenänderung in regelmäßigen Abständen aus. Das wiederum veranlasst H5P, die Größe je nach Einstellung ein- oder vielleicht zweimal pro Sekunde zu ändern. Da diese Größenanpassung jedoch immer erfolgt, auch wenn keine Größenanpassung erforderlich ist, kann dies auf Geräten mit geringen Ressourcen zu Leistungsproblemen führen. Außerdem werden einige Inhaltstypen nicht funktionieren. Find the Words baut beispielsweise sein Buchstabengitter jedes Mal neu auf, wenn der Inhaltstyp ein Signal zur Größenänderung erhält (unnötigerweise, aber das ist eine andere Geschichte). Dadurch können keine Linien mehr gezeichnet werden.
Es gibt auch einen „Selektor“-Modus, den du verwenden könntest. Du müsstest (einen) spezifische(n) CSS-Selektor(en) für die Elemente festlegen, die eine Änderung des Inhalts auslösen, z. B. für die Tabs eines Tab-Plugins. Mit diesem Selektor wird der Größenänderungsimpuls nur ausgelöst, wenn das entsprechende Element angeklickt wird. Auf diese Weise können die Nebeneffekte des „Intervall-Modus“ umgangen werden. Es ist aber eventuell nicht möglich, einen CSS-Selektor zu bestimmen, oder das andere Plugin erfordert einen anderen Auslöser als einen Klick.
Bitte beachte, dass bei Verwendung des Plugins um eine Spende in Höhe von mindestens 2,50 Euro an die Rainforest Coalition gebeten wird.
Vielleicht eine Alternative
Wenn du Tabs verwendest, dann gibt es vielleicht eine Alternative. Die Gestaltungsmöglichkeiten sind begrenzt, aber du kannst auch Tabs in einem speziellen H5P-Inhaltstyp erstellen. Raten mal, wie der heißt: Tabs!
Als dieser Beitrag veröffentlicht wurde, war der Inhaltstyp noch nicht im H5P-Hub verfügbar, aber du kannst ihn installieren, indem du den Demo-Inhalt unten herunterlädst und ihn dann mit Administratorrechten auf deiner Website hochlädst.