Auf einer Seite befand sich zu viel Content, um eine Aufteilung auf mehrere Seite und Scrolling zu vermeiden, entstand die Idee den Content in eine Art Tabs anzuzeigen. Der Content sollte weiterhin in Typo3 gepflegt werden können und einige der Elemente sollten weiterhin dem Flow der Seite folgen.
Die Elemente, die in einen Mini-Tab-Browser gepackt werden sollte, werden in Typo3 mit einem Rahmen „Indent“/“Einzug“ versehen. Die normalen Content Elemente werden nicht in den Browser gepackt.
Das Skript wird in den Header eingebunten, und am Ende der Seite wird die Funktion aufgerufen. Die Funktion sucht das Element mit der id „content“ und überprüft alle darin befindlichen Elemente, ob sie den Klassennamen „csc-frame-indent“ haben. Ich musste vorher im Template einstellen, dass nur csc-frame-indent verwendet wird. Dann werden die Elemente, die diese Voraussetzungen erfüllen, mit einer Id versehen, der Titel des Elementes wird extrahiert und auch in ein Array gepackt. Das Array wird dann abgearbeitet, es wird eine Navigation erstellt und an den Anfang des Content-Elementes gepackt. Bei Rollover wird das vorherige Element ausgeblendet und das neue eingeblendet.
Zu beachten: im HTML-Template muss der Content in <div id=“content“> eingefügt werden. Jedes Content-Element muss in einem Div mit dem Klassennamen „content-element“ gewrappt werden. Und der Wrap für den Content-Rahmen muss auch geändert werden. Wie das geht, steht weiter unten im TypoScript Abschnitt.
Der Quelltext sollte nach den Änderungen etwas so strukturiert sein:
[… weitere divs]
Hier der Link zum Anschauen und darunter der Quelltext, zunächst das TypoScript Template und dann der JavaScript Teil.
page.headerData.20.value =
page.99 = HTML
page.99.value =
# damit jedes Content Element in ein div gewrappt wird
tt_content.stdWrap.dataWrap =
# jedes Content Element mit Rahmen „Indent“ oder „Einzug“ wird so gewrappt
tt_content.stdWrap.innerWrap.cObject.10.value =
// array with titles, that should be linked
var titleArray = Array();
// array with indices of the elements, that should be display tabbed
var indexArray = Array();
function displayTabbedContent() {
var contentElement = document.getElementById(„content“);
contentElement.style.position = „relative“;
var contentChildren = contentElement.childNodes;
var counter = 0;
for(var i=0;i
naviHTML+= ‚‚+titleArray[i]+‘
Neueste Kommentare