✔ Fade in / out von Layern

[julieann]

OK, das klingt logisch.
Aber jetzt beim Ausprobieren klappt´s noch nicht.

ich habe jetzt etwas eingefügt, allerdings passiert nichts, wenn ich nun klicke.
ich habe die Zeile (fett) auch vor die "if(ie)..." Abfrage gestellt gehabt, da wird der Layer beim Klick zwar angezeigt, aber nicht eingeblendet!

//fades layer in
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;

function fadeIn(id) {
	if(opac != 100){
		opac+=1;
		var mydiv = document.getElementById(id);
		if(ie5) mydiv.filters.alpha.opacity = opac;
		if(ns6) mydiv.style.MozOpacity = opac/100;
		mydiv.style.visibility='visible'
		setTimeout('fadeIn("'+id+'")', 3);
		
	}
}

 

[julieann]

Ich habe die Seite einfach mal hochgeladen.

Da passiert inhaltlich noch nicht viel, geht ja erstmal um die Navigation.

Bitte die Deutsche Version wählen.

Es soll einfach nur ein Layer bei Klick auf "PrePress - Service" (erster Link) eingeblendet werden. Der ist oben links und beinhaltet nur eine Zeile "blablabla", zum Testen eben.

Kann sich jemand den Code nochmal anschauen? BITTE!

Link:
http://home.arcor.de/rheuma-kaidevu/Dunkles Design/index.htm

 

[Sven Mintel]

Schau dir mal hier herein: http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm#allgemeines

 

[julieann]

Also, erstmal Danke, da steht wirklich viel zu dem Thema.
Allerdings bin ich echter Anfänger, ich scheitere einfach daran, das Skript auf mein Problem zu übertragen.
Ich verstehe, wie es funktioniert, aber bei der Umstellung hab ich echte Probleme.

Ich hab´s versucht, hier mal der Code:
(head)

<script language="JavaScript">
//fades layer in
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);



function fadeIn(id) {
var mydiv = document.getElementById(id);


		if(ie5) {
					document.all.mydiv.filters.blendTrans.Apply();
					document.all.mydiv.style.visibility="visible";
					document.all.mydiv.filters.blendTrans.Play();
					}
	if(ns6) {
					!document.all.mydiv.filters.blendTrans.Apply();
					!document.all.mydiv.style.visibility="visible";
					!document.all.mydiv.filters.blendTrans.Play();
					}
		

		
	}

</script>

(body)

<div id="KommText" style="width:10em; height:3em; font-size:2em; font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)">
Hier kommt der Text
</div>
<div id="klick">
<a href=# onclick=javascript:fadeIn('KommText')>anzeigen</a>

</div>

Um erstmal das mit dem einblenden des Layers (aus einem anderen Layer heraus per onklick) hinzukriegen, hab ich das mit diesen Bsp.layern gemacht.
Aber das geht alles nicht und ich weiß, dass der code wahrscheinlich schmu ist.

 

[Sven Mintel]

Es gibt in so gut wie allen Browsern eine Javascript-Konsole.
In dieser kannst du etwaige JS-Fehler nachlesen.

Im IE bspw. kannst du auf das gelbe Ausrufezeichen in der Statuszeile klicken.
Abgesehen von einem Syntaxfehler hättest du erfahren, dass document.all.mydiv kein Objekt ist:

Probiers so:

function fadeIn(id) 
{
var mydiv = document.getElementById(id);
  if(document.all && !window.opera) 
    {
      mydiv.filters.blendTrans.Apply();
      mydiv.style.visibility="visible";
      mydiv.filters.blendTrans.Play();
    }
}

 

[julieann]

Juachu! Endlich klappt das Einfaden! Ich lasse den Thread aber noch offen, falls ich noch Schwierigkeiten habe beim Ausfaden o.ä.

Hab da nämlich jetzt noch ein Problem mit den z-indizes, habe einen neuen Thread deshalb aufgemacht:

http://www.tutorials.de/tutorials221025.html