jQuery

[Hans]

Hallo,

ich stehe vor einem Problem, hab auf einer Seite sehr viel Text. Das wirkt sehr unübersichtlich. Jetzt möchte ich gerne, dass ich nur ein Teil angezeigt bekomme, wenn ich dann auf mehr Lesen klicke, die Seite nach unten fährt und ich den Rest lesen kann.

Hab mal gehört, dass man das mit jQuery machen kann, leider hab ich keine Ahnung nach was ich suchen soll.

Hoffe Ihr könnt mir helfen.

Gruß,
Hans

[Gernot Back]

Hallo Hans,

warum stöberst du nicht einfach mal in der jQuery-Doku?

Gruß Gernot

[Hans]

Hallo Gernot,

warum stöberst du nicht einfach mal in der jQuery-Doku?

dise Funktion kenne ich bereits. Aber hier kann ich nur ein ganzen Text ein bzw. ausbleden lassen. Ich such etwas wo ich ein Text erweitern kann, sprich ich habe z.B. mit 3000 Zeichen, möchte nur die ersten 100 angezeigt bekommen mit einem Klick auf mehr, soll die Seite nach unten geschoben werden und die restlichen 2900 Zeichen sollen eingeblendet werden.

Gruß,
Hans

[Gernot Back]

Hallo Hans,

Ich such etwas wo ich ein Text erweitern kann, sprich ich habe z.B. mit 3000 Zeichen, möchte nur die ersten 100 angezeigt bekommen mit einem Klick auf mehr, soll die Seite nach unten geschoben werden und die restlichen 2900 Zeichen sollen eingeblendet werden.

Das kann schon deshalb nicht ohne Weiteres funktionieren, weil du mit einem starren Limit (etwa von 3000 Zeichen) willkürlich die Grenzen von Elementen (z.B. Absätzen [P-Elementen]) missachten würdest. Die wären dann möglicherweise auch gar nicht geschlossen. Nun muss ein P-Element je nach Doctype nicht unbedingt geschlossen sein, aber du müsstest ja dann für den ersten und den zweiten Teil eines Absatzes, (der erste soll noch sichtbar sein, der zweite soll ggf. schon ausgeblendet werden) eigene SPAN-Elemente hineinschachteln, die diese Trennung wiederspiegeln.

Und was machst du, wenn du nach 3000 Zeichen mitten in einer Zwischenüberschrift landest? Hx-Elemente müssen immer geschlossen werden! Machst du dann aus einer Überschrift zwei; eine, die stehen bleibt, und eine andere, die ein- und ausgeblendet werden kann?

Ich fürchte, da hilft dir auch jQuery nicht weiter!

Gruß Gernot

[molily]

Hallo,

Ich such etwas wo ich ein Text erweitern kann, sprich ich habe z.B. mit 3000 Zeichen, möchte nur die ersten 100 angezeigt bekommen mit einem Klick auf mehr, soll die Seite nach unten geschoben werden und die restlichen 2900 Zeichen sollen eingeblendet werden.

Eine Fertigfunktion bietet jQuery dafür nicht. Ohne ein bisschen DOM-Gefummel kommst du nicht aus.

Den Algorithmus, der die ersten 100 Zeichen extrahiert, müsstest du dir wie gesagt selbst schreiben. Wenn vom Textinhalt (textContent/innerText) 100 Zeichen nimmst, musst du auf Wortgrenzen und eventuelle Überschriften achten, wie Gernot auch sagt.

Einfacher wäre es, wenn du den ersten Absatz oder die ersten paar Absätze anzeigst. Den Inhalt danach versteckst du und fügst dazwischen einen Weiterlesen-Link ein.

Beim Klick auf den Link löscht du den Link und blendest die restlichen Elemente ein.

Das ließe sich mit oder ohne jQuery relativ einfach umsetzen.

Mathias

[Matthias Apsel]

Om nah hoo pez nyeetz, Hans!

Dies geht auch mit einfachem JS.

ungetestete Skizze:
HTML:

<div class="wenig">  
  <p>ganz viel Text</p>  
  <p><a id="umschalter"></a></p>  
</div>

CSS:

.wenig  
{  
   position: relative;  
   heigth: 10em;  
   padding-bottom: 1em;  
   overflow: hidden;  
}  
#umschalter::before  
{  
   content: "Einklappen";  
}  
.wenig #umschalter  
{  
   position: absolute;  
   bottom: .2em;  
   right: .2em;  
}  
.wenig #umschalter::before  
{  
   content: "Mehr lesen";  
}  
.alles  
{  
   height: auto;  
}  

