zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Frage zu einem "BlindDown" Effekt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.03.2010, 09:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2009
Beiträge: 61
MarkusStar befindet sich auf einem aufstrebenden Ast
Standard Frage zu einem "BlindDown" Effekt

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

Geändert von MarkusStar (15.03.2010 um 09:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.03.2010, 09:51
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Beide Links funktionieren nicht!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.03.2010, 10:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2009
Beiträge: 61
MarkusStar befindet sich auf einem aufstrebenden Ast
Standard

sorry

fixed!
Mit Zitat antworten
  #4 (permalink)  
Alt 15.03.2010, 10:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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!
HTML-Code:
<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.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 15.03.2010, 10:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2009
Beiträge: 61
MarkusStar befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 15.03.2010, 10:30
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 15.03.2010, 10:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2009
Beiträge: 61
MarkusStar befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #8 (permalink)  
Alt 18.03.2010, 05:16
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
XHTML 1.0 , 1.1, 1.2, 2.0 frage??? Altair_AC (X)HTML 8 15.08.2009 13:49
Frage zu einem Gedanken (DIV positionieren) charlie CSS 1 06.09.2008 11:36
kleine float frage bei ie6 [treppen effekt im text] onip CSS 2 04.04.2007 14:53
Frage zu "display:block;" John CSS 1 05.04.2005 16:58
MouseOver Effekt + Link auf die extreme Tour YUMYUM-75 CSS 1 15.11.2004 21:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:34 Uhr.