Question

render :update do |page|
  page.visual_effect :highlight, row_id, :duration => 20, :startcolor => "#FFCC33", :restorecolor =>""
  page << "alert('hi');"
end

In the above code, I have a highlight effect that occurs and lasts for 20 seconds, after the highlight effect completes, I want to have an alert popup. Currently, the alert immediately pops up without waiting for the highlight effect to complete.

Answer 1

This should work for you:

render :update do |page|
  page.visual_effect :highlight, row_id, :afterfinish => "alert('hi')", :duration => 20, :startcolor => "#FFCC33", :restorecolor =>""
end

In pure JavaScript code, this effect can be applied as follows:

$('element_id').highlight({
    duration:20,
    startcolor: "FFCC33",
    afterFinish:function(){
        // do whatever you want
    }
})