Can you combine replace_html with a visual_effect in Rails RJS?

Question

I'm developing a website with Ruby on Rails and I have a div with some content. After clicking a link I want that content to get replaced with some other stuff. This works fine with replace_html and rjs.

However, I'd prefer there to be a slight fade/appear (crossfade?) transition between the old and new content. Also the div will be resized a bit so it'd be cooler if this did a grow/shrink effect. I was thinking Scriptaculous must have something like this built in, but I sure can't find it if they do.

By the way there is a great example of this if you have a Basecamp account: login and click "All people" then "Add a new company" to see the effect in action.

Anyone know how to do this? Thanks! Brian

Answer 1

To crossfade, you need to position your new content absolutely, and with the same x/y coordinates as the old content. Here's a tested example:

page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none')
page << <<-JS
  var oldOffset = $('old-content').cumulativeOffset();
  $('new-content').setStyle({
    position: 'absolute',
    left:     oldOffset.left + 'px',
    top:      oldOffset.top + 'px'
  });
JS
page['old-content'].fade :duration => 3
page['new-content'].appear :duration => 3

Note the big block in the middle—some things are easier in Prototype than in RJS.

Answer 2

A strategy could be to put the element in a wrapping div, fade out that wrapping div, replace the HTML in the element, and then fade in the wrapping div again.

I'm not a RJS/scriptaculous user myself, so I'm not sure what the code is, but I'm pretty sure that strategy will work.

Answer 3

Fade out the 1st div. Blind in the 2nd div at the same time. As the 1st one fades, the 2nd will appear to expand what's left of the first one.

Well, something like that.

Load up Firebug and step through the code if you want to see what they're calling.

Answer 4

One quick way would be to do the replace and then pulsate the div.