Text mit Java Script abkürzen

Beitrag von **michaelskw** » 07.05.2009, 18:22

Hi,

ich suche gerade nach einer guten Möglichkeit, viel Text auf einer Webseite unterzubringen, der aber nicht komplett angezeigt wird.

Ähnlich, wie Dooyoo seine Kategorien derzeit beschreibt und die Möglichkeit bitet, mit dem "mehr" Link den ganzen Text einzublenden:
https://www.dooyoo.de/fernseher/

Frage:

- Weiß jemand, mit welchem Java Script das so geht?

- Ist diese Lösung wegen Java aus SEO Sicht unproblematisch? Der Text steht für Google zumindest im Quelltext komplett drinne.

Wäre für Tips dankbar.

Grüße
Michael

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **TheRob** » 07.05.2009, 18:25

via AJAX ohne Schwierigkeiten möglich. Scripts dazu gibts wie Sand am Meer. AJAX Tabs zum Beispiel.

Beitrag von **SloMo** » 07.05.2009, 19:23

AJAX? Braucht man dafür gar nicht! Die Daten sollen ja nicht nachgeladen werden, sondern nur gekürzt und auf Bedarf eingeblendet. Ist auch wegen der SEO besser.

Ich würde für sowas jQuery benutzen, das erspart Scherereien in Sachen Browser-Kompatibilität. Aber sicher gibt es auch kleinere JavaScript-Fertigskripte, die dasselbe tun. Einfach mal im Netz suchen.

Und übrigens: Java und JavaScript sind zwei unterschiedliche Dinge. Dazu gibts auch massig Info im Netz...

von **Anzeige von ABAKUS** »

Beitrag von **TheRob** » 07.05.2009, 19:26

war eventl. falsch ausgedrückt.. aber die Scripts die ich meine laufen unter der Bezeichnung AJAX, aber laden nix nach. Ist bei meiner VB Seite links auch so.

Beitrag von **heino** » 07.05.2009, 20:05

@TheRob

Meinst du dies:

Code: Alles auswählen

if &#40;d.style.display == 'none'&#41;
            d.style.display = 'block';
        else
            d.style.display = 'none';

Das Hin- und Herwechseln zwischen "display:block" und "display:none" ist noch lange kein AJAX !

https://www.admin-wissen.de/eigene-tuto ... g-in-ajax/

Beitrag von **TheRob** » 07.05.2009, 20:08

*gg*
jaaa... war nen Schnellschuss von mir... weil weiter gedacht an diverse Frameworks.

Sorry, ich knie vor Dir

Beitrag von **heino** » 07.05.2009, 20:11

TheRob hat geschrieben:Sorry, ich knie vor Dir

Zuviel der Ehre.
Erhebe Er sich wieder.

Beitrag von **Mork vom Ork** » 07.05.2009, 22:00

michaelskw hat geschrieben:Ähnlich, wie Dooyoo seine Kategorien derzeit beschreibt und die Möglichkeit bitet, mit dem "mehr" Link den ganzen Text einzublenden:
https://www.dooyoo.de/fernseher/

Frage:

- Weiß jemand, mit welchem Java Script das so geht?

Für so eine einfache Funktion, d.h. ohne großartige Einblendeffekte, brauchst du kein Javascript, das geht auch mit CSS:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style type="text/css">

div.klappe > * &#123; 
	display&#58;none;
&#125;
div.klappe&#58;hover > * &#123;
	display&#58;block;
&#125;

div.klappe > span&#58;first-child &#123;
	color&#58;blue;
	text-decoration&#58;underline;
	display&#58;inline;
&#125;
div.klappe&#58;hover > span&#58;first-child &#123;
	display&#58;none;
&#125;
</style>
</head>

<body>

<p>
Mit Blindheit per Definition geschlagen, dennoch nicht unsichtbar, präsentiere ich mich als unbeachtetes und ungeliebtes Stiefkind zeitgenössischer Literatur. Meine Bestimmung liegt - wie ich selbst - in engen Grenzen und ist rein platzhalterischer Natur.
</p>
<div class="klappe"><span>Mehr &#8230;</span>
<p> 
Kann ein missbrauchtes Wortgefüge eigentlich noch Schlimmeres erleiden, als als Blindtext erdacht und vor der Öffentlichkeit versteckt zu werden?
</p>
</div>

</body></html>

Der aufzuklappende Block wird in ein <div> der Klasse klappe gelegt. Mit div.klappe:hover > * werden als Erstes sämtliche (*) direkten Kinder (>) dieses <div>s versteckt (display:none). Sobald man mit der Maus über das <div> fährt (:hover), sorgt div.klappe:hover > * dafür, dass die Kindelemente eingeblendet werden (display:block).

Nun könnten wir über ein normalerweise ausgeblendetes Element ja schwerlich mit der Maus drüberfahren, deshalb gibt es die speziellere Regel div.klappe > span:first-child. Sie sorgt dafür, dass das erste (:first-child) <span>-Kindelement (>) von div.klappe -hier haben wir unser „Mehr …“ untergebracht- trotz der eingangs aufgestellten Regel div.klappe > * angezeigt wird (und zwar in Blau und unterstrichen, damit der Benutzer auch weiß, dass er da was machen kann). Die beiden Regeln überschneiden sich, in solchen Fällen überschreibt die spezifischere die allgemeinere.

div.klappe:hover > span:first-child last but not least blendet diesen „Mehr …“-Text aus, sobald man mit der Maus über den Bereich fährt - stattdessen wird dann ja der eigentliche Text angezeigt.