...

View Full Version : Fade, Update, Appear using scriptaculous & prototype



jakobmetzger
11-30-2006, 08:33 PM
im just trying to do these three effects in order but its not working..


function fadeupdatefade() {
new Effect.Fade('footer', { queue: 'front'});
new Ajax.Upadter('footer', 'web.html',{ onComplete: new Effect.Appear('footer')},{ queue: 'end'});
}

I dont fully understand how queues in prototype work but Ive read over quite a few tutorials. I just need it to fade a <div>, then update the information in that div and then after that just make the div appear again. im so lost on how to do this..
also I just found moo.fx, would it be more practical for me to use moo.fx instead of scriptaculous or what are the advantages?
thanks for your replys

j9ine
12-01-2006, 02:14 AM
Scriptaculous is definitely the way to go. I've listed a basic example below. The setTimeout() was added to allow the fade effect to complete before updating the div.


/************test.htm************
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script>
function updateDiv() {
new Effect.Fade('test');
setTimeout("new Ajax.Updater('test','test2.htm',{onComplete:function(){ new Effect.Appear('test');},asynchronous:true, evalScripts:true});",1500);
}
</script>
</head>
<body>
<div style="background:blue; float:none;" id="test">TESTING</div><br>
<form>
<input type="button" onclick="updateDiv();" value="Update">
</form>
</body>
</html>
***************************/

/***********test2.htm*********
<table border="1" width="400">
<tr>
<td align="center">
Enter the content to appear in the div
</td>
</tr>
</table>
***************************/

jakobmetzger
12-01-2006, 03:22 AM
awesome man, thanks so much.
im kind of a n00b when it comes to javascript and you have helped me so much. If I can request just one more thing... I dont understand how to set it up so I can do this.. notice the updateDiv(page)
[CODE]/************test.htm************
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script>
function updateDiv(page) {
new Effect.Fade('test');
setTimeout("new Ajax.Updater('test',page,{onComplete:function(){ new Effect.Appear('test');},asynchronous:true, evalScripts:true});",1500);
}
</script>
</head>
<body>
<div style="background:blue; float:none;" id="test">TESTING</div><br>
<form>
<input type="button" onclick="updateDiv(test2.htm);" value="Update">
</form>
</body>
</html>
/***************************/

A1ien51
12-01-2006, 01:58 PM
"updateDiv(test2.htm);"

You are passing a variable there with a property of htm

you need to quote ' ' around the text so it is a string

"updateDiv('test2.htm');"

Eric

jakobmetzger
12-01-2006, 08:01 PM
ok but on this line....


setTimeout("new Ajax.Updater('test',page,{onComplete:function(){ new Effect.Appear('test');},asynchronous:true,

where I put the page variable, is that right?

j9ine
12-01-2006, 11:10 PM
Add the underlined code below.


function updateDiv(page) {
new Effect.Fade('test');
setTimeout("new Ajax.Updater('test','"+page+"',{onComplete:function(){ new Effect.Appear('test');},asynchronous:true, evalScripts:true});",1500);
}

onclick="updateDiv('test2.htm');"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum