I am working on a site that requires 12+ individual widgets that have
2 links each which appear on the rollover of the individual widget.
This is the partial being rendered for each widget right now:
<div class="widget" id="channel_<%= channel.id
%>">
<div class="thebox" style="background:
url(<%static_url_for(channel.big_image) %>) no-repeat;"
onmouseover="Effect.toggle(''show_<%= channel.id
%>'',''appear'',
{ duration: .1 }); return false">
<div id="show_<%= channel.id %>" class="show"
style="display:none;"
onmouseout="Effect.toggle(''show_<%= channel.id
%>'',''appear'',
{ duration: .1 }); return false">
<%= link_to_remote(''Preview'', :update =>
dom_id(channel),
:url => { :action => "widget", :id => channel }, :html
=> {:class
=> ''preview''}) %>
<%= link_to "Get #{channel.name}<br />on my phone", {:action
=>
''subscribe'', :id => channel.id}, :class =>
''subscribe'' %>
</div>
</div>
</div>
Output looks something like...
<div class="widget" id="channel_93">
<div class="thebox" style="background: url(/st/channels/93/
big_image.jpg) no-repeat;"
onmouseover="Effect.toggle(''show_93'',''appear'',
{ duration: .1 });
return false">
<div id="show_93" class="show"
style="display:none;"
onmouseout="Effect.toggle(''show_93'',''appear'',
{ duration: .1 });
return false">
<a class="preview" href="#" onclick="new
Ajax.Updater(''channel_93'', ''/
feb/widget/93'', {asynchronous:true, evalScripts:true}); return
false;">Preview</a>
<a href="/subscribe/93" class="subscribe">Get Hot
Girls<br />on my
phone</a>
</div>
</div>
</div>
This ends up behaving rather kinky, if you rollover a widget too fast
the links pop up and stay there instead of disappearing like they are
supposed to. Is there a more clever way of accomplishing this? or a
way to fix this?
Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Of course. Take a look at the queues http://github.com/madrobby/scriptaculous/wikis/effect-queues - kangax On May 14, 2:45 pm, Anne <anniegur...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I am working on a site that requires 12+ individual widgets that have > 2 links each which appear on the rollover of the individual widget. > > This is the partial being rendered for each widget right now: > <div class="widget" id="channel_<%= channel.id %>"> > <div class="thebox" style="background: url(<%> static_url_for(channel.big_image) %>) no-repeat;" > onmouseover="Effect.toggle(''show_<%= channel.id %>'',''appear'', > { duration: .1 }); return false"> > <div id="show_<%= channel.id %>" class="show" style="display:none;" > onmouseout="Effect.toggle(''show_<%= channel.id %>'',''appear'', > { duration: .1 }); return false"> > <%= link_to_remote(''Preview'', :update => dom_id(channel), > :url => { :action => "widget", :id => channel }, :html => {:class > => ''preview''}) %> > <%= link_to "Get #{channel.name}<br />on my phone", {:action => > ''subscribe'', :id => channel.id}, :class => ''subscribe'' %> > </div> > </div> > </div> > > Output looks something like... > > <div class="widget" id="channel_93"> > <div class="thebox" style="background: url(/st/channels/93/ > big_image.jpg) no-repeat;" > onmouseover="Effect.toggle(''show_93'',''appear'', { duration: .1 }); > return false"> > <div id="show_93" class="show" style="display:none;" > onmouseout="Effect.toggle(''show_93'',''appear'', { duration: .1 }); > return false"> > <a class="preview" href="#" onclick="new Ajax.Updater(''channel_93'', ''/ > feb/widget/93'', {asynchronous:true, evalScripts:true}); return > false;">Preview</a> > <a href="/subscribe/93" class="subscribe">Get Hot Girls<br />on my > phone</a> > </div> > </div> > </div> > > This ends up behaving rather kinky, if you rollover a widget too fast > the links pop up and stay there instead of disappearing like they are > supposed to. Is there a more clever way of accomplishing this? or a > way to fix this? > > Thanks--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks, I am a little confused as to how to implement this correctly -
would changing
onmouseout="Effect.toggle(''show_93'',''appear'',
{ duration: .1 });
return false"
to
onmouseout="Effect.toggle(''show_92'',''appear'',
{ duration: .1 },
{ queue: { position: ''end'', scope:
''scope_92'', limit: 2 } }); return
false"
be the right way of using it?
On May 14, 1:02 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Of course.
> Take a look at the
queueshttp://github.com/madrobby/scriptaculous/wikis/effect-queues
>
> - kangax
>
> On May 14, 2:45 pm, Anne
<anniegur...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > I am working on a site that requires 12+ individual widgets that have
> > 2 links each which appear on the rollover of the individual widget.
>
> > This is the partial being rendered for each widget right now:
> > <div class="widget" id="channel_<%= channel.id
%>">
> > <div class="thebox" style="background: url(<%>
> static_url_for(channel.big_image) %>) no-repeat;"
> > onmouseover="Effect.toggle(''show_<%= channel.id
%>'',''appear'',
> > { duration: .1 }); return false">
> > <div id="show_<%= channel.id %>"
class="show" style="display:none;"
> > onmouseout="Effect.toggle(''show_<%= channel.id
%>'',''appear'',
> > { duration: .1 }); return false">
> > <%= link_to_remote(''Preview'', :update =>
dom_id(channel),
> > :url => { :action =>
"widget", :id => channel }, :html => {:class
> > => ''preview''}) %>
> > <%= link_to "Get #{channel.name}<br />on my phone",
{:action =>
> > ''subscribe'', :id => channel.id}, :class =>
''subscribe'' %>
> > </div>
> > </div>
> > </div>
>
> > Output looks something like...
>
> > <div class="widget" id="channel_93">
> > <div class="thebox" style="background:
url(/st/channels/93/
> > big_image.jpg) no-repeat;"
> >
onmouseover="Effect.toggle(''show_93'',''appear'',
{ duration: .1 });
> > return false">
> > <div id="show_93" class="show"
style="display:none;"
> >
onmouseout="Effect.toggle(''show_93'',''appear'',
{ duration: .1 });
> > return false">
> > <a class="preview" href="#" onclick="new
Ajax.Updater(''channel_93'', ''/
> > feb/widget/93'', {asynchronous:true, evalScripts:true});
return
> > false;">Preview</a>
> > <a href="/subscribe/93"
class="subscribe">Get Hot Girls<br />on my
> > phone</a>
> > </div>
> > </div>
> > </div>
>
> > This ends up behaving rather kinky, if you rollover a widget too fast
> > the links pop up and stay there instead of disappearing like they are
> > supposed to. Is there a more clever way of accomplishing this? or a
> > way to fix this?
>
> > Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
The idea is to prevent effect overlapping. I believe that "limit: 1" should solve this. - kangax On May 14, 4:40 pm, Anne <anniegur...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thanks, I am a little confused as to how to implement this correctly - > would changing > > onmouseout="Effect.toggle(''show_93'',''appear'', { duration: .1 }); > return false" > > to > > onmouseout="Effect.toggle(''show_92'',''appear'', { duration: .1 }, > { queue: { position: ''end'', scope: ''scope_92'', limit: 2 } }); return > false" > > be the right way of using it? > > On May 14, 1:02 pm, kangax <kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Of course. > > Take a look at the queueshttp://github.com/madrobby/scriptaculous/wikis/effect-queues > > > - kangax > > > On May 14, 2:45 pm, Anne <anniegur...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > I am working on a site that requires 12+ individual widgets that have > > > 2 links each which appear on the rollover of the individual widget. > > > > This is the partial being rendered for each widget right now: > > > <div class="widget" id="channel_<%= channel.id %>"> > > > <div class="thebox" style="background: url(<%> > > static_url_for(channel.big_image) %>) no-repeat;" > > > onmouseover="Effect.toggle(''show_<%= channel.id %>'',''appear'', > > > { duration: .1 }); return false"> > > > <div id="show_<%= channel.id %>" class="show" style="display:none;" > > > onmouseout="Effect.toggle(''show_<%= channel.id %>'',''appear'', > > > { duration: .1 }); return false"> > > > <%= link_to_remote(''Preview'', :update => dom_id(channel), > > > :url => { :action => "widget", :id => channel }, :html => {:class > > > => ''preview''}) %> > > > <%= link_to "Get #{channel.name}<br />on my phone", {:action => > > > ''subscribe'', :id => channel.id}, :class => ''subscribe'' %> > > > </div> > > > </div> > > > </div> > > > > Output looks something like... > > > > <div class="widget" id="channel_93"> > > > <div class="thebox" style="background: url(/st/channels/93/ > > > big_image.jpg) no-repeat;" > > > onmouseover="Effect.toggle(''show_93'',''appear'', { duration: .1 }); > > > return false"> > > > <div id="show_93" class="show" style="display:none;" > > > onmouseout="Effect.toggle(''show_93'',''appear'', { duration: .1 }); > > > return false"> > > > <a class="preview" href="#" onclick="new Ajax.Updater(''channel_93'', ''/ > > > feb/widget/93'', {asynchronous:true, evalScripts:true}); return > > > false;">Preview</a> > > > <a href="/subscribe/93" class="subscribe">Get Hot Girls<br />on my > > > phone</a> > > > </div> > > > </div> > > > </div> > > > > This ends up behaving rather kinky, if you rollover a widget too fast > > > the links pop up and stay there instead of disappearing like they are > > > supposed to. Is there a more clever way of accomplishing this? or a > > > way to fix this? > > > > Thanks--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---