Effekt wie beim Buschfunk von studiVZ/schuelerVZ/meinVZ

waerp

Trainee

Posts: 16

Thursday, October 22nd 2009, 3:16pm

Effekt wie beim Buschfunk von studiVZ/schuelerVZ/meinVZ

Hallo

Gibt es eigentlich so ein fertiges Script (wie z.B. von jQuery oder aehnlichem), welches die Effekte anbietet? Sprich man gibt in einem Textfeld eine Nachricht ein und er aktualisiert es dann unten in einem Div automatisch, nachdem auf den Button geklickt wurde?

Lieben Gruß und vielen Dank im Voraus.

Torben Brodt

Administrator

Posts: 8,454

Thursday, October 22nd 2009, 10:08pm

nein, eine fertige Lösung habe ich nicht gefunden.
Aber wenn du den Effekt nachbauen willst, gebe ich dir ein paar Tipps (nur kurz, habe gerade keine Zeit zum experimentieren)

Schritt1:
Div Container erstellen, der sich nach Absenden mit dem Inhalt genau über das Eingabefeld legt.
Schau dir dazu die folgende Wiki Seite an: Größe eines DIV herausfinden

Mal ein Ansatz

JavaScript Code

function foo(form) {
	var div = document.createElement('div');
	div.style.backgroundColor = '#ff0000';
	div.style.width = form.eingabefeld.offsetWidth+'px';
	div.style.width = form.eingabefeld.offsetHeight+'px';
	div.innerHTML = form.eingabefeld.value;
	document.getElementsByTagName('body')[0].appendChild(div);
	return false;
}

HTML Code

<form onsubmit="return foo(this)">
	<textarea name="eingabefeld" rows="5" cols="30"></textarea>
	<input type="submit" />
</form>

Schritt2: Den erzeugten Div Container kannst du mittels Jquery Transfer in dein Zieldiv einfaden lassen.
Google mal ein bisschen: Jquery Transfer DIV, Jquery Move div to div, etc
Beispiel: http://docs.jquery.com/UI/Effects/Transfer

Schritt3: Daten per Ajax ans Backend senden, damit er wirklich gespeichert wird. Siehe $.post ;)