thr3ads.net - Rails - Toggling effect [Feb 2010]

If this information is useful, please help other people find it:
Share via:

Charanya Nagarajan

2010-Feb-03 06:41 UTC

Toggling effect

Hi all,

I have a list of links in a page,i have toggling effect associated with
them
 <%= link_to_function("#{article.title}", nil ) do |page|
page.visual_effect :toggle_blind, "article_content_#{article.id}"
end %>
The Number of links is dynamic.
Now if i click on link1 the div associated with it(article_content_1) is
toggled and shown.
Now,like if i click on any other link,the first link which i had clicked
before should close .So whenever i click any link,only the div
associated with it should be shown,and in case if there are any other
divs associated with anyotehr link is shown,they should get hidden.

Kindly suggest me some ways.

Thanks in Advance

Charanya
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Jeffrey L. Taylor

2010-Feb-03 08:38 UTC

head link

Re: Toggling effect

Quoting Charanya Nagarajan
<lists-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>:> Hi all,
> 
> I have a list of links in a page,i have toggling effect associated with
> them
>  <%= link_to_function("#{article.title}", nil ) do |page|
> page.visual_effect :toggle_blind, "article_content_#{article.id}"
> end %>
> The Number of links is dynamic.
> Now if i click on link1 the div associated with it(article_content_1) is
> toggled and shown.
> Now,like if i click on any other link,the first link which i had clicked
> before should close .So whenever i click any link,only the div
> associated with it should be shown,and in case if there are any other
> divs associated with anyotehr link is shown,they should get hidden.
> 
> Kindly suggest me some ways.
> 
With Prototype, custom Javascript and CSS.  The follow code adds and removes
the selected_feed class name as feeds are clicked.  The CSS just move the
highlights.  Yours could change the display property.

Hope This Helps,
  Jeffrey

CSS:
.selected_feed { color: white; background-color: #88C;  }
.selected_feed a { color: white;  }

HTML & Javascript:
<html>
  <head>
    <%= stylesheet_link_tag ''three_pane.css'' %>
    <%= javascript_include_tag ''prototype'' %>
    <% javascript_tag do %>
      function ftn(id, url) {
        parent.$(''articles'').src = url;
       
$$(''.selected_feed'').invoke(''removeClassName'',
''selected_feed'');
        $(id).addClassName(''selected_feed'');
        return false;
      }
    <% end %>
  </head>
  <body>
    <ul id="feeds">
      <% feeds.each do |feed| %>
        <li class="<%=cycle(''odd_feed'',
''even_feed'')%>">
          <%- sub_id = dom_id(feed) -%>
          <a id="<%=sub_id%>" onclick="return
ftn(''<%=sub_id%>'', this.href)",
                href="articles/<%=feed[:id]%>">
            <%- count = counts[feed[:id]] -%>
            <%= (count <= 0) ? feed.title :
"<b>#{feed.title}&nbsp;(#{count})</b>" %>
          </a>
        </li>
      <% end %>
    </ul>
  </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

pepe

2010-Feb-05 03:02 UTC

head link

Re: Toggling effect

I believe you should queue your divs to hide/show them. In case it
helps this is something I have tested and am planning to use in one of
my applications. It needs a lot of work to make it better and DRYer
but it still does the work I need it to do. It is all based on the
model errors but I think it could give you an idea about the queuing
of the effects. I hope it helps.

view:
          <table style="width: 100%;" >
            <tr class="tab_rows">
              <%= link_to_function
get_tab_link(''first_link''),
get_tab_effects(''first_link'')      -%>
              <%= link_to_function
get_tab_link(''second_link''),
get_tab_effects(''second_link'') -%>
              <%= link_to_function
get_tab_link(''third_link''),
get_tab_effects(''third_link'') -%>
            .....
            </tr>
            .....
          </table>
            .....
          <div id="sections">

            <div id="first_link" <%=
display?(''first_link'') -%>>
              <div id="section">
                <%= render :partial => ''first_link''
%>
              </div>
            </div>

            <div id="second_link" <%=
display?(''second_link'') -%>>
              <div id="section">
                <%= render :partial => ''second_link''
%>
              </div>
            </div>

            <div id="third_link" <%=
display?(''third_link'') -%>>
              <div id="section">
                <%= render :partial => ''third_link''
%>
              </div>
            </div>

            ...
          </div> <!-- sections -->

helper:

  def get_tab_link(section)
    ''<td>'' + section.capitalize +
''</td>''
  end

 def get_tab_effects(section)
    case section
    when ''first_link''
      "new Effect.Fade(''second_link'',       
{duration:0.1});
       new Effect.Fade(''third_link'',             
{duration:0.1,
queue: ''end''});
       new Effect.Appear(''first_link'',      {duration:0.1,
queue:
''end''});"
    when ''second_link''
      "new Effect.Fade(''first_link'',            
{duration:0.1});
       new Effect.Fade(''third_link'',      {duration:0.1,
queue:
''end''});
       new Effect.Appear(''second_link'', {duration:0.1, queue:
''end''});"
    when ''third_link''
      "new Effect.Fade(''first_link'',            
{duration:0.1});
       new Effect.Fade(''second_link'',      {duration:0.1,
queue:
''end''});
       new Effect.Appear(''third_link'', {duration:0.1, queue:
''end''});"
    ....
    end

  def display?(section)
    case section
    when ''first_link''
      return nil if @my_model.errors.empty?  or  errors_on? section
    when ''second_link''
      return nil if errors_on? section unless errors_on?
''first_link''
    when ''third_link''
      return nil if errors_on? section unless (errors_on?
(''first_link'') || errors_on?(''second_link''))
    ...
    end

    # Default to not display section
    ''style = "display:none"''
  end


On Feb 3, 1:41 am, Charanya Nagarajan
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:> Hi all,
>
> I have a list of links in a page,i have toggling effect associated with
> them
>  <%= link_to_function("#{article.title}", nil ) do |page|
> page.visual_effect :toggle_blind, "article_content_#{article.id}"
> end %>
> The Number of links is dynamic.
> Now if i click on link1 the div associated with it(article_content_1) is
> toggled and shown.
> Now,like if i click on any other link,the first link which i had clicked
> before should close .So whenever i click any link,only the div
> associated with it should be shown,and in case if there are any other
> divs associated with anyotehr link is shown,they should get hidden.
>
> Kindly suggest me some ways.
>
> Thanks in Advance
>
> Charanya
> --
> Posted viahttp://www.ruby-forum.com/.
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Rails - Feb 2010 - Toggling effect

Toggling effect

Re: Toggling effect

Re: Toggling effect