[Jeff_s]

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 :

[Jeff_s]

Ok ich glaube eine Lösung gefunden zu haben brauche jedoch noch hilfe bei der Vervollständigung:


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 um 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';
        }
    }
}

[just2b]

crossposting http://www.typo3.net/index.php?id=13...post&tid=73091

[Jeff_s]

Wieso crossposting?