Can you combine replace_html with visual_effect in Rails Rails?

Question

I am developing a site with Ruby on Rails, and I have a div with some content. After clicking the link, I want this content to be replaced with some other material. This works great with replace_html and rjs.

However, I would prefer a small transition / disappearance between the old and new content (cross-transition?). In addition, the div will be slightly modified, so it would be cooler if it affected the increase / compression effect. I thought Scriptaculous should have something like this inline, but I'm sure I can't find it if they do.

By the way, there is a great example if you have a Basecamp account: log in and click "All People", then "Add New Company" to see the effect in action.

Does anyone know how to do this? Thank you Brian

Answer 1

For the crossfade, you need to fully position your new content and with the same x / y coordinates as the old content. Here is an 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

Pay attention to the large block in the middle - some things are easier in the prototype than in RJS.

Answer 2

, div, wrapping div, HTML div.

RJS/scriptaculous, , , , .

Answer 3

1- div. 2- . , 1- , , , , .

, - .

Firebug , , .

Answer 4

, div.