Thoughts
{ Category Archives }
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.
First, a demo:
| 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:
If you want the smooth animation, seen above, put the following into your <head>:
<script type="text/javascript" src="twisty3/twisty.js"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>
If you want a smaller footprint, or don’t like the exposure animation, put the following into your <head> tag instead:
<script type="text/javascript" src="twisty3/twisty.js"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>
Each section needs a unique id, a title, and the content of the section to be hidden. Then, format that section like this:
<div class="collapsible">
<a href="javascript:toggleTwisty('uniqueid');">
The Section Title
<img class="twisty" src="twisty-down.gif">
</a>
<div id="uniqueid">
<div>
Section Content
</div>
</div>
</div>If you want a section to be hidden by default, add after the section’s <div>:
<script type="text/javascript">
hideTwisty('uniqueid');
<script>It’s easy to create an automated staging server for content that doesn’t need to be compiled (like most web content.) The trick is that CVS has a very flexible logging system. All you need to do is have your CVS server send an email on each check in and have the staging server take that email and check out the files that changed.
Whew! Yesterday I received a number of comments and complaints about my small twisty (disclosure triangle) library. To review:
So I’ve tried again with some good ideas from the SWAT tooklit. You can try the script.aculo.us animated version or the plain non-animated version. You can also simply download the whole thing as a tar file to play with.
To use this on your own, you need to include the twisty.js file in your code:
<script type="text/javascript" src="twisty.js"></script>
You should also include the two external style sheets:
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>
You no longer need any changes to your <body> tag.
To define a twisty, use this template:
<div class="collapsible"><a href="javascript:toggleTwisty('uniqueid');">The Section Title<img class="twisty" src="twisty-down.gif"></a>
<div id="uniqueid">
<div>
Section Content
</div>
</div>
</div>
If you want the section to default to hidden, simpy add this code to the end of the above code snippet. (after the last </div>)
<script type="text/javascript">
hideTwisty('uniqueid');
</script>
Hopefully, this version works better.
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.
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.
So first I came up with some requirements for myself:
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:
<script type="text/javascript" src="twisty.js"></script>
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 <body> tag. This is only needed if you want to support users not using Javascript and want to have blocks that are hidden by default.
<body onload="initTwisty();">
To create a twisty, you need to put the whole thing inside a <div>, 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 <div> 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.)
<div>Some Label <img class="twisty" src="twisty-down.gif" onclick="toggleTwisty('childid'); return false;">
<div class="collapsible" id="childid">
<div>Some content</div>
</div>
</div>
Let me know if you can think of anything to improve this widget, or it’s description.
