homepage Welcome to WebmasterWorld Guest from 54.198.42.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Using chain in Mootools
Trying to follow one transition with another.. but the code confuses!
donovanh




msg:3547722
 1:57 pm on Jan 14, 2008 (gmt 0)

I've set up a comment form to submit a comment using ajax, and the server response updates a hidden div.

I had used scriptaculous scripts to have the message slid in while the comment form slides out, and it looked fine. However I since discovered that having 200k of javascript for such a transition was overkill. I switched to Mootools.

However, I'm really struggling to get anything like the previous effect. Ideally, what I'd like to do is have a chain that works as follows:

1) The comment form fades away
2) The containing div resizes to a height of 100px
3) The success message fades in

Any help much appreciated!

 

donovanh




msg:3547785
 3:17 pm on Jan 14, 2008 (gmt 0)

This is where I'm at with the code:

I start by declaring the effect to fade the form away, and follow it by resizing the container (addmessage). I then set the success message div to display:block, and fade it in.

However it only gets as far as fading the form away, and resizing the box. The success message doesn't appear.


var fadeform = new Fx.Style('addreview', 'opacity', {duration: 400,transition: Fx.Transitions.Quart.easeInOut} );
fadeform.start(1,0).chain(function(){
var fx = new Fx.Styles('addmessage', {duration:500, wait:false});
fx.start({'height': 50}).delay(5000);
}).chain(function(){
document.getElementById('message-success').innerHTML = result;
var div = $('review-success').setStyles({display:'block',opacity: 0});
new Fx.Style('message-success', 'opacity', {duration: 400} ).start(1);
});

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved