Hallo,
Habe ein Problem mit der Erstellung einer Navigation für Content Elemente.
Das heisst ich habe ein Main Template welches nicht in der höhe dynamisch ist, so dass ich immer nur ein Content Element auf einmal pro Seite anzeigen kann (da ich mit absoluten Werten in der CSS arbeite um mein Inhalt zu positionieren).
So wenn ich jetzt nur ein Content Element einfüge wird die Seite richtig angezeigt. Wenn ich jetzt jedoch ein zweites bzw. drittes Content Element hinzufüge dann werden die übereinander gelegt was ja auch richtig ist und weshalb ich jetzt auf der Suche bin un so eine Content Navigation zu erstellen.
Meine Frage ist jetzt wie ich mich jetzt anlegen soll um so eine Navigation zu erstellen.
Zusätzliche Infos:
* Benutze TemplaVoila V 1.3.3
* Typo3 4.1.5
Hier das ganze noch mal als Bild für die visuelleren unter euch o.O
Bild: qiubits.lu/…/Navigation.jpg
So spontan fällt mir da rgaccordion von Georg ein.
Vielleicht kannst du dir die entsprechend umstricken.
Edit oder als Menü mit "browse" --> https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Index.html
Daniel
Hallo d.walter.
Dein Vorschlag hat mich auf die Idee gebrach es auch per JavaScript zu lösen.
Und zwar so:
Zu erst habe ich mit TypoScript um jedes meiner Content Elemente ein Div gelegt
tt_content.stdWrap.dataWrap = <div name="content_element" id="ce_2b_rc_id{cObj:parentRecordNumber}"> <a id="c{field:uid}"></a>|</div>
Dieses habe ich jedoch in meiner Haupt TypoScript Template gemacht, so dass um gedes Content Element ein Div gelegt wird. Ich müsste das jedoch auf die Content Box 2 beschränken jedoch weiss ich nicht wie ich den Code umschreiben muss damit er in der DataStructure noch richtig ausgeführt wird.
Hier sind dann noch die JS Funktionen zum vor und zurück zu Navigieren:
/**
*
* @param {integer} pContentID
* id of the content element to show
*
* @param {boolean} pMode
* true: to show all the content elements
* false: to hide all the content elements
*
* @param {string} pHash
* prefix of the id
*
*/
function showHideElement(pContentID, pMode, pHash){
var iNbrContentElements = document.getElementsByName('content_element').length;
//hide all the content elements
toggleContentElements(false, iNbrContentElements, pHash);
//set the content navigation
showHideContentNavigation(pContentID, iNbrContentElements, pHash);
//now show the current requested content element
if (pMode){
document.getElementById(pHash + 'id' + pContentID.toString()).style.display = 'block';
}else{
document.getElementById(pHash + 'id' + pContentID.toString()).style.display = 'none';
}
}
/**
*
* @param {integer} pCurrentElement
* id of the current shown element
*
* @param {integer} pTotalElements
* total number of all Content Elements
*
* @param {string} pHash
* prefix of the id
*
*/
function showHideContentNavigation(pCurrentElement, pTotalElements, pHash){
//first hide the navigation arrows
document.getElementById(pHash + 'next').style.display = 'none';
document.getElementById(pHash + 'prev').style.display = 'none';
//check if we have to show the next arrow
if (pCurrentElement < pTotalElements){
//we have to show the next arrow
document.getElementById(pHash + 'next').style.display = 'block';
//set the a href link
var oHrefElement = document.getElementById(pHash + 'next').getElementsByTagName('a')[0];
oHrefElement.setAttribute('href', 'javascript:showHideElement(' + (pCurrentElement + 1).toString() + ', true, \'' + pHash + '\');');
}
//check if we have to show the previous arrow
if (pCurrentElement > 1){
//we have to show the previous arrow
document.getElementById(pHash + 'prev').style.display = 'block';
//set the a href link
var oHrefElement = document.getElementById(pHash + 'prev').getElementsByTagName('a')[0];
oHrefElement.setAttribute('href', 'javascript:showHideElement(' + (pCurrentElement - 1).toString() + ', true, \'' + pHash + '\');');
}
}
/**
*
* @param {boolean} pMode
* true: to show all the content elements
* false: to hide all the content elements
*
* @param {integer} pCount
* number of content elements
*
* @param {string} pHash
* prefix of the id
*
*/
function toggleContentElements(pMode, pCount, pHash){
//loop through all the elements
for (i = 1; i <= pCount; i++){
//now switch the visible state of the concerned elements
if (pMode){
document.getElementById(pHash + 'id' + i.toString()).style.display = 'block';
}else{
document.getElementById(pHash + 'id' + i.toString()).style.display = 'none';
}
}
}
Ok bin wieder etwas weiter gekommen.
Typoscript Code der in die DS von der 2 Content Box hinein kommt:
10= RECORDS
10.source.current=1
10.tables = tt_content
10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
hinzugefügte Zeile
10.conf.tt_content.stdWrap.dataWrap = <div name="content_element" id="ce_2b_rc_id{cObj:parentRecordNumber}"> <a id="c{field:uid}"></a>|</div>
Hier ist der Code, damit die Div's nur noch um die Content Elemente von der 2 Content Box gelegt werden.
Hoffe es hilft jemandem.