mootools anpassen

[hermes]

Hallo,

ich bin ganz neu in der Welt von JS und möchte auch nur ein ganz kleines script anpassen. Vielleicht köönt ihr mir helfen:

habe von mootools ein Demo runtergeladen und leicht angepasset, sodass ein div einfaded, sobald ein formulartextfeld aktiv ist, und anschließend wieder ausfaded:

JS:

  
	var anotherEl = $('anotherElement');  
	  
	// Again we are able to create a morph instance  
	var morph = new Fx.Morph('anotherElement');  
  
	$('CSSmorphEffect').addEvent('focus', function(e) {  
		e.stop();  
		// Changes the element's style to .myClass defined in the CSS  
		anotherEl.morph('.fadein');  
	});  
	  
	$('CSSmorphEffect').addEvent('blur', function(e) {  
		e.stop();  
		// Changes the element's style to .myClass defined in the CSS  
		anotherEl.morph('.fadeout');  
	});  

CSS:

  
.fadein {  
	width: 500px;  
	height: 25px;  
	border: 1px solid black;  
	font-size: 12px;  
	padding: 3px;  
}  
  
.fadeout {  
	width: 0px;  
	height: 0px;  
	border: 0px;  
	font-size: 0%;  
	padding: 0px;  
}  

HTML:

  
<form method="POST" action="xxx" name="theform">  
<input type="text" name="f1" size="20" id="CSSmorphEffect">  
		<div id="anotherElement" class="fadeout">  
			Demo Text 1  
		</div>  
  <p><input type="submit" value="Abschicken" name="B1"><input type="reset" value="Zurücksetzen" name="B2"></p>  
</form>  

Klappt soweit auch.
Nun möchte ich aber unterschiedliche Formular mit mehreren Text-Feldern etc., wo jeweils, wenn ein Form.element aktiv ist (focus), ein zugehöriges div eingefaded wird.

Habe versucht, nicht über die id zu gehen, weil man die ja nur einmal vergeben darf/soll. Klappt aber nicht so recht. Und dann muss ich ja auch das form.element und das zugehörige div irgendwie verknüpfen.

Könnt ihr mir nen Tipp geben? Wie gesagt, vorher mit JS noch nicht viel gemacht, aber ich hab scripte normal immer schnell verstanden, wenn ich ein passendes Beispiel gefunden habe..

Freue mich über jeden Denkanstoss

[hermes]

Hab so lange rumgespielt, bis es funktioniert hat.
Falls jemand das hier liest und wissen will wie:

JS:

	function fadein2(infobox) {  
			$(infobox).morph('.fadein');  
	};  
	  
	function fadeout2(infobox) {  
			$(infobox).morph('.fadeout');  
	};

HTML:

<input type="text" name="f2" size="20" onfocus="fadein2('anotherElement2')" onblur="fadeout2('anotherElement2')">  
		<div id="anotherElement2" class="fadeout">  
			Demo Text 2  
		</div>  
<input type="text" name="f3" size="20" onfocus="fadein2('anotherElement3')" onblur="fadeout2('anotherElement3')">  
		<div id="anotherElement3" class="fadeout">  
			Demo Text 3  
		</div>

[manuel84]

Hi

Bei FF funktioniert das wunderbar. Aber im IE wird unten in der Status Zeile "Fehler auf der Seite" angezeigt" (Ungültiger Eigenschaftswert mootools.js) und es passiert nichts beim focus/blur.

Weiß jemand woran das liegt bzw. wie man das Problem behebt??

[hermes]

Du musst beim CSS bei Border die komplette angabe machen:

border: 0px solid black;

Allerdings kann der IE die font-size nicht auf 0% stellen, es wird also noch sehr sehr kleiner Text angezeigt.
Hab mal versucht, das mit visibility: hidden; und visible; zu managen, da erscheint aber im FF wie auch im IE keine Box mehr. Also sie morpht sich zwar rein, aber es wird weder die border noch der Inhalt angezeigt..

[bert]

versuchs mal mit overflow:hidden. Bei mir gehts ;-)