ugrás a tartalomhoz

Ajax effektek lefutásai várják meg egymást!

mATTIAS · 2006. Jún. 19. (H), 15.06
Lenne nekem egy olyan elképzelésem, hogy a régi tartalommal elslide olna az oldal, s közben betöltené az új tartalmat, s úgy tűnne fel ismét, itt az elő verzió:

##########################################
Effect.SlideUp('tartalom',{queue:{scope:'myscope', position:'end', limit: 1}});


var myAjax = new Ajax.Updater('tartalom', url,
{
method: 'post',
parameters: pars
});



Effect.SlideDown('tartalom',{queue:{scope:'myscope', position:'end', limit: 1}});
##########################################

Ám az effektek nem várják be egymást, s egy nagy katyvasz lesz az egészből, lehet e késleltetni a kódot, vagy van-e más megoldás?
‹ Hírek túlnyúlnak a bentlor.fw.hu oldalon A menüt csak egyszer kelljen megírnom - sablonokkal ›
 ■
1

attól függ

TeeCee · 2006. Jún. 19. (H), 16.00
hogy mit is használsz.
Én pl. a JQuery-vel játszadozom egy rövidke ideje, ott pl. az ajax-os (AHAH) függvények közül a load meghívható load(URI, params, callback) formában is, ahol a callback az ajaxos betöltés után kerül meghívásra (ha jól értelmezem, mert én még nem próbáltam). http://jquery.com/docs/ajax/

Egyébként nem tudom, milyen effektjeid vannak, de a jquery is tartalmaz effekteket: http://jquery.com/docs/fx/
2

aszinkron

Jano · 2006. Jún. 19. (H), 16.36
Az AJAX-ban az első A az aszinkron rövidítése. Ez azt jelenti, hogy ha aszinkron kéred meg a tartalom elkérésére a böngészőt akkor végrehajtja az elküldés KÉRÉSÉNEK a kódját, majd tovább megy és egy későbbi időpontban amikor a válasz megérkezett akkor tudsz az eredménnyel valamit csinálni.

Ha ezt megértetted, akkor könnyen rájöhetsz, hogy az EREDMÉNY megérkezésekor lefutó függvénybe kell tenned a másik animációt.

(A lekérés alatt pedig illik a felhasználót tájékoztatni, arról, hogy töltődik a tartalom, ne izguljon.)
3

no

toxin · 2006. Jún. 19. (H), 17.44
tartok tőle hogy valaki megoldja egy sorral (aki tényleg elolvasta a doksit nem csak átfutotta mint egyesek, nem akarok ujjal magamra mutogatni :) )

aki az class init-be kitudja venni az a 2sort ahol segítséget kértem, lécci jelentkezzen, kössz :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />	
<title>contentChanger</title>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>


<script type="text/javascript" language="javascript" >

textChanger = 

Class.create();
textChanger.prototype = {
	
	initialize : function(srcContainer,srcContent,dstContent){
		this.container = srcContainer;
		this.src = srcContent;
		this.dst = dstContent;
		this.finishedEffect = false;
		this.finishedAjax = false;
//		jobb híján referencia , kéne help
		Effect.textChanger = this;
		Ajax.textChanger = this;
	},

	startChange : function(){
		new Effect.SlideUp(this.container ,{delay:2 , queue:{scope:'myscope', position:'start' },
				afterFinish : function (){
					var textChanger = Effect.textChanger;
					textChanger.finishedEffect = true;
					textChanger.afterFinishChange();
				} 
		});
		var myAjax = new Ajax.Request(this.dst,
		{
			method: 'post',
			onComplete: function(originalRequest){
				var textChanger = Ajax.textChanger;
					textChanger.responseText = originalRequest.responseText
					textChanger.finishedAjax = true;
					textChanger.afterFinishChange();
			}
		});
	},
	
	afterFinishChange : function(originalRequest){
		if (!this.finishedEffect || !this.finishedAjax) return false;
		$(this.src).innerHTML = this.responseText;
		new Effect.SlideDown(this.container,{queue:{scope:'myscope', position:'end' }});
	}

}

window.onload = function(){
	myTextChanger = new textChanger($('demo'),$('content'),'newcontent.php');
	myTextChanger.startChange();
}



</script>

</head>
<body>

<div id="demo" style="position:absolute; top: 100px;height:120px; ">
	<div id="content" style='height:120px;'>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
	</div>
</div>

</body>
</html>
http://toxin.hu/cdemo/test2.html