WebSite X5Help Center

 
Nicholas V.
Nicholas V.
User

Text per Mausklick ein- und ausblenden  de

Auteur : Nicholas V.
Visité 791, Followers 1, Partagé 0  

Hallo in die Runde!

Gerade schreibe ich einen langen Text... und möchte ausfühliche Anmerkungen gerne ausblenden, um den Text zunächst nicht zu sehr aufzublähen.

Die Besucher sollen dann auf einen "Link" klicken können, um die Anmerkungen zu öffnen. Die Anmerkungen sollen im gleichen Dokument angezeigt werden, damit man sie gemeinsam ausdrucken kann.

Es geht also um ein Ein- und Ausblenden, um die Lesbarkeit des langen Textes zu erhöhen. Siehe https://gemigo.de/wohlstand-fuer-alle.html

Die folgenden Lösungen funktionieren meiner Meinung nach NICHT (perfekt):

  • Eine ähnliche Frage gab es schon mal 2013 in polnischer Sprache: https://helpcenter.websitex5.com/fr/post/78375 Dort wurde u. a. ein jQuery-Objekt vorgeschlagen, welches aber nicht leicht zu realisieren ist. Außerdem kann man dort keine Hyperlinks einbauen... wenn ich dies korrekt getestet habe.

  • Das X5-Modul "Accordion Text/FAQ" kann zwar per Mausklick ein- und ausblenden, aber es verfügt über keinen echten Editor. Also muss man die Fettschreibung mit HTML-Tags gestalten... das kann nicht jeder. Und die manuellen HTML-Tags funktionieren überhaupt nicht.
    Abgesehen davon ist das Zerlegen des Haupttext und das Editieren der Texte und Anmerkungen eine echte Qual!

Also: Gibt es noch eine andere Möglichkeit?

Wenn nicht, dann möchte ich diesen Beitrag bitte als Anregung einbringen.

Beste Grüße an Alle!

Posté le
11 RéPONSES
Daniel W.
Daniel W.
User

Nach einigem Suchen bei Google habe ich einen passenden Code gefunden, siehe

Code >> https://a-fangauf.jimdo.com/proyectos-basteleien/website/text-aufklappen/

Damit können das Text-Objekt und dessen Textformatierungen genutzt werden, allerdings arbeiten nicht alle Formatierungen fehlerfrei, deshalb einfach testen was geht und was nicht.

Kurze Anleitung:

1) Der Javascript-Teil (Nr. 1 - siehe Link oben) wird kopiert und bei WebSite X5 unter ...

3 Sitemap

... wird die betreffende Seite markiert und oben auf "Eigenschaften" geklickt. Dann im Reiter "Erweitert" den kopierten Javascript-Teil einfügen bei ...

Benutzerdefinierter Code

Vor dem </HEAD> Tag

2) Im Text-Objekt von WebSite X5 wird der andere Code (Nr. 2 - siehe Link oben) eingefügt. Dabei muss dass HTML-Symbol angeklickt, damit es blau umrandet ist und der Code ausgeführt wird.

Meine Testseite >> https://findelinks.de/123shop-hosteurope/text-aufklappen.html

----- Screenshots -----

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Bei mehrmaliger Verwendung des Codes auf einer Seite bei jedem zusätzlichen Code 5 mal die Zahlen anpassen (siehe Screenshot unten) und zwar bei jedem zusätzlichen Code die gleichen 5 Zahlen verwenden, aber es dürfen niemals die Zahlen der anderen Codes sein, sonst gibt es Fehler.

Wenn der Text bei einem Codes aufgeklappt wird, dann schließt der Text beim anderen Code, falls diese geöffnet ist, so dass immer nur ein Text aufgeklappt ist.

Wenn der Text bei mehreren Codes offen bleiben soll, dann müssten die Javascript-Experten den Code anpassen, da ich nur geringe Javascript-Kenntnisse habe.

Auf der Testseite (Link oben) sind jetzt 3 Codes vorhanden.

-----

Lire plus
Posté le de Daniel W.
Nicholas V.
Nicholas V.
User
Auteur

