Text ausklappen durch Klick

[Martinus33]

Hallo,
soweit ich weiß, gibt es ein paar Techniken, wenn man Textabsätze ausklappbar machen will, HTML5, JavaScript, CSS3.
Es wären auf jeder Seite mehrere Absätze, auf versch. Stellen verteilt.
Ich habe Wordpress und ein HTML5-fähiges Profi-Theme.

Einacher, geringer Code, Ladezeit und Browserverträglichkeit sind die Kriterien, die ich gefunden habe. Habe ich was vergessen? Welche Technik bietet sich dementsprechend an?

 

[Mika911]

Wie wäre es mit dem Spoiler-Tag?

 

[Daaron]

Hallo,
soweit ich weiß, gibt es ein paar Techniken, wenn man Textabsätze ausklappbar machen will, HTML5, JavaScript, CSS3.

Du wirfst hier mit Dingen um dich... Ich bezweifle, dass du ansatzweise weißt, was du da tun willst.

Aber mal kurz und knapp:
- HTML5 an sich kann gar nichts animieren, aufklappen, rumflitzen lassen,... HTML ist eine Auszeichnungssprache, die rein der Semantik dient.
- CSS3... Mit :target wäre es grundsätzlich möglich, würde aber jedes Mal einen Seitenreload auslösen. Unsinn!
- JavaScript: Das Allheilmittel. Dein Stichwort heißt übrigens Akkordion

Wie wäre es mit dem Spoiler-Tag?

Das wäre BB-Code... HTML enthält keinen Tag namens <spoiler>.

 

[iks-deh]

Wenn du jQuery einsetzen kannst/willst, könntest du dir das hier mal anschauen. Damit sollte sich das ganze relativ einfach umsetzen lassen:

http://api.jquery.com/slideToggle/

 

[Martinus33]

@Daaron:
Ansatzweise schon. Erwartest du, jemand fragt, obwohl er es schon alles weiß?

Ich habe beim Googlen durchaus Lösungen mit HTML5 und CSS gefunden. Und es deshalb erwähnt. Allerdings werden die details/summary-tags und CSS3 bislang noch immer nicht unterstützt von den Browsern. Offenbar noch so verbreitet, dass es sich nach Meinung der Mehrheit nicht mal lohnt, langfristig zu denken und mit eingebauten Notlösungen für ältere Browser zu arbeiten.

Verstehen tu ich das vor allem Im Hinblick auf CSS nicht, weil per CSS aufklappbare Menüs gibt es schon lange. Warum braucht man für Text CSS3, das weitgehend noch nicht unterstützt wird von den Browsern?

@Mika911:
Kannst du das etwas näher erklären oder einen Artikel verlinken?

@iks-deh:
Ich hätte JS gerne vermieden, weil ich sonst auf der Site ganz darauf verzichten kann und dann völlig JS-free wäre.
Aber offenbar geht es nicht anders. Wie ich den Link sehe (danke), ist es zumindest nur ein sehr kleiner Code, der keine Ladezeit kostet. Hatte gelesen, jquery ist sehr umfangreich und verlangsamt das Laden?
Funktioniert das .slidetoggle zuverlässig mit allen Browsern?

 

[Daaron]

Du kannst in CSS keine Click-Events machen, du hast nur :hover und :target. :hover bringt dir hier nichts und :target würde einen erneuten Seitenaufbau benötigen.
Detail/summary war mir sogar noch neu. Das Zeug ist noch so "Working Draft", dass weder Firefox noch IE10 damit umgehen können. Lediglich Chrome, Opera und Safari, also die Webkit-Browser, könnens. Daran würd ich mich aber nicht festhalten.

Es ist übrigens ziemlich unsinnig, eine zwanghaft JS-freie Seite erstellen zu wollen. Sogar die Mozilla Foundation ist inzwischen dazu übergegangen, den "schalte JS ab"-Knopf im FF zu entfernen. JS ist nun einmal ein elementarer Teil des Netzes. Kein JS, keine Interaktivität. So einfach ist da.

 

[iks-deh]

jQuery ist soweit ich das weiß sowieso in Wordpres enthalten und wird dementsprechend mitgeladen.

 

[Martinus33]

@Daaron:
Chrome kann das schon seit 2 Jahren. HTML5 können die Browser schon, aber speziell diese Sache nicht - wenn ich das richtig verstanden habe.

