Comments on: Twisty HTML

By: twisted cool

twisted cool — Sat, 19 May 2007 15:42:30 +0000

kool thing !!!!!

By: John Drinkwater

John Drinkwater — Wed, 28 Feb 2007 15:36:36 +0000

Hi Ben,

Have you thought about adding an additional class to the Twisties via javascript, so that for anyone with JS disabled, the twisties wouldn’t show behaviour?
You could even add the twisties with JS.

By: Ben

Ben — Wed, 28 Feb 2007 09:16:49 +0000

On line 56 (the inner for loop of initTwisty()), the condition should read as “j

By: James Henstridge

James Henstridge — Wed, 28 Feb 2007 08:39:19 +0000

How do you toggle the disclosure triangle without using the mouse?

One way to handle this is to rewrite the page to make the disclosure label into a anchor, and put the show/hide handler on that anchor. That way you can tab to the disclosure triangle and toggle it with the keyboard. (This is what we did for Launchpad).

By: Peter Lund

Peter Lund — Wed, 28 Feb 2007 06:34:07 +0000

The hidden parts are briefly shown during load — I don’t know if you want to do something about that?

By: xkahn

xkahn — Wed, 28 Feb 2007 05:00:47 +0000

Hey Shen,
Oops. You’re right. I ignored IE since I don’t really have access to a Windows machine. I would love to be compatible, but it’ll be some time before I can test with a real IE install.

EDIT: Okay. I found the problem. I was setting CSS properties in a standards compliant way. I have code which fixes the problem. However, I’m also updating the visual style, so I’ll post both updates together. Thanks.

By: shen

shen — Wed, 28 Feb 2007 04:20:47 +0000

Hi Ben;

I’m not too sure how interested you are in Ie compatibility, but the no
The no slide page you link to doesn’t seem to work at all in my ie6.
All the extra bit show open when you load the page, and I’m getting javascript errors on character 4
line 58+96
with an error of “Object does not support this property or method”
I can send you some screen shots if you like.

The twisty.html version is working, although all the extra bits are visible on page load.
clicking on the twisties will remove and add them back in.

By: xkahn

xkahn — Wed, 28 Feb 2007 03:25:47 +0000

The triangles do have an extra long last frame. But they also only play once and stop. That’s actually just an artifact of some experiments I was doing at first. You’ll notice that the twistyToggle function I have actually walks the list of twisties and switches all the animated images it finds to the static versions before setting it’s own animated image. This is because the browser (firefox at least) will replay all the animations when a new copy of that image is to be displayed.

Drove me batty until I figured out what was happening. I’m working on a cleaned up version using some of the great ideas from Swat. Maybe I’ll fix that last frame too.

By: Mike

Mike — Wed, 28 Feb 2007 02:46:33 +0000

I like your animated triangles too. Are the gifs you use looping with an extra long last frame or do they just play once and stop?

By: xkahn

xkahn — Tue, 27 Feb 2007 23:55:34 +0000

Hey Steven & Brad,
I really like the visual style you have for your disclosures. And your solution for displaying the page when javascript isn’t enabled is much much cleaner to the user. (My solution hides the content after the page loads; yours hides the content as soon as the block-to-be-hidden is finished loading.)

Both solutions use the same timing for the animation no matter how big the content is. This means that an expose that’s 10 pixels high will appear to animate MUCH slower than one 100 pixels high.

I like my animated triangles, but that might be a matter of taste.

Thanks for pointing out this great toolkit, and this widget in particular. Looks like a lot of great ideas.