Langtext Beschreibung - in Artikelansicht "aufklappbar"?

Hallo zusammen,

wie kann ich in der Artikelansicht die Langtextbeschreibung per Mouse-over oder Klick “aufklappbar” machen?
Wir haben leider äußerst viele techn. Details, die wir in die Beschreibung einpflegen müssen und da ist es doch etwas ungünstig den Kunden gleich mit einer ganzen Latte an Text zu “verschrecken”.

Danke und Gruß

Joe

Hi Joe,

“aufklappbar” heißt sicher, so ähnlich wie bei Facebook oder so?
Dazu sollte man sich mit Javascript, Ajax und jQuery beschäftigen, anders wird das ohne Neuladen der kompletten Seite nicht funktionieren.
Fraglich bleibt dann auch noch, ob das wirklich günstig für die Suchmaschinen ist, schließlich kann man über die oxlongdesc eine Menge reißen.

Gruß

Hallo Joe!

Prinzipiell geht das relativ einfach per CSS und JavaScript. Du packst die Longdescription in ein Div-Tag, das Du mit visibility hidden “versteckst”. Über einen Klick an entsprechender Stelle änderst Du die visibility-Eigenschaft via JavaScript auf visible und hast Deinen Effekt. Die Suchmaschinen sind davon nicht beeinträchtigt, da der Text ja im HTML steht, nur der Browser zeigt ihn initial nicht an. Dazu sollte es genügend Beispiele auf entsprechenden CSS / Java-Script Seiten geben. Google mal mit den entsprechenden Begriffen …

Gruß, SubNet-One

EDIT: Du kannst auch Teile der Longdesc damit ausblenden, wenn Du den entsprechenden Code in der longdesc für die auszublendenden Teile einbettest.

[QUOTE=Marco Steinhäuser;15168]Hi Joe,

“aufklappbar” heißt sicher, so ähnlich wie bei Facebook oder so?
Dazu sollte man sich mit Javascript, Ajax und jQuery beschäftigen, anders wird das ohne Neuladen der kompletten Seite nicht funktionieren.
Fraglich bleibt dann auch noch, ob das wirklich günstig für die Suchmaschinen ist, schließlich kann man über die oxlongdesc eine Menge reißen.

Gruß[/QUOTE]
Die wichtigste Element (und mit Abstand effizienteste Methode) hast Du glatt vergessen: CSS.

Damit lassen solche “Flyouts” ganz einfach und sehr effizient realisieren…

Ein paar wenigen Zeilen CSS erlauben den Trick, ganz ohne aufwändiges AJAX & Co.!

Im Prinzip der gleiche Vorschlag wie der von “SubNet-One”, nur dass der komplett ohne Javascript auskommt…

So in etwa sieht das dann aus:

HTML-Struktur:

<div class="description">
    Irgendein kurzer Hinweis-Text als Teaser
    <div class="tool_tip">
        Und hier kommt dann der laaange HTML-Beschreibungstext rein....    
    </div>
</div>

Die CSS-Deklarationen dazu:

.description {
    position:relative;
    /*Weitere CSS-Deklarationen zur Formatierung des div "description"*/
}

.description:hover .tool_tip {
    display:block;
}

.description .tool_tip {
    display:none;
    position:absolute;
    /*Weitere CSS-Deklarationen zur Formatierung des div "tool_tip"*/
}

Mit der Lösung von avenger hast Du allerdings dann keine permanente Anzeige des Langtextes, sondern nur eine bei “mouseOver”, also wenn Du mit der Maus über dem entsprechenden Element bist. Bewegst Du die Maus wieder aus dem Langtext-Bereich raus, klappt der Text wieder ein.

Eine permanente Anzeige nach einem Klick auf “mehr Infos” oder so läßt sich meines Wissens nicht ohne JavaSkript oder eben via neuladen der Seite (damit also serverseitig gesteuert) umsetzen. Wenn jamand da eine Lösung hätte, die rein CSS-Basiert ist: immer her damit :slight_smile:

[QUOTE=SubNet-One;15197]Mit der Lösung von avenger hast Du allerdings dann keine permanente Anzeige des Langtextes, sondern nur eine bei “mouseOver”, also wenn Du mit der Maus über dem entsprechenden Element bist.

Wenn jamand da eine Lösung hätte, die rein CSS-Basiert ist: immer her damit :)[/QUOTE]
Das ist richtig…

Ich hoffe da auf CSS 3…

[QUOTE=Marco Steinhäuser;15168]Hi Joe,

Fraglich bleibt dann auch noch, ob das wirklich günstig für die Suchmaschinen ist, schließlich kann man über die oxlongdesc eine Menge reißen.

Gruß[/QUOTE]

