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 <[EMAIL PROTECTED]> 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@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