Ich mag es halt gerne einfach und puristisch. Dann ist es gerade für einen Laien einfacher zu pflegen, weniger fehleranfällig, du bist weniger abhängig, musst seltener auf Veränderungen reagieren usw. Das ist mir sehr sympathisch. Aus dem gleichen Grund versuche ich möglichst ohne Plugins auszukommen. Obwohl es in diesem Fall vielleicht klüger wäre.

@iks-deh:
Mitdrin in WP offenbar schon, aber nicht automatisch mitgeladen. Habe diesen inter. Artikel gefunden:
http://blog.kulturbanause.de/2012/10/wordpress-interne-jquery-version-uber-google-cdn-laden/

 

[BlubbsDE]

Einfach und puristisch und dann WordPress in Nutzung? WordPress ist auch ohne Plugins ein Monster. WordPress kann auch eine weiße Seite darstellen, sicher. Aber um das zu können, lädt WP viel an Code

Der Weg mit JS oder eine JS Library wäre wohl zur Zeit der Richtige.

 

[iks-deh]

jQuery ist in der minified-Version keine Hundert KB groß, da brauchen die meisten Bilder schon mehr. Und laufen sollte das auf jedem halbwegs modernen Browser, jQuery unterstützt auch ältere Browser, ohne dass du dich darum kümmern musst (vor allem im Bezug auf IE):
http://jquery.com/browser-support/

 

[Daaron]

@Daaron:
Chrome kann das schon seit 2 Jahren. HTML5 können die Browser schon, aber speziell diese Sache nicht - wenn ich das richtig verstanden habe.

Es ist egal, was Chrome kann. Ich werde nicht dafür bezahlt, für Chrome zu entwickeln. Ich bin schon ziemlich radikal im Umgang mit unseren Kunden (bzw. deren Besuchern) und liefere keinen Support für IE7 und nur funktionstüchtige Notlösung für IE8, viele Webentwickler trauen sich nicht einmal das. Was ich aber definitiv NICHT mache und auch niemandem empfehle: Etwas so entscheidendes wie ein Inhaltselement nur für EINE einzige Renderengine ausliefern.
Genauso kann kaum ein Browser <input type="date">, also kann ich einen Datumsselektor damit nicht erstellen.

Ich mag es halt gerne einfach und puristisch.

Dann bist du bei Wordpress aber falsch. Das Ding belegt ein paar Dutzend MB RAM, nur um eine weiße Seite mit einer 640x480-Grafik darzustellen...
Aber Wordpress hat eh noch ganz andere Baustellen die mich da immer nur sagen lassen: FINGER WEG!

Dann ist es gerade für einen Laien einfacher zu pflegen,

Ein anständiges CMS ist so oder so leicht zu pflegen. Nehmen wir mal deine Problemstellung udn als CMS einfach Contao: Das hat von Haus aus ein Content Element für solche Akkordeon-Effekte. Jede Napfsülze kann da mit 3 Klicks ein voll funktionsfähiges Akkordeon erstellen.

Aus dem gleichen Grund versuche ich möglichst ohne Plugins auszukommen. Obwohl es in diesem Fall vielleicht klüger wäre.

Plugins wie Flash oder Java? Weg damit!
Plugins im CMS? Immer her damit!
JavaScript im Allgemeinen? So wenig wie möglich, so viel wie nötig.

 

[Mika911]

Such mal nach "BB-Code spoiler".
Daaron hat wohl recht, Spoiler gehört nicht zu HTML.
Ich hab zu dem Thema das hier gefunden.

 

[Martinus33]

@BlubbsDE:
Ich werde wohl JQuery nehmen, bis irgendwann HTML5/CSS3 weitläufig unterstützt wird.

@Mika911:
danke, schau es mir mal an.

@iks-deh:
Klingt doch gut!
Reicht die minified-version für meine Zwecke und Kann ich mir die minified-version bewusst aussuchen?

@Daaron:
Die Entscheidung für WP mitsamt dem wirklich tollen Profi-Theme ist bereits gefallen. Solange man damit schnell ladende Seiten erstellen kann und das kann man... Sicherheit ist noch ein WP-Thema, aber auch da gibt es viele Hilfen. Ansonsten hat WP gerade für Laien auch viele Vorteile.

Habt ihr Meinungen dazu, WIE die JQuery-Einbindung/Laden am besten ist? So wie in dem verlinkten Artikel beschrieben?
Spricht etwas gegen ein entspr. Plugin?

 

[iks-deh]

@Martinus33

http://jquery.com/download/

