Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fade, Update, Appear using scriptaculous & prototype

    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
    Last edited by jakobmetzger; 11-30-2006 at 08:35 PM.

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    /************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>
    ***************************/
    Last edited by j9ine; 12-01-2006 at 02:23 AM.

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    /***************************/

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    "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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok but on this line....

    Code:
    setTimeout("new Ajax.Updater('test',page,{onComplete:function(){ new Effect.Appear('test');},asynchronous:true,
    where I put the page variable, is that right?

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add the underlined code below.
    Code:
    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');"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •