Crossfading

[philipp]

Hi, ich bin gerade dabei ein Crossfading Javascript zu schreiben. Es soll

1) Element ausgeblendet
2) Neuer Inhalt per AJAX geladen
3) Element eingeblendet

werden.

Das Problem:
Alle Funktionen liefern undefined und ich kann nicht die Aufgaben nacheinander abarbeiten.

function allinone(htmlel, file) {
	if (blenden('out','text')) {
		if (loadText(file)) {
			blenden('in','text');
		}
	}
}

function blenden(direction,htmlel) {
	var myel = document.getElementById(htmlel);
	if (direction == 'out') {
		if (myel.style.MozOpacity != 0) {
			myel.style.MozOpacity -= 0.03;
			if (myel.style.MozOpacity <= 0) {
				myel.style.MozOpacity = 0;
				return true;
			} else {
				timeoutf = "blenden('"+direction+"','"+htmlel+"')";
				setTimeout(timeoutf, 33);
			}
		}
	} else {
		if (parseFloat(myel.style.MozOpacity) != 1) {
			var actopacity = parseFloat(myel.style.MozOpacity);
			var increment = parseFloat(0.03);
			myel.style.MozOpacity = actopacity + increment;
			if (parseFloat(myel.style.MozOpacity) >= 1.00) {
				myel.style.MozOpacity = 1;
				return true;
			} else {
				timeoutf = "blenden('"+direction+"','"+htmlel+"')";
				setTimeout(timeoutf, 33);
			}
		}
	}
}

Also ausblenden geht, aber dann nichts mehr...

 

[philipp]

Okay alles geschafft. Falls jemand Interesse hat:

Ablauf:

1 - Objekt ausblenden / Neuen Inhalt in versteckten Ram-Container laden
2 - Warten Funktion, die so lange das Script anhält, bis das Outfading fertig ist
3 - Inhalt von Ram in Objekt einfügen
4 - Einblenden

______________

Blenden Funktion (Wird noch flexibler gemacht):

/*************************
 *
 * Blending Funktion
 * Version 1
 * Philipp Wrann
 *
 *************************/

function blenderanimation(blendfrom,blendto,el,stepspeed,stepwidth) {
	//Anpassen der Variablen
	myblendfrom = parseInt(blendfrom);
	myblendto = parseInt(blendto);
	myel = document.getElementById(el);
	mystepspeed = parseInt(stepspeed);
	mystepwidth = parseInt(stepwidth);
	
	if (myblendfrom > myblendto) {
		//Ausblenden
		var newblendfrom = myblendfrom-mystepwidth;
		if (newblendfrom < myblendto) newblendfrom = myblendto;
		blendersetopacity(el,newblendfrom);
		var contini = true;
	} else if (myblendfrom < myblendto) {
		//Einblenden
		var newblendfrom = myblendfrom+mystepwidth;
		if (newblendfrom > myblendto) newblendfrom = myblendto;
		blendersetopacity(el,newblendfrom);
		var contini = true;
	}
	
	if (contini==true) {
		var setTimeoutf = "blenderanimation('"+newblendfrom+"','"+blendto+"','"+el+"','"+stepspeed+"','"+stepwidth+"')";
		setTimeout(setTimeoutf,stepspeed);
	}
}

function blendersetopacity(el,o) {
	//Browserunabhaengig Opacity auf einen Wert setzen
	myel = document.getElementById(el);
if (typeof myel.style.filter != 'undefined') {
		myel.style.filter = 'alpha(opacity=' + parseInt(o) + ')';
	} else if(typeof myel.style.opacity != 'undefined') {
		myel.style.opacity = o/100;
    } else if (typeof myel.style.MozOpacity != 'undefined') {
    	myel.style.MozOpacity = o/100;
    }
}

____________________________

Warten Funktion / Inhalt tauschen Funktion / Ajax Aufruf
(Ajax Script stammt aus dem Buch "Praxiswissen Ajax")

function loadText(file) {
	with (new Ajax()) {
		url="data/"+file;
		onSuccess = successHandler;
		onError = errorHandler;
		doRequest();
	}
}

//Erhaltenen Text in Seite einfuegen
function successHandler(txt,xml) {
	document.getElementById("virtualram").innerHTML = txt;
	//document.title = txt;
}


//Fehler bei Datenuebertragung
function errorHandler(msg) {
	document.getElementById("content").innerHTML = msg;
}


function warten (time,htmlel,file,mstatus) {
	timeoutf = "allinone('"+htmlel+"','"+file+"','"+mstatus+"')";
	setTimeout(timeoutf,time);
}


function allinone(htmlel, file, mstatus) {
	var mystatus = parseInt(mstatus);
	if (mystatus == 0) {
		//Ausblenden
		blenderanimation('100','0',htmlel,'12','5');
		//Vorladen
		loadText(file);
		//Timeout
		warten('1000',htmlel,file,'1');
	} else {
		//Text einfuegen
		document.getElementById(htmlel).innerHTML = document.getElementById('virtualram').innerHTML;
		//Einblenden
		blenderanimation('0','100',htmlel,'12','5');
	}
}

_____________________

Ajax Engine

function Ajax() {
	//Eigenschaften deklarieren und initialisieren
	this.url = "";
	this.params = "";
	this.method = "GET";
	this.onSuccess = null;
	this.onError = function(msg) {
		alert(msg);
	}
}

Ajax.prototype.doRequest = function() {
	if(!this.url) {
		this.onError("Es wurde kein URL angegeben. Der Request wird abgebrochen.");
		return false;
	}
	
	if (!this.method) {
		this.method = "GET";
	} else {
		this.method = this.method.toUpperCase();
	}
	
	//XMLHttpRequest-Objekt erstellen
	var xmlHttpRequest = getXMLHttpRequest();
	if(!xmlHttpRequest) {
		this.onError("Es konnte kein XMLHttpRequest-Objekt erstellt werden.");
		return false;
	}
	
	//Zugriff auf Klasse fuer readyStateHandler ermoeglichen
	var _this = this;
	//Fallunterscheidung nach Uebertragungsmethode
	switch (this.method) {
		case "GET":
			xmlHttpRequest.open(this.method, this.url+"?"+this.params, true);
			xmlHttpRequest.onreadystatechange = readyStateHandler;
			xmlHttpRequest.send(null);
		break;
		case "POST":
			xmlHttpRequest.open(this.method, this.url, true);
			xmlHttpRequest.onreadystatechange = readyStateHandler;
			xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttpRequest.send(this.params);
		break;
	}
	//Private Methode zur Verarbeitung der erhaltenen Daten
	function readyStateHandler() {
		if(xmlHttpRequest.readyState < 4) {
			return false;
		}
		if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 304) {
			if(_this.onSuccess) {
				_this.onSuccess(xmlHttpRequest.responseText, xmlHttpRequest.responseXML);
			}
		} else {
			if(_this.onError) {
				_this.onError("["+xmlHttpRequest.status+" "+xmlHttpRequest.statusText+"] Es trat ein Fehler bei der Datenuebertragung auf.");
			}
		}
	}
}

//Gibt browserunabhaengig ein XMLHttpRequest-Objekt zurueck
function getXMLHttpRequest() {
	if(window.XMLHttpRequest) {
		//XMLHttpRequest fuer nicht-Internet-Explorer und Internet-Explorer7
		return new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		try {
			//XMLHTTP neu
			return new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				//XMLHTTP alt
				return new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				return null;
			}
		}
	}
	return null;
}

Funktioniert in allen wichtigen Browsern