The Flash driven line and area chart from amCharts is a great way to display data dynamically on your site. All the data needed are stored in a separate XML file, so updating is done in seconds. You can zoom a selected period just by clicking and dragging, turn on/off each individual graph and all values are shown when hovering. Yet another XML file allows you complete control over every colour, size, font and background.

I’ve just added the comic strip “Help Desk” from ubersoft.net to my sidebar by including a few functions to the main functions.php file (actually just by doing an include() to make updates easier) found in the /wp-includes directory in WordPress.

These functions automagically look up ubersoft.net to check if a new comic is out. If yes it will create a thumbnail with a link to the original, otherwise it will simply state that nothing new is out. To make it even prettier I’ve used the Lightbox add-on to have it open on top of the page so you wont have to go anywhere.

When I get around to it I’ll create a drop down menu with links to previous comics. I’ve just created a hidden DIV layer that will reveal the “Help Desk” comic by calling a tiny JavaScript. Drop me a line if you are interested in getting the code on your own WordPress installation.

Have you ever tried to include special characters like e.g. é, ê, è, ‘ or “ as a string into a JavaScript (like in an alert message when someone forgot to fill in a field in a form etc.)? Most likely it will look something like à followed by yet another character (especially in IE when the site is running on a Windows server, Firefox will probably get it right…). In order to avoid this you can simply replace the character with the corresponding Hex value (ASCII).

Up until IE7 Microsoft haven’t provided support for PNG images which in turn makes it difficult to apply transparent page effects. In CSS you can set the transparency in different ways. To ensure that it works on most browsers use all of the styles listed below:

• opacity: 0.5;
  This one is the official CSS3 method, at the moment it works in most newer browsers.
• -moz-opacity: 0.5;
  This one works in older versions of Mozilla and Phoenix/FireBird/FireFox.
• -khtml-opacity: 0.5;
  This is used by browsers that use the KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS.
• filter: alpha(opacity=50);
  This one works only in MSIE.

Lightbox is a simple javascript/CSS plugin that allows loading fullsize images as an overlay when clicking the thumbs. Click the picture below to get the basic idea.

To get this nifty add-on running on your site grab the code at Lokesh Dhakar’s website - www.huddletogether.com.

Basic instructions and all files needed are found here - /projects/lightbox2/.