Im div nach Einleitung einen "weiter Button"

[bewusstwerdung]

Hallo,

finde für mein Problem keine Vernünftige Lösung
die auch W3C Entspricht. Hier mein Problem...

Habe für den Content ein div mit folgendem css

#content {
	min-height:490px;
	width: 615px;
	background-color: #ffffff;
	padding: 10px;
	border: 1px solid #96261B;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 145px;
}

Nun kommt ein Artikel mit Text rein mit der Möglichkeit
"mehr lesen" zu klicken.
Danach soll der Komplette Text im div sichtbar sein,
wie z.B. bei Joomla.

In diesem content-div sind 5 Artikel mit dem selben Prinzip enthalten.

Wie kann ich das Umsetzen?

Lieben Dank und Gruß
Otto

[zulujaner]

Nun kommt ein Artikel mit Text rein mit der Möglichkeit
"mehr lesen" zu klicken.

Ja das kannst du mit verschiedenen Ansätzen lösen.

Bei Joomla ist das, soweit ich weis, mit PHP gelöst worden. Klickst du drauf, wird der die Seite mit dem Rest, per Abfrage aus der Datenbank, nachgeladen.

Oder du machst die ganze Geschichte mit Javascript, AJAX.
Dreamweaver hat das schon vorgefertigt. Verwendet wird das Spry Framework.

Da ist aber der Nachteil, das das alles beim laden der Seite mitgeladen wird. Wenn dann viel Text drin ist, dauert das seine Zeit.
Das umschalten geht dann aber sehr flott :-)

[bewusstwerdung]

Hallo zulujaner!

Danke für die Antwort!
Da ich nicht sehr viel Text verwende, werde ich mal das
Spry Framework von Dreamweaver testen.

Mal sehen wie es funkt....

LG
Otto

[the0bone]

Ich hab sowas mit jquery gemacht und hab auch die Möglichkeit einen anderen Kurztext zu nehmen als den langen.

http://bushidoalfeld.de/

[bewusstwerdung]

Hallo the0bone!

Das sieht voll super aus!!!
Hierbei muss beim User js im Browser Aktiviert sein.

Ist diese Lösung von dir W3C Standard?
Wenn ja kann du mir ein Beispiel posten

Habe auch nicht mehr Text als auf deiner Seite,
wäre voll super!

Danke
LG
Otto

[the0bone]

Oups, seh grad, das es invalid ist... fehlt nen p Tag. Mach ich heute abend valid.
Und wenn der Besucher JavaScript aus hat, bekommt er gleich von anfang an den langen Text gezeigt.

Aber das ganze ist nicht schwer!
Kurztest ist in einem Container mit einer Klasse und Langtext ist in einem anderen Kontainer mit einer anderen Klasse.
Grundsätzlich nutze ich dafür jquery.

$(document).ready(function(){
	$(".contentTEASER").show();
	$(".contentTEASER").after('<a href="#" class="weiterlesen">... hier klicken um weiter zu lesen</a>');
	$(".weiterlesen").click(function () {
		$(this).next(".contentHTML").show();
		$(this).prev(".contentTEASER").hide();
		$(this).hide();
		return false;
	});
	$(".contentHTML").hide();
});

Über CSS blende ich den Teaser erstmal aus und zeige den Langtext an.
Im Javascript drehe ich das ganze. Zuerst sag ich ihm, dass er den Teaser wieder zeigen soll. Und nach dem Teaser Container soll der den Link einfügen. (Hier fehlen die <p></p> Tags.)
Dann kommt die "toggle" Funktion. Wenn der Link geklickt wird, dann zeige das eine und das andere nicht mehr.
Zum Schluss blende ich den Langtext noch aus.

Fertig

[bewusstwerdung]

Hallo!

Werde heut Abend gleich mal probieren deinen Input umzusetzen.
Sollte ich wo Anstehen, Frage ich nochmals nach.

Vorab mal vielen Dank für deinen Input!

lg
Otto

[the0bone]

Oups, seh grad, das es invalid ist... fehlt nen p Tag. Mach ich heute abend valid.

So, valid!

[bewusstwerdung]

Hallo,

habe es jetzt mit "Spry Framework" und zwar mit
dem "Spry Rolladen" gefertigt.
Der Tip kam von zulujaner! Vielen Dank nochmals für den Tip!!!

Da ich selber noch eine ältere DW Version habe und daher noch
kein Spry Framework Inkludiert habe, hat mir ein Freund
die *.css, *.js dafür gesendet.

Damit habe ich es geschafft, leider ist die Seite noch nicht Online.

Trotzdem ein Danke the0bone

LG
Otto