Ben Kahn » html

Mediawiki Acronyms

admin — Wed, 31 Mar 2010 19:03:54 +0000

I was working on a project that used a lot acronyms and terminology that I didn’t know yet. It was making me crazy, so eventually I created a Terminology extension for media wiki.

You can see a demo of it on CyanogenMod’s Wiki. And see the Terminology source page. (and contribute to it!)

Anyway, hope it helps someone else.

Twisty 3: Simple and lightweight Disclosure Triangles for the web

admin — Wed, 31 Mar 2010 18:15:13 +0000

Twisties, otherwise known as “Disclosure Triangles” are little triangles (►) that twist (▼) when clicked to hide or show content on the page. I’m working on a web page that has a lot of content, but didn’t want it all displayed all the time. I searched around for a little while trying to find a nice example written by someone else, but came up empty. Probably other people thought this was too simple, or my searching skills failed me. Either way, I ended up writing this myself. These were my requirements:

Cross-platform: It should work on my cell phone, on IE6, and real web browsers
Robust: If things go wrong, it shouldn’t break. If the user doesn’t have JavaScript enabled, it should work. No CSS? It should still work. A user script which hides or shows nodes out from under us? It should still work
Understandable: It should be easy for web developers to understand and add to their existing pages
Small: If this adds lots of code to a web site, it won’t be used and will slow downloads down
Attractive: It should “feel” nice. Lots of feedback to the user, and maybe some animation if appropriate. It shouldn’t seem different from twisties the user has seen before
Accessible: Should work with the keyboard and with the mouse; printed pages should do the right thing

First, a demo:

Click this title to hide and show a portion of the page

Don’t open me!

Hey! I told you not to open this section!

Name	My numbers	My letters
Beth	65, 5, 1, 6	y
Andy	21, 12	k,f,s
Fred	9	k
Mary	100,000	r, w, e

To get started, you can simply download the code:

UNIX/Linux: twisty3.tar.gz – 30K
Windows: twisty3.zip – 36K
CVS/SVN: Not yet available

Set Up

If you want the smooth animation, seen above, put the following into your :

If you want a smaller footprint, or don’t like the exposure animation, put the following into your tag instead:

Defining a section to be hidden

Each section needs a unique id, a title, and the content of the section to be hidden. Then, format that section like this:


  
    The Section Title
    
  
  
    
      Section Content

Hiding sections by default

If you want a section to be hidden by default, add after the section’s

You should also include the two external style sheets:

You no longer need any changes to your tag.

To define a twisty, use this template:

The Section Title Section Content

If you want the section to default to hidden, simpy add this code to the end of the above code snippet. (after the last

)

Hopefully, this version works better.

Twisty HTML

xkahn — Tue, 27 Feb 2007 22:09:53 +0000

Edit: I’ve created an updated version of this library and described it at Even More Twisty HTML. I don’t recommend using the version described below because of the issues people have reported.

I searched around for a little while trying to find a nice example written by someone else, but came up empty. Probably other people thought this was too simple, or my searching skills failed me. Either way, I ended up writing this myself.

So first I came up with some requirements for myself:

It needed to be robust. If things go wrong, it shouldn’t break. If the user doesn’t have JavaScript enabled, it should work. No CSS? It should still work. A user script which hides or shows nodes out from under us? It should still work.
It should be small, and run quickly.
It should be easy for web developers to understand.
It should “feel” nice. Lots of feedback to the user, and maybe some animation if appropriate. It shouldn’t seem different from twisties the user has seen before.
It should be extensible so others can do things with it I hadn’t imagined.

I have two results. One uses script.aculo.us to show smooth animations, and the other doesn’t. In both cases, the underlying code is the same. My twisty library checks to see if script.aculo.us is available. If it is, you’ll see animations. If it isn’t, you won’t.

So how do you use it?

First, you need to download twisty.js and the four twisty images: hidden, down, the hidden animation, and the down animation. Save them into the same directory as your web page.

Next, in your page header, include the following to load the javascript:

If you want animations, you need to download and include the script.aculo.us scripts too.

In your stylsheet, you should include:
.twisty:hover { background-color: #f0f0f0; border: 1px solid #e0e0e0; margin-left: -1px; } .twisty { cursor: hand; cursor: pointer; }

To make sure you get a nice mouse cursor over a twisty, and also the image highlights nicely when you hover over it.

Next, you need to initialize the twisties in your tag. This is only needed if you want to support users not using Javascript and want to have blocks that are hidden by default.

To create a twisty, you need to put the whole thing inside a

, Add a label, the image with a class of twisty, reference the correct twisty image (either twisty-down.gif or twisty-hidden.gif), and an onclick handler referencing a unique id. Then put a

with a class of collapsible and the id you chose before in the onclick handler. Inside that put another div. (This last div is needed by script.aculo.us for some reason.)

Some Label 



Some content

Let me know if you can think of anything to improve this widget, or it’s description.