Hier gibt es die normale Version, bei der du auch mal in den Code reinschauen kannst, und die komprimierte Version, die nur relativ unverständlichen Buchstaben-Salat enthält. Version 1 & 2 unterscheiden sich aktuell afaik nur in der Browserkompatibilität (Version 2 hat den Support für IE 6,7 und 8 zugunsten der Performance und Größe gekappt).

Zur Einbindung:

https://www.google.de/search?q=jque...Jj4zMA.O&fp=72e726f79406e69a&biw=1433&bih=711

 

[Daaron]

@BlubbsDE:
Ich werde wohl JQuery nehmen, bis irgendwann HTML5/CSS3 weitläufig unterstützt wird.

Es gibt eben nicht DAS eine HTML5 und DAS eine CSS3. Beide Standards sind noch arg im Fluss. Daher kann man da eben auch nicht von weitläufiger Unterstützung sprechen.

Fakt: Man kann ungestraft mit dem HTML5-Doctype arbeiten und exzessiven Gebrauch von <nav>, <article>, <time>, <figure> und Co machen. Man muss für IE<=8 eben nur html5shim einbinden und diese Elemente passend display:block (bzw. inline) definieren.
Fakt: Man kann ungestraft mit Rounded Borders, Dropshadows und den Animationen arbeiten. Da das alles rein optische Spielereien sind ändern sie nichts an der Funktionalität der Seite -> sanftes Fallback für IE7, 8 udn zu gewissen Teilen auch 9.

Fakt ist aber auch: So n Kram wie <input type="color"> kann man schlichtweg die nächsten 6-8 Jahre nicht großflächig verwenden. Selbst der IE11, den es nun noch gar nicht gibt, kann keinen Color Selector. Dauert also wenigstens, bis die Supportzeit für Windows 8 endgültig abgelaufen ist, bis sich das Problem erledigt hat.

Reicht die minified-version für meine Zwecke und Kann ich mir die minified-version bewusst aussuchen?

Man nimmt immer die minified-Versionen, außer man ist Entwickler....

Habt ihr Meinungen dazu, WIE die JQuery-Einbindung/Laden am besten ist? So wie in dem verlinkten Artikel beschrieben?

Ideal: Asynchron via CDN (z.B. Google) mit lokalem Fallback.

Sieht dann, bei Contao mit Mootools, z.B. so aus:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script>window.MooTools || document.write('<script src="plugins/mootools/1.4.5/mootools-core.js">\x3C/script>')</script>

Das kann man analog auch für jQuery machen.

 

[Martinus33]

In dem Artikel steht:
"Wer WordPress benutzt muss eine Entscheidung treffen. Entweder wird die interne Version von WordPress verwendet, die über den eigenen Server ausgeliefert wird und evtl. sogar veraltet ist. Oder es wird ein CDN verwendet, was zwar schneller ist, aber auch dazu führen kann, dass jQuery doppelt geladen wird und Kompatibilitätsprobleme verursacht.
Im Idealfall greift WordPress selbst auf ein CDN zurück. Dann wird immer die schnelle Version ausgeliefert und es kann auch keine Konflikte mit verschiedenen Versionen geben. "
Das soll dann über entspr. Code in der functions realisiert werden.

Die zwei Zeilen deines Codes entsprechen aber nicht dieser "WP greift selbst auf ein CDN zurück"-Lösung, korrekt?

 

[Daaron]

Meine beiden Zeilen beziehen sich auf Mootools, nicht auf jQuery. Außerdem sind die aus einem Contao-System, nicht aus Würgpress.

Überlass einfach WP, welche jQuery-Version geladen wird.

 

[Martinus33]

Okidoki.

Dank euch.

 

[JanKrohn]

Schau Dir mal Twitter Bootstrap an, da sind diese Dinge alle schon eingebaut:
http://de.wikipedia.org/wiki/Bootstrap_(Framework)

Es ist das selbe Framework, das von Twitter eingesetzt wird. Die haben es der Allgemeinheit zur Verfuegung gestellt, und als Open Source veroeffentlicht.

Gruss,
Jan

 

[MaverickM]

jQuery ist in der minified-Version keine Hundert KB groß, da brauchen die meisten Bilder schon mehr.

Richtig. Zumal man auch bspw. eine jQuery Library von Google laden kann. Die Wahrscheinlichkeit, dass die bereits im Cache des Users ist, ist recht hoch.

Ansonsten haben die weiter verbreiteten CMS ja auch bereits diese Bibliotheken mit an Board.