From time to time, we need to display links as plain URLs in a text.

The problem with URLs is that per definition they don’t contain spaces (yes, sloppy developers or maintainers use spaces in filenames and risk broken links, but nobody should).
No spaces in long words in HTML means that the text does not break into several lines when there is not enough space. This can seriously wreck a layout.
Furthermore, long URLs don’t look nice and stop the flow when reading a text.

A lot of blogging tools and CMS offer backend scripts to constrain the length of submitted URLs, for example in comments.
A friend asked me if that could also be done on the client side, and I wrote shortlinks to do that.

It is a small script that checks each of the links in the document for a http: start and if it is longer than a defined length. If that is the case, the script takes out some letters either at the end of the URL or in the middle and displays the shorter version. You can define a title with the full URL to be added.

I am currently looking for cheap rebates for some company licenses of the Adobe Creative Suite 2. This ebay listing is my favourite. How stupid does this guy think bidders are?

You are bidding on the whole Creative Suite 2 from Adobe. It comes as a DVD with a Total Training video CD. The product is a fully operational, licensed version with all programs working but the DVD does not have the Adobe logo on it, thats all. This is because Adobe charge a LOT more for their color printed DVDs, than the ones provided, since the ones provided are exactly the same, the only difference is how much money you are saving.

It seems perfectly innocent at first, but am I a bad person for finding the logo of this oriental institute a bit naughty?

Once again someone asked on CSS-D why MSIE shows some horribly yellow text boxes, and how to work around that.

The riddle is easily solved – the google toolbar highlights form fields that can be automatically filled with data you entered earlier and shades them yellow.

Patrick Griffiths reported on that some year ago, and of course there is a developer who came up with a JavaScript workaround to suppress this functionality.

Personally, I think it is a nice to have feature. It was bad practise of google to not make it more obvious that the toolbar causes these changes and explain what they mean. However, the amount of work some developers put into trying to control the UI as much as possible with web client technologies just makes me snigger.

Wake up, smell the coffee. Yes, you might know a lot about usability and you can design well, but it is the user’s choice to install the toolbar, and live with its features – or turn them off. The colouring has a reason, it is not done because google like yellow.

Update: If you are looking for an even cleaner and animated version of this script check out YUIDomCollapse.

I updated domCollapse, the script explained ages ago in the evolt.org article “Collapsible Elements with DOM“.
It is cleaner now and generates images with links to indicate that the header is clickable rather than just relying on CSS to indicate. Thank to Stephane for reminding me that screen readers are not text browsers ;-)

Update to Version 2.1 on 06.05.2005:
Due to the overwhelming demand (2 people wanted it), I now added an option to only show one element at a time or multiple ones.

Update to Version 2.3 on 22.05.2005:
You can now define via a parameter on the function call to automatically only allow one expanded element, or not to offer the option at all.

New Version 3.0 on 6th of December 2005
Now the whole script uses the object literal and proper DOM2 event handling. And yes, Safari is supported!