A followup to
cracked-out twistys by Court.
Badri and I worked on a hierarchical view in Kipling last night and came up with this (IMHO) nice refinement of the original. First an example of the markup:
1
2
3
4
5
6
7
8
9
10
11
|
<div class="Story Node" id="story_105">
<span class="Twisty">►</span>
<div class="Name"><div>Node</div></div>
<div class="Collapsible Details" style="display:none">
<div class="LastUpdated">Updated 7 minutes ago</div>
<div class="Body"><div><p>Description</p></div></div>
<div class="Story Node" id="story_106">
... you get the picture I hope
</div>
</div> |
Then use Behaviour.js to apply your JS client side code in a modular way:
1
2
3
4
5
6
7
8
9
10
11
12
|
var goal = {
rules: {
'.Collapsible' : function(details) {
var twisty = details.parentNode.getElementsByTagName('span')[0];
twisty.onclick = function() {
toggleTwisty(twisty, details);
return false;
}
}
}
}
Behaviour.register(goal.rules); |
And finally, the toggleTwisty function itself.
function toggleTwisty(twisty, target) {
twisty.innerHTML = (target.style.display == 'none') ? '▼' : '►';
new Effect[Element.visible(target) ? 'BlindUp' : 'BlindDown'](target,
{ duration:.2, fps:50, queue:'end' })
}
The "dynamic method invocation using square brackets and a conditional" idiom of JS just blows my mind. Cryptic, but cool.
February 23rd, 2006 at 08:29 AM This is a great increase in legibility for the JavaScript part, and I praise Behaviour implementation.. but still, it could go further in striving for beatiful code :-) In my opinion, the hierarchy could be legitimately expressed with nested definition lists. I don't want to start another discussion on whether or not this is semantically correct, but it's valid, and seems more intuitive to me than divs and spans, so I went on and tried out a few solutions. It would make more sense for the definitions to convey every information in their own tag. But that would probably require convincing the function to roll out several elements, and consequentially, also run three animations at a time. Another option is to put the details into a single term definiton, and structure them with paragraphs. It would also make sense, that if you apply the twisty behaviour after page load, the twisties should also be added then, right? So here it is then, behaving nicely, falling back to readable stuff without JavaScript or even without styles! Well, the style-less part took an extra strong tag in the term definition :-I, but I'll live with that. http://www.some1else.org/twisty/ Thanks!
March 5th, 2006 at 07:01 PM I'm trying to figure out how to call this with an onclick from a link. In other words, I want clicking on a text link to toggle another twisty on the page. I tried this: toggleTwisty($("composemail_twisty"), $("composemailbody")); But I can't figure out what I should assign the id 'composemail_twisty' to; is it the a, the span or the surrounding div? (I mean on the twisty that I want to toggle remotely from elsewhere on the page.)
March 5th, 2006 at 07:43 PM Figured it out. (What I needed it for, by the way, was so that when you clicked on an e-mail address in another div on the page, it would twisty-down a simple mail form.) Also, I wrote this simple function to show a twisty, rather than simply toggling it. You probably already have one of these, but if not, this might be useful: function showTwisty(twisty, target) { twisty.innerHTML = '▼'; new Effect.BlindDown(target, { duration:.2, fps:50, queue:'end' }) }
March 5th, 2006 at 08:00 PM Actually, sorry, should be: function showTwisty(twisty, target) { if(target.style.display == 'none'){ twisty.innerHTML = '▼'; new Effect.BlindDown(target, { duration:.2, fps:50, queue:'end' }) } } (Had to add the if clause, otherwise it tries to blind down even if it's already open, and it just looks stupid.)
March 9th, 2006 at 06:23 PM instead of using a conditional to decide which to use (BlindUp or BlindDown) you can use Effect.toggle(element, 'blind') Assuming you're using scriptaculous, that is ;) -Jeremy
July 6th, 2007 at 07:36 AM
Hello! Good Site! Thanks you! muhfwmeysjzbgc
July 8th, 2007 at 04:11 PM
Thanks for this site! kmjun.anna5.biz ckue.liza1.biz w.seno4.biz znj.pupa1.biz z.pupa1.biz ol.mio1.info rl.yum2.biz l.pupa1.biz
July 8th, 2007 at 05:05 PM
Thanks for this site! wkca.mila4.biz uka.seno4.biz g.nipol4.biz v.reo4.biz jik.liza4.biz mrt.liza5.biz jcb.liza5.biz aos.mio1.info qakt.yum1.biz gw.pupa1.biz
July 8th, 2007 at 05:40 PM
Thanks for this site! zeny.yum2.biz aucuw.yum5.biz lwz.liza3.biz citst.seno5.biz miakx.pipka1.biz nbdul.seno4.biz ybg.seno2.biz wyfmg.nipol2.biz wvg.popi4.info