Hi.
I''m using BlindUp/BlindDown to collapse/expand a bunch of list items
that contain further content markup (example HTML below).
My problem is that if you double-click a list header, thus effectively
blinding it down and up in quick succession, content gets overlaid. On
the way back up, instead of the list items below sliding up and
gradually obscuring the content to be hidden, the list items slide up
but the content stays visible underneath them until the slide has
finished - only then does the content disappear.
I''m using this script quite extensively elsewhere on the site and it
seems only to occur when used with embedded ULs. But I can''t figure
out why.
I''m also aware (see comments) that I''m probably implementing
an
almighty kludge to get round the problem of things-needing-a-height-
but-you-don''t-know-it. If this is causing my problem, or if
there''s a
more elegant way to fix it, I''d gratefully receive any pointers.
Cheers :)
Example HTML:
<ul class="expando" style="padding-bottom:5px;">
<li id="things_header" class="expando">
<a href="#" title="Things"
onclick="toggleExpando(''things'',''slow'');
return false;">Things</a>
<div id="digital_content" style="display:none;">
<ul>
<li>Fish</li>
<li>Chairs</li>
<li>The letter ''O''</li>
<li>My mate Dave</li>
</ul>
</div>
</li>
</ul>
Script:
function toggleExpando(elmnt,d){
var oHeader = $(elmnt + ''_header'');
var oContent = $(elmnt + ''_content'');
if (oHeader.hasClassName(''expanded'')){
oHeader.removeClassName(''expanded'');
oContent.setStyle({height:oContent.scrollHeight+''px''});
new Effect.BlindUp(oContent, {duration:d,
transition:Effect.Transitions.EaseFromTo, queue:
{position:''end'',
scope: ''expandos''} });
}else{
// BlindDown needs height specified. But we can''t specify it (see
comment below). This is fugly, but it works.
oContent.style.display = ''block'';
oContent.setStyle({height:oContent.scrollHeight+''px''});
oContent.style.display = ''none'';
oHeader.addClassName(''expanded'');
new Effect.BlindDown(oContent, {duration:d,
transition:Effect.Transitions.EaseFromTo, queue:
{position:''end'',
scope: ''expandos''} });
oContent.setStyle({height:''''}); // nested expando elements
need
flexible height, otherwise the parent will crop any expanding children
pageTracker._trackPageview(''expando/'' + elmnt);
console.log(''expando/'' + elmnt);
}
}
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Use a scoped effect queue with a limit of 1. http://github.com/madrobby/scriptaculous/wikis/effect-queues TAG On May 27, 2008, at 10:16 AM, ben wrote:> > Hi. > > I''m using BlindUp/BlindDown to collapse/expand a bunch of list items > that contain further content markup (example HTML below). > > My problem is that if you double-click a list header, thus effectively > blinding it down and up in quick succession, content gets overlaid. On > the way back up, instead of the list items below sliding up and > gradually obscuring the content to be hidden, the list items slide up > but the content stays visible underneath them until the slide has > finished - only then does the content disappear. > > I''m using this script quite extensively elsewhere on the site and it > seems only to occur when used with embedded ULs. But I can''t figure > out why. > > I''m also aware (see comments) that I''m probably implementing an > almighty kludge to get round the problem of things-needing-a-height- > but-you-don''t-know-it. If this is causing my problem, or if there''s a > more elegant way to fix it, I''d gratefully receive any pointers. > > Cheers :) > > Example HTML: > <ul class="expando" style="padding-bottom:5px;"> > <li id="things_header" class="expando"> > <a href="#" title="Things" onclick="toggleExpando(''things'',''slow''); > return false;">Things</a> > <div id="digital_content" style="display:none;"> > <ul> > <li>Fish</li> > <li>Chairs</li> > <li>The letter ''O''</li> > <li>My mate Dave</li> > </ul> > </div> > </li> > </ul> > > Script: > function toggleExpando(elmnt,d){ > > var oHeader = $(elmnt + ''_header''); > var oContent = $(elmnt + ''_content''); > > if (oHeader.hasClassName(''expanded'')){ > oHeader.removeClassName(''expanded''); > oContent.setStyle({height:oContent.scrollHeight+''px''}); > new Effect.BlindUp(oContent, {duration:d, > transition:Effect.Transitions.EaseFromTo, queue: {position:''end'', > scope: ''expandos''} }); > }else{ > // BlindDown needs height specified. But we can''t specify it (see > comment below). This is fugly, but it works. > oContent.style.display = ''block''; > oContent.setStyle({height:oContent.scrollHeight+''px''}); > oContent.style.display = ''none''; > oHeader.addClassName(''expanded''); > new Effect.BlindDown(oContent, {duration:d, > transition:Effect.Transitions.EaseFromTo, queue: {position:''end'', > scope: ''expandos''} }); > oContent.setStyle({height:''''}); // nested expando elements need > flexible height, otherwise the parent will crop any expanding children > pageTracker._trackPageview(''expando/'' + elmnt); > console.log(''expando/'' + elmnt); > } > } > > >--~--~---------~--~----~------------~-------~--~----~ 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 - that''s something of a workaround, though; it doesn''t address the issue of why the content is overlaid, but simply stops the effect from occuring at all if there''s already one in the queue. Given that this results in a link that sometimes does respond to a click and sometimes doesn''t, it''s not ideal. Sorry - I''m not ungrateful, it at least stops the overlay and I hadn''t thought of it :) But I''m still at a loss as to why the overlay would be occuring at all. Well, not entirely - it''s because BlindUp doesn''t hide the content until the animation has finished. But I''m not sure what I can do about it :/ On May 27, 5:22 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> Use a scoped effect queue with a limit of 1. > > http://github.com/madrobby/scriptaculous/wikis/effect-queues > > TAG > > On May 27, 2008, at 10:16 AM, ben wrote: > > > > > Hi. > > > I''m using BlindUp/BlindDown to collapse/expand a bunch of list items > > that contain further content markup (example HTML below). > > > My problem is that if you double-click a list header, thus effectively > > blinding it down and up in quick succession, content gets overlaid. On > > the way back up, instead of the list items below sliding up and > > gradually obscuring the content to be hidden, the list items slide up > > but the content stays visible underneath them until the slide has > > finished - only then does the content disappear. > > > I''m using this script quite extensively elsewhere on the site and it > > seems only to occur when used with embedded ULs. But I can''t figure > > out why. > > > I''m also aware (see comments) that I''m probably implementing an > > almighty kludge to get round the problem of things-needing-a-height- > > but-you-don''t-know-it. If this is causing my problem, or if there''s a > > more elegant way to fix it, I''d gratefully receive any pointers. > > > Cheers :) > > > Example HTML: > > <ul class="expando" style="padding-bottom:5px;"> > > <li id="things_header" class="expando"> > > <a href="#" title="Things" onclick="toggleExpando(''things'',''slow''); > > return false;">Things</a> > > <div id="digital_content" style="display:none;"> > > <ul> > > <li>Fish</li> > > <li>Chairs</li> > > <li>The letter ''O''</li> > > <li>My mate Dave</li> > > </ul> > > </div> > > </li> > > </ul> > > > Script: > > function toggleExpando(elmnt,d){ > > > var oHeader = $(elmnt + ''_header''); > > var oContent = $(elmnt + ''_content''); > > > if (oHeader.hasClassName(''expanded'')){ > > oHeader.removeClassName(''expanded''); > > oContent.setStyle({height:oContent.scrollHeight+''px''}); > > new Effect.BlindUp(oContent, {duration:d, > > transition:Effect.Transitions.EaseFromTo, queue: {position:''end'', > > scope: ''expandos''} }); > > }else{ > > // BlindDown needs height specified. But we can''t specify it (see > > comment below). This is fugly, but it works. > > oContent.style.display = ''block''; > > oContent.setStyle({height:oContent.scrollHeight+''px''}); > > oContent.style.display = ''none''; > > oHeader.addClassName(''expanded''); > > new Effect.BlindDown(oContent, {duration:d, > > transition:Effect.Transitions.EaseFromTo, queue: {position:''end'', > > scope: ''expandos''} }); > > oContent.setStyle({height:''''}); // nested expando elements need > > flexible height, otherwise the parent will crop any expanding children > > pageTracker._trackPageview(''expando/'' + elmnt); > > console.log(''expando/'' + elmnt); > > } > > }--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---