[MarkusStar]

Hallo,

ich habe einen Link zu einem Effekt gefunden der sich "BlindDown" nennt

http://wiki.github.com/madrobby/scri.../effect-appear

Ich möchte so einen ähnlichen Effekt haben.
Der dort gezeigte, zeigt den verborgenen Text auf Klick. Jedoch lässt sich der Text danach nicht wieder "hochfahren" Und der Button auf dem beispielsweise steht "Text ganz anzeigen" ändert sich nicht.

Ich suche einen Effekt, wie er auf dieser Seite zu sehen ist:

http://www.ralphlauren.com/product/i...entPage=family

oben/mitte rechts gibt es eine Artikelbeschreibung, die man auf den blauen "Read more" Button ganz anzeigen lassen kann.
Das schöne daran ist, dass sich der "Read more" Button nach dem Ausfahren in ein "close" Button verändert und man auf Wunsch auch den Text wieder schließen kann.

So eine Funktion möchte ich auch nutzen können.

Gibt es im Netz Hinweise auf so eine Funktion?

fragt
Markus

[Thielo]

Beide Links funktionieren nicht!

[MarkusStar]

sorry

fixed!

[Thielo]

Auf der Ralph Lauren Seite fährt nichts auf o.ä. Des Rätsels lösung bei der Seite ist einfacher (und sehr sehr sehr schlecht!) gebaut.

Der Text der dort steht steht 2 mal dort!

<script>
function resizeDescription(action) {
	var longDescDiv = document.getElementById('longDescDiv');
	var padDescDiv = document.getElementById('padDescDiv');

	if(action == 'showDesc') { //if it's already open, close it
		longDescDiv.style.visibility = 'hidden';
		longDescDiv.style.display = 'none';	

		padDescDiv.style.visibility = 'visible';
		padDescDiv.style.display = 'block';		
		
		omniCustomLink('Expandcopy','Expandcopy');
	} 
	else if(action == 'hideDesc') { //if it's closed, open it
		padDescDiv.style.visibility = 'hidden';
		padDescDiv.style.display = 'none';	

		longDescDiv.style.visibility = 'visible';
		longDescDiv.style.display = 'block';	

		omniCustomLink('Collapsecopy','Collapsecopy');
	}

 }
</script>
<div class=descpad >
	<div id = "longDescDiv" style="margin-bottom:10px">

				Support the Haitian relief efforts with our limited-edition polo shirt. 100% of the proceeds from the sale of this shirt will be donated to the United Way Worldwide Disaster Fund and its ongoing commitment to rebuilding Haiti. Classic, comfortable fit in breathable cotton mesh, finished with our embroidered pony at the left chest, applied flag and embroidered &quot;Haiti Relief&quot; at the right chest. Embroidered &quot;Haiti Relief&quot;, &quot;Ralph Lauren&quot; and &quot;United Way&quot; logo at the back. Available exclusively at RalphLauren.com. &nbsp;<a href="javascript:resizeDescription('showDesc')"><img src="/images/btn_moreDetails.gif" border="0" id="readMoreImage"></a>
	</div>
	<div id = "padDescDiv" style="margin-bottom:6px">

				Support the Haitian relief efforts with our limited-edition polo shirt. 100% of the proceeds from the sale of this shirt will be donated to the United Way Worldwide Disaster Fund and its ongoing commitment to rebuilding Haiti. Classic, comfortable fit in breathable cotton mesh, finished with our embroidered pony at the left chest, applied flag and embroidered &quot;Haiti Relief&quot; at the right chest. Embroidered &quot;Haiti Relief&quot;, &quot;Ralph Lauren&quot; and &quot;United Way&quot; logo at the back. Available exclusively at RalphLauren.com. <BR>
		<ul>
<li>Ribbed polo collar, two-button placket. Ribbed armbands, uneven vented hem. </li>

<li>100% cotton. Machine washable. Imported. </li>
<li>Enjoy complimentary shipping on this item. </li>
<li>This product will be made to order and ships separately. </li>
<li>Please allow one additional week for delivery. </li>
</ul>

			<div style="margin-top: 6px; width: auto; text-align: right;"><a href="javascript:resizeDescription('hideDesc')" ><img src="/images/btn_close.gif" border="0" id="moreImg"></a></div>
			<script>
				document.getElementById('padDescDiv').style.visibility = 'hidden';
				document.getElementById('padDescDiv').style.display = 'none';	
			</script>	
	</div>
</div>

Anhand des Codes müsstest du sehen das der Text nicht erweitert wird sondern eifnach nur ersetzt. Der Text wird nur jeweils auf display: none / diyplay: block gesetzt.

Um das ganze jetzt schöner (und wahrscheinlicha uch auf scripty) zu bauen wären folgende Schritte von Nöten:
Du hast 2 Textbereiche:
- Haupttext
- Der "Read-More" Text
ebenfalls hast du einen Link der das "Read-More" toggeln soll.


Klickt man nun auf den Link, so erscheint der Text per effect.appear
und der button wird so "umgebaut" das der Text sich änder der dort drinn steht.
Das einfahren würdest du dann umgekehrt per effect.fade (Effect.Fade - scriptaculous - GitHub) lösen.

[MarkusStar]

Hallo Thilo,

danke für deine ausführliche Nachricht.
Ich gebe zu, dass ich mir den Quelltext von RL nicht angeschauthabe.
Ich war der festen Überzeugung, dass im Quelltext von solch imposanten seiten alles verborgen ist und man dort keine Infos findet.

Kannst du mir sagen was genau du damit meinst, dass RL diese Lösung schlecht programmiert hat?
Was genau ist schlecht daran?

[Thielo]

Doppelter Inhalt. Der Text der Beschreibung ist 2 mal vorhanden Suchmaschinen sehen "beide Texte" der Benutzer aber einen. Weshalb das überflüssig ist

Du benötigst nur 3 Elemente 2xText (1xHaupttext, 1x"Subtext") und 1xLink

[MarkusStar]

ahhh,

du meinst der zweite "versteckte" Text kann zu Problemen bei der Bewertung von Google führen.
Evtl. denkt Google, dass ich die Suchmachinenoptimierung manipulieren will, was Google veranlassen könnte mich aus dem Suchindex zu streichen. Das wäre natürlich fatal...

[Walter IT-Services]

Hallo!

Einen solchen Effekt habe ich erfolgreich mit "Effect.SlideDown" und "Effect.SlideUp" von Scriptaculous hinbekommen.

Beispiel:
Menze + Koch GbR - Initiative für außergewöhnliches Kommunikationsdesign
Dort habe ich die beiden für das Menü benutzt.