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 :)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
  4. <head>  
  5.   
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />      
  7. <title>contentChanger</title>  
  8.   
  9. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  
  10.   
  11. <script src="js/prototype.js" type="text/javascript"></script>  
  12. <script src="js/scriptaculous.js" type="text/javascript"></script>  
  13.   
  14.   
  15. <script type="text/javascript" language="javascript" >  
  16.   
  17. textChanger =   
  18.   
  19. Class.create();  
  20. textChanger.prototype = {  
  21.       
  22.     initialize : function(srcContainer,srcContent,dstContent){  
  23.         this.container = srcContainer;  
  24.         this.src = srcContent;  
  25.         this.dst = dstContent;  
  26.         this.finishedEffect = false;  
  27.         this.finishedAjax = false;  
  28. //      jobb híján referencia , kéne help  
  29.         Effect.textChanger = this;  
  30.         Ajax.textChanger = this;  
  31.     },  
  32.   
  33.     startChange : function(){  
  34.         new Effect.SlideUp(this.container ,{delay:2 , queue:{scope:'myscope', position:'start' },  
  35.                 afterFinish : function (){  
  36.                     var textChanger = Effect.textChanger;  
  37.                     textChanger.finishedEffect = true;  
  38.                     textChanger.afterFinishChange();  
  39.                 }   
  40.         });  
  41.         var myAjax = new Ajax.Request(this.dst,  
  42.         {  
  43.             method: 'post',  
  44.             onComplete: function(originalRequest){  
  45.                 var textChanger = Ajax.textChanger;  
  46.                     textChanger.responseText = originalRequest.responseText  
  47.                     textChanger.finishedAjax = true;  
  48.                     textChanger.afterFinishChange();  
  49.             }  
  50.         });  
  51.     },  
  52.       
  53.     afterFinishChange : function(originalRequest){  
  54.         if (!this.finishedEffect || !this.finishedAjax) return false;  
  55.         $(this.src).innerHTML = this.responseText;  
  56.         new Effect.SlideDown(this.container,{queue:{scope:'myscope', position:'end' }});  
  57.     }  
  58.   
  59. }  
  60.   
  61. window.onload = function(){  
  62.     myTextChanger = new textChanger($('demo'),$('content'),'newcontent.php');  
  63.     myTextChanger.startChange();  
  64. }  
  65.   
  66.   
  67.   
  68. </script>  
  69.   
  70. </head>  
  71. <body>  
  72.   
  73. <div id="demo" style="position:absolute; top: 100px;height:120px; ">  
  74.     <div id="content" style='height:120px;'>  
  75.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>  
  76.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>  
  77.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>  
  78.     </div>  
  79. </div>  
  80.   
  81. </body>  
  82. </html>  
http://toxin.hu/cdemo/test2.html