@ Daniel: Vielen Dank für den Tipp. Sehr interessant. Das sollte man sich merken. Dies ist aber eine Hardcore-HTML-Lösung, die naturgemäß sehr fehleranfällig ist. Der Komfort ist gleich null. Aber es sieht aus wie eine Lösung!

Da ich ggf. alle Texte aufgeklappt lassen, damit man sie ggf. gemeinsam mit dem Haupttext ausgedruckt werden können, ist dies aber keine Lösung.

Lire plus
Posté le de Nicholas V.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Was ist wenn du im Text wo die Anmerkung auftauchen soll es per LINK und Mouseover anzeigt?

den Text markieren und auf einen LINK gehen und dort beim Reiter "tooltip" den Text eingeben. Dieser taucht dann in einer Sprechblase oder Kästchen auf!  Allerdings kann dieser nicht ausgedruckt werden.

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User

Wenn alle aufgeklappten Texte aufgeklappt bleiben soll, dann diesen Teil ...

    if(whichIsOpen != 0) {
        hideText(whichIsOpen);
    }

... beim Javascript-Code entfernen. Ich habe es getestet und es funktioniert.

Test >> https://findelinks.de/123shop-hosteurope/text-aufklappen.html (evtl. F5 drücken)

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Es ist war etwas Code im Text-Objekt vorhanden, aber dafür können auch die Funktionen für Textformatierungen, die Auswahl der Schriftarten und -größen oder die Verlinkung des markierten Textes genutzt werden, ohne dass weiterer HTML-Code gebraucht wird.

Das Einbinden von Bildern ist möglich, aber nicht ganz einfach, evtl. muss mit <br> nach dem Bild ein Zeilenumbruch eingefügt werden oder ähnliches, um Fehler zu verhindern.

Ganz kann auf ein <br> nicht immer verzichten werden, auch treten hin und wieder Fehler auf, deshalb immer mit der Vorschau testen was geht und wo kleine Änderungen zu machen sind.

Ich hoffe, dass es trotz kleiner Einschränkungen eine hilfreiche und nützliche Funktion ist.

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

x Nicholas V., ...  (It > De)  ... Ich weiß nicht, ob ich verstanden habe, was Sie erreichen möchten, ... aber wenn Sie Ihre aktuelle wohlstand-fuer-alle.html-Seite mit erweiterten Notizen (+) drucken möchten, können Sie mit EXTRA eine Erfindung von mir verwenden Code.. .
... wenn Sie das erreichen möchten und Interesse haben. Sagen Sie mir Bescheid, und vielleicht komme ich morgen wieder hierher ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

Nachtrag:

Der 1. Screenshot zeigt wie das Bild eingefügt und nach dem Bild ein <br> angefügt wurde.

Das eingefügte Bild von Pixabay wurde riesengroß im Text-Objekt angezeigt. Dann wurde das Bild angeklickt bis ein feiner gestrichelter Rand erschien, nun mit der rechten Maustaste angeklickt und beim Auswahlmenü auf "Eigenschaften des Bildes" geklickt, hier wurde Breite von 450 angegeben.

Der 2. Screenshot zeigt wie dieser Teil dann später im Browser aussieht.

Am Anfang ist der Umgang mit dem zusätzlichen Code etwas ungewohnt, aber die Vorteile des Auf- und Zuklappens sollten das aufwiegen.

Ich denke, damit ist soweit alles erklärt - oder gibt es noch Fragen?

----- Ansicht Text-Objekt -----

----- Ansicht Vorschau -----

Lire plus
Posté le de Daniel W.
Nicholas V.
Nicholas V.
User
Auteur

Wow, vielen Dank für die tollen Antworten. Die Community begeistert mich immer wieder!

@KolAsim: Ja, ich bin an dem Code interessiert.

@ Daniel W.: Das sieht super aus. Ich versuche das mal nachzubauen... und melde mich dann wieder.

Habt einen großartigen Tag!

Lire plus
Posté le de Nicholas V.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Nicholas V.
... ... ...  @KolAsim: Ja, ich bin an dem Code interessiert. ... ... ... 

... OK ... ...... mein hier angehängter exklusiver EXTRA-Code für die Seite wohlstand-fuer-alle.html  fügt einen EXTRA-Button hinzu, um den Inhalt der Seite in erweiterter Form drucken zu können...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