Forum: Ruby on Rails RJS problem makeing text appear and grow seamlessly

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
surf (Guest)
on 2007-01-26 15:56
(Received via mailing list)
I have some questions on RJS/AJAX. I want some text to appear on the
screen and grow larger. The main problem I have is that if I set the
text size to 60 and then use the grow effect, it flashes on the screen
as large text for a split second, then disappears and then grows from
small to large. I don't want that split second flashing to occur. Also,
it would be nice if I didn't have to have a click on enter to start the
effect, but it would start up immediately. I'm guessing I may have to
define my own javascript temnplate ?

Here is what I have tried:


<%= javascript_include_tag :defaults %>

<div id="hdr" style="visibility:hidden;font-size:1">
LAPOSITA
</div>

<%= link_to_remote "ENTER", :url => {:action => "enter" }%>



class MainController < ApplicationController


  def enter
  render :update do |page|
   page[:hdr].set_style :'visibility' => 'visible'
    h = :hdr
    page[h].set_style :'font-size' => 60
    page[h].set_style :'color' => "blue"
   page[h].visual_effect :grow, :duration => 5
  end
end
Chris H. (Guest)
on 2007-01-26 16:40
(Received via mailing list)
it appears that the request you are doing is only to have some
javascript effects run on the client.  if that i the case, there is no
need to even make a request to the server, just use link_to_function.

i recommend you use display:none vs visiblity:hidden unless there is a
specific reason for using the visiblity style.  you're also need to
quantify your font-size, ie, px, em, etc.

<div id="hdr" style="display:none;font-size:1px;color:blue">
LAPOSITA
</div>
<%= link_to_function "ENTER", "show_and_grow('hdr')" -%>

<script type="text/javascript">
function show_and_grow(elem_id) {
  Element.show(elem_id);
  Element.setStyle(elem_id, { 'font-size':'60px' })
  new Effect.Grow(elem_id);
}
</script>
This topic is locked and can not be replied to.