Javascript:
Ändere die Klassenzugehörigkeit des div-Elements von 'wenig' auf 'alles'
bei mehreren solcher Elemente: Eventhandling siehe http://molily.de/js/

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Dies geht auch mit einfachem JS. […]
Ändere die Klassenzugehörigkeit des div-Elements von 'wenig' auf 'alles'

Gerade die Änderung der Klassenzugehörigkeit von 'wenig' auf 'alles' lässt sich mit jQuery wesentlich einfacher implementieren als ohne Framework.

Bedenke, dass das Element noch anderen Klassen angehören könnte, die nicht geändert werden sollen.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

Dies geht auch mit einfachem JS. […]
Ändere die Klassenzugehörigkeit des div-Elements von 'wenig' auf 'alles'

Gerade die Änderung der Klassenzugehörigkeit von 'wenig' auf 'alles' lässt sich mit jQuery wesentlich einfacher implementieren als ohne Framework.

Das ist mit wenigen Zeilen Javascript auch erledigt.
Klar, wenn man ohnehin jQuäly für andere Dinge verwendet ist es ok, aber ansonsten ist die Einbindung eines 90k-Frameworks absoluter Overkill.

Stur lächeln und winken, Männer!
Kai

[molily]

Klar, wenn man ohnehin jQuäly für andere Dinge verwendet ist es ok, aber ansonsten ist die Einbindung eines 90k-Frameworks absoluter Overkill.

90k??? jQuery ist unminified/unkomprimiert nur 229 KB groß. Immer schön bei der Wahrheit bleiben! ;)

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

Klar, wenn man ohnehin jQuäly für andere Dinge verwendet ist es ok, aber ansonsten ist die Einbindung eines 90k-Frameworks absoluter Overkill.

90k??? jQuery ist unminified/unkomprimiert nur 229 KB groß. Immer schön bei der Wahrheit bleiben! ;)

Und minified/komprimiert ca. 90, laut en-Wikipedia (genau steht da 91.6) - und den Wert habe ich genommen. Ich weiß gerade nicht, worauf du hinaus willst.

Stur lächeln und winken, Männer!
Kai

[molily]

Und minified/komprimiert ca. 90, laut en-Wikipedia (genau steht da 91.6) - und den Wert habe ich genommen. Ich weiß gerade nicht, worauf du hinaus willst.

War nur ein kleiner Scherz. Minified kommt jQuery 1.7.1 auf 93.868 Byte, ja, das sind 91.6 KB. Mit GZIP kommt man sogar auf 31 KB herunter. Nur ist Ladeperformance kein Kriterium zur Beurteilung der Komplexität, am unkomprimierten Code gemessen ist jQuery viel größer. Einerseits wirbt jQuery mit einem »Lightweight Footprint«, was ich kontrafaktisch und unredlich finde, andererseits ist man sich bewusst, dass man eine der größten monolithischen JavaScript-Bibliotheken entwickelt und diese ständig wächst. Man versucht daran auch etwas zu tun:

http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/
http://blog.jquery.com/2011/11/22/call-for-jquery-1-8-ideas/

Wirklich Licht sehe ich da aber nicht, jQuery ist aus gutem Grund recht umfangreich. Kleinere, modulare Alternativen mit ähnlicher API existieren, z.B. Ender, die sind natürlich nicht so robust und kompatibel.

Mathias

[Matti Mäkitalo]

Hi,

ungetestete Skizze:
HTML:

<div class="wenig">

<p>ganz viel Text</p>
  <p><a id="umschalter"></a></p>
</div>

  
Hier bietet sich IMHO die Verwendung des Elements "[details](http://www.w3.org/TR/html5/interactive-elements.html#the-details-element)" an, wenn man HTML5 verwendet. Dann braucht man auch bald (TM) gar kein Javascript.  
  
Bis die Tage,  
Matti

-- 
[Webapplikationen in C++ entwickeln](http://tntnet.org/)

[Cheatah]

Hi,

Dies geht auch mit einfachem JS.

oder ganz ohne.

HTML:

<a href="#idDesEntsprechendenElementes">aufklappen</a>

CSS:

p:not(:target) { /* Darstellung reduzieren */ }

Cheatah

[Matthias Apsel]

Om nah hoo pez nyeetz, Cheatah!

<a href="#idDesEntsprechendenElementes">aufklappen</a>

mit dem Nachteil, dass das Element mit der Id 'idDesEntsprechendenElementes' dann ganz oben an der Seite klebt.

Matthias