Hintergrund:
Wir haben in der Langbeschreibung tlw. eine komplette DIN A4 Seite Text bzw. Daten.
Ich möchte ja den User nicht erschlagen mit einem Artikel, bei dem er drei mal scrollen muss, um ans Ende zu kommen.

Eine Idee wäre noch, in der Artikelansicht die right.tpl auszublenden und die Artikelansicht soz. über die dann entstandene 2/3-Breite anzeigen zu lassen.
So hätte man ein wenig mehr Platz und könnte die Ansicht “dehnen”.

Hallo Joe.

Deine initiale Idee mit dem ausklapppbaren Text finde ich nicht schlecht. Wenn Ihr verschiedene Abschnitte habt, wie das oft in technischen Daten der Fall ist, würde ich überlegen die einzelnen Sinnabschnitte ausklappbar zu gestalten - mit avengers oder meinem Ansatz, je nach Belieben.

Das hat den Vorteil, daß die gesamte Shop-Funktionalität erhalten bleibt (rechte Spalte), gleichzeitig alle Themenbereiche sichtbar sind, aber die Details nach Bedarf eingeblendet werden können.

Soweit ich mir Dein Szenario richtig vorstelle, halte ich das für die usebility-technisch beste Lösung. Die _right.tpl auszublenden ist in meinen Augen der allerletzte Weg, da Du so eine inkonsistente Oberfläche hast und das verwirrt den Besucher meist mehr, als es hilft.

Noch ein Denkansatz: kannst Du den Shop so gestalten, dass du die rechte Spalte grundsätzlich weglassen kannst? Ich mache gerade ein Projekt, wo der shop so simpel, wie möpglich sein soll und ich habe die rechte Spalte ganz rausgeschmissen.

Gruß, SubNet

[QUOTE=SubNet-One;15229]Hallo Joe.

Deine initiale Idee mit dem ausklapppbaren Text finde ich nicht schlecht. Wenn Ihr verschiedene Abschnitte habt, wie das oft in technischen Daten der Fall ist, würde ich überlegen die einzelnen Sinnabschnitte ausklappbar zu gestalten - mit avengers oder meinem Ansatz, je nach Belieben.

Das hat den Vorteil, daß die gesamte Shop-Funktionalität erhalten bleibt (rechte Spalte), gleichzeitig alle Themenbereiche sichtbar sind, aber die Details nach Bedarf eingeblendet werden können.

Soweit ich mir Dein Szenario richtig vorstelle, halte ich das für die usebility-technisch beste Lösung. Die _right.tpl auszublenden ist in meinen Augen der allerletzte Weg, da Du so eine inkonsistente Oberfläche hast und das verwirrt den Besucher meist mehr, als es hilft.

Noch ein Denkansatz: kannst Du den Shop so gestalten, dass du die rechte Spalte grundsätzlich weglassen kannst? Ich mache gerade ein Projekt, wo der shop so simpel, wie möpglich sein soll und ich habe die rechte Spalte ganz rausgeschmissen.

Gruß, SubNet[/QUOTE]

Danke für das Feedback.
Jetzt muss ich mich nur noch schlau machen, wie das am besten umsetzbar ist. Bin nicht so tief im Programmieren drin.

Die rechte Spalte ganz weglassen hab ich mir auch schon überlegt.
Allerdings hätte ich dann auf der linken Seite eine ganze Palette an Punkten. Da müsste der User scrollen ohne Ende. Ist auch nicht so ideal. :o

[QUOTE=Joe78;15288]Danke für das Feedback.[/QUOTE]
Kein Ding …

[QUOTE=Joe78;15288] Jetzt muss ich mich nur noch schlau machen, wie das am besten umsetzbar ist. Bin nicht so tief im Programmieren drin.[/QUOTE]
Das hat nicht direkt mit programmieren ansich zu tun. Das ist alles entweder in der Administration zu erledigen, oder in den Templates. Das heißt, mit PHP kommst Du nicht wirklich in Kontakt. OK, ein bisschen JavaScript :wink:

[QUOTE=Joe78;15288] Allerdings hätte ich dann auf der linken Seite eine ganze Palette an Punkten. Da müsste der User scrollen ohne Ende.[/QUOTE]
Wenn das der Fall ist, fällt die Option definitiv weg!!

Wenn ich nachher Zeit habe, schau ich mal, ob ich ein passendes Bsp. finde, oder ob ich Dir schnell ein bisschen Beispielcode tippen kann. Momentan bin ich aber selber knapp mit Zeit :wink:

[QUOTE=SubNet-One;15300]

Wenn ich nachher Zeit habe, schau ich mal, ob ich ein passendes Bsp. finde, oder ob ich Dir schnell ein bisschen Beispielcode tippen kann. Momentan bin ich aber selber knapp mit Zeit ;)[/QUOTE]

Wäre super!!!
Beruhigend zu sehen, dass die Zeit sich nicht nur bei mir so selten sehen lässt. :smiley: