{ Monthly Archives }

February 2007

Even more twisty HTML

Whew! Yesterday I received a number of comments and complaints about my small twisty (disclosure triangle) library. To review:

  • It didn’t work in Internet Explorer. (Not too surprising since I don’t have access to a Windows machine for testing.)
  • It was a little ugly. (Okay, no one said that, but I think it was implied.)
  • The hidden sections would display for a moment before being hidden.
  • It wasn’t keyboard accessible.
  • I had a typo in the script.
  • The hiding animation wasn’t the same speed as the twisty animation.

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.

2007 02 28

html

Comments (7)

Permalink

Twisty HTML

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:

  • 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:

<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.

2007 02 27

html

Comments (12)

Permalink

Hello Planet!

So I’ve recently been added to the Planet blog aggregator.  Yay!  This blog is still pretty young, but you can read about a proposal I made to change the Evolution composer.

2007 02 27

GNOME
bragging

Comments (2)

Permalink

Fixing the Evolution Composer

Back when I worked for Ximian a common complaint we heard was that Evolution wasn’t good for sending formatted text because it always word wrapped it causing lots of errors.  This was pretty frustrating because it wasn’t true, but since we heard it all the time, it was obviously too confusing.  Here’s the dialog.  Can you guess how to preformat text from this screenshot?

Evolution Composer

If you guessed that you click on the dropdown that says: “Normal” and select “Preformat,” you’re right!

Most people seem to assume that the second toolbar doesn’t do anything when you’re not write an HTML mail.  But that’s not true.

I recently filed this bug report against the Evolution composer. The problem is that the composer is too confusing to use.  Here is the composer editing an HTML message:

Evolution Composer HTML Mode

I propose that the main toolbar lose the “insert” capabilities that only work in HTML mode and gain a toggle button which switches between HTML and plain text mode. When the button is pressed in, you’re sending an HTML message.The secondary toolbar should only contain the controls that are currently active. So text color, font size, font decoration, and font style will not be shown in text mode. And instead of “normal” the default mode should be named for what it actually does: “Word Wrap.” Something like this:

Revised Evolution Composer Text Mode

With this scheme, HTML mode looks like this:

Revised Evolution Composer HTML Mode

See the bug for more mockups.

2007 02 18

GNOME
technology

Comments (4)

Permalink

FiOS and High Definition Television

For more than a year now, I’ve had a small High Definition Television, but for many reasons (okay mostly cheapness) only been able to use it to display standard cable. Well, that changed a few days ago when Verizon FiOS TV became available in my area. We got it just before the rate hike in our area.

This service is really amazing. The free installation is intense and lasted all day because they seem very concerned that everything work perfectly when they leave. The technician stayed until the network service was exactly as fast as what I’d paid for, and the television was playing HDTV and standard TV perfectly.  All the cables were free.  All the equiptment except for the cable box rental is free.  Very very impressive.

The picture quality on the television is amazing.  Standard TV looks better than DVDs.  HDTV looks so good it almost doesn’t matter what you’re watching.  And the 5.1 channel audio is great.

Oh. And this is all cheaper than what I was paying RCN without HDTV.

So far, the only problem I’ve seen is two 1 second audio drop outs during the Super Bowl.

Now if only my TiVO Series 1 could record HDTV.

2007 02 17

bragging
technology

Comments (11)

Permalink

Hello world!

No really. Hi.  This is the third blog I’ve tried to start.  Maybe this one will keep?

2007 02 06

meta

Comments (0)

Permalink