Thankfully this functionality was eventually removed from the UI specifications after concerns from myself and others were raised. Just to make this perfectly clear; I think this is a bad idea, and here is why:

• Users are very wary when it comes entering their credit card details. Spaces magically appearing in their credit card number could freak a few of them out.
• Most e-commerce website I’ve ever used ask for the credit card number as one long string of numbers with no spaces. Auto-spacing goes against this convention, so a user may actually go back and try to remove the spaces (I know I would).
• Validation scripts for credit card numbers usually ask for the input to have no spaces, or will remove any spaces on submit.
• If you do want to space out the credit card number, why not use different input boxes for each set of numbers? It looks cleaner and is simpler to implement. Just have your JavaScript automatically jump between boxes as the user types.

Even though this functionality was removed, I decided to build a prototype of it in action because… well because I can and I was bored. :) Please, (please!), whatever you do don’t use this code in production. I created it as an experiment and should be treated that way. It’s very simple to get around the auto-spacing and then all hell breaks loose! (not really, but it is easy to break).

The spacing is implemented by counting the length of the string inside the input field, but you could also monitor the current position of the cursor. Anyone wishing to do this see this excellent set of answers on Stackoverflow.

You can see the prototype here. Remember, don’t use it. It’s not big and it’s not clever :)

After a little head scratching to work out what was failing, I worked out it was because I was using HTML5 elements such as ‘article’, ‘header’ and ‘footer’. There was no problem displaying them on the page, as I’d used Remy Sharps excellent HTML5 Shiv script. It only failed when trying to pull in these ‘new’ elements via Ajax.

Note: Before you read on you’ll be happy to hear that this issue no longer occurs in jQuery 1.7.0. Horray!

If you can’t upgrade, for whatever reason, I hashed together a little work-around for browsers IE8 and below, so read on. I admit the work around isn’t pretty, but it works. I tried for a few hours to get IE8- to recognise the ‘new’ elements after an Ajax request, but to no avail. Eventually I had to wrap the HTML5 tags in a div using conditionals:

The div is added for browsers IE8 and below, you can then use it as a hook to pull in the elements inside the div. I was hoping that wrapping the HTML5 elements in a standard div would be the end of it, I’m afraid not. The .load() method still didn’t work, IE just ignored the elements it didn’t recognise. I used jQuerys much more customisable .ajax() method to fix the issue in IE6, 7 and 8:

This method works in all browsers I’ve tested in as I’ve added a fall back (or should that be forward?) for newer browsers. The solution isn’t ideal (I really hate the conditional comments), but older versions of IE aren’t going away any time soon, and it works. Maybe there’s a more obvious solution that I missed? Leave a comment if there is, I’d love to know!

You can see a working example here. The page I’m loading from is here and the JavaScript in full here.

Visual thesaurus representation of the word 'clean'.

You may (or may not) know of the Visual Thesaurus by Thinkmap; very useful but it’s a paid for service, I use it so infrequently I can’t justify paying for it (there is a free trial though). Recently a very interesting graph visualisation library popped up on delicious called arbor.js, so I decided to have a closer look and see if I could use it for the JavaScript version. For the word data I’ve used the Bighugelabs thesaurus API which I previously used to create my Post Thesaurus WordPress plug-in (shameless plug!).

Arbor.js took a little getting used to as it uses a mixture jQuery, canvas and its own methods; but there’s a fairly extensive set of documentation and a set of usage examples. Once you get your head around adding nodes and edges to the system, arbor takes care of the rest. One thing I did notice is the site examples and my VT experiment run much smoother in Firefox than they do in Chrome, which is quite surprising considering how quick the V8 engine is in Chrome. Maybe this will be improved in future versions.

So to the demo; I’ve tried to keep it very simple to use. Enter the word you wish to visualise and click search. Once the API returns a result it’s plotted by arbor. You can drill down into the result by clicking on the sub-particles (and remove them by clicking again). The individual words can be clicked and you’re given the option to search again using the selected word. I still haven’t got the perfect system setup as some results can be a little jittery; usually when an even set of words are returned. I’ll keep playing with system settings to see if I can improve this.

Any suggestions, comments or feature improvements please leave a comment below!

The design and layout layout had already been created in the usual fashion. All that was left to do was to layer on all the JavaScript goodies (the fun part!). While implementing jCarousel I ran into a curious console error message:

“jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…”

When I checked the carousel CSS, the item width had been set:

Strange. The width had been set, so the error message must be from something else. After a few minutes investigation it turned out that the carousel didn’t have a parent with a set width. When fired the carousel is wrapped with two divs; one wraps the carousel, the other wraps the carousel and the navigation. Neither of these divs have an explicit width set which is what was causing the problem. It was a very quick fix in the end:

Upon a little more investigation it seems you can fix this issue in other ways too. Instead of using a class of “product” to set the item widths I tried using the following:

Very strange! The CSS in both cases changes the same elements, it just ignored the width in the ‘product’ class.

So for anyone else encountering the same “No width/height set for items” issue here’s a quick check list for you to try:

1. Make sure you set a width on the items (duh!). Maybe try different CSS selectors if necessary.
2. Set a width on the “jcarousel-container” class or one of its parents.
3. If all else fails, adapt one of the skin examples bundled with jCarousel.

The last one is very annoying if you have your carousel already styled up, but it is guaranteed to work.

After updating to WordPress 3.0 (yay!) I decided to check the plug-ins that I’ve written to see if they still worked in version 3.0; to my dismay Post Thesaurus had stopped working… nooooo! Not good! A quick scan using Firebug revealed the issue: the Headspace2 plug-in.

Headspace2 is a superb plug-in that allows you to tweak the SEO potential of your site. There are tonnes of options available; All In One SEO is easier to use, but I prefer the flexibility of Headspace2. The problem was occurring in the headspace-tags.js file:

This error was stopping the rest of the JavaScript on a post page from firing (hence breaking Post Thesaurus). Looking at line 76 of headspace-tags.js you will see:

The code seems to be falling over when there are no tags, so I just added a ternary operator which checks the array length first.

If there are no tags create an empty array, else run the usual code. Adding this code fixed the issue and Post Thesaurus works again. Phew! Panic over. I’m sure this error will be picked up by the developer straight away and fixed in the next update.

Like with anything, you need to have a solid foundation of knowledge to build upon when it comes to new technologies, sometimes it’s a little dull but it will pay dividends in the future. Once you have the basic knowledge the world is you web browser. So here are a list of five books I’ve read in the past that I’ve found particularity helpful.

DOM Scripting

The reason I’ve put this book first is simply because it’s one of the best technical books I’ve ever read. The way it’s written is simple to understand and concise. All the way through the book it explains not only what you are doing but also why you’re doing it, and why you should also follow the same methodology.

If you are a complete beginner to JavaScript and the DOM this book will get you up and running and understanding in just a couple of chapters. Now some may say “oh I don’t need to know this anymore, that’s what JavaScript librarys are for”, but in my opinion that’s a dangerous road to go down. If ever your chosen library doesn’t do what you need, or if you can’t use a library for whatever reason; then you’re in trouble.

If you know the basics of the DOM and how to manipulate it using JavaScript, you’re much more likely to solve any issues you encounter and you’ll have a much better understanding of what the libraries are actually doing.

Author: Jeremy Keith (Amazon).

Eric Meyer on CSS

There simply couldn’t be a review of front end development books without a book from the wizard of CSS, Eric Meyer. Eric has been a major part of the CSS community for many years; helping to educate developers in the proper usage of CSS and how it can make development so (so!) much easier. I had the pleasure of attending a 2 day workshop of his in London a few years back, and still use what I learnt there on a day to day basis.

‘Eric Meyer on CSS’ will teach you some of the advanced techniques involved in using CSS in a practical manner. You take a plain website built using tables, clean up the mark-up and layer on features and functionality using CSS over the various chapters; so rather than just getting a list of properties and selectors to read about, you actually get to see a live project changing over time.

Be warned, the book isn’t for absolute beginners, you do really need to know the basics of HTML and CSS to get the most out of it. Not to worry though, all the information you need to learn the basics of many different languages including HTML and CSS is available online at w3schools. You don’t have to stick to HTML and CSS, they also have JavaScript and the DOM if you’re feeling adventurous.

Author: Eric Meyer (Amazon)

JavaScript – The Definitive Guide

The very large book you can see in the image above is ‘JavaScript – The Definitive Guide’, and it really is a definitive guide. It has of 900+ pages of wonderful JavaScript! Now I wouldn’t expect anyone to read it page by page (although that’s what I did), but it’s defiantly a book you should have in your tool kit for reference. It goes over pretty much all aspects of JavaScript you will ever use and even though it is quite technical it isn’t hard to follow; with plenty of examples and explanation of the code.

Again there’s an argument for do you need to know JavaScript if you just intend on using a library. Well I guess that up to you, but I personally don’t feel comfortable using any sort of framework / abstraction without having at least some understanding of the language it is built on.

Author: David Flanagon (Amazon)

Learning jQuery

So assuming you know about HTML, CSS and JavaScript it’s time to learn one of the many JavaScript libraries available. Now I agree with Christian Heilmann on a point he made at Full Frontal 2009 (I think it was Christian who made it), it doesn’t matter what library you use, as long as you use one!

‘Learning jQuery’ is a fantastic book that will take you through all aspects of jQuery, from setting up and writing basic code to Ajax and writing your own jQuery plug-ins. If you know how to use CSS to select parts of the DOM then jQuery will be simple for you to pick up and use. The book is filled with practical examples and applications, all using best practice methods.

I only had one slight gripe with the book while reading it; I found the font for the code blocks was slightly too big, so you tended to get a lot of wrapping on large code blocks. In terms of the content though, it really is one book that is a must read if you use jQuery or want to use jQuery in your projects.

Author: Jonathan Chaffer & Karl Swedberg (Amazon)

PHP Solutions

Now I know what you may be thinking, PHP isn’t a front end language, it’s a server side language. That is very true, but one thing I can guarantee is one day you will have to integrate the front end templates you’ve built into a server side language; be that PHP, .Net, JSP, Java etc. As I’ve mainly worked with open source technologies, PHP is primarily what I integrate into.

‘PHP Solutions’ is another excellent Friends of Ed book that takes you through lots of practical uses of PHP that you can use straight out of the book. It covers subjects such as setting up your server and includes, to online galleries and security. You may not use any of the functionality it covers since most frameworks and CMS’s have the functionality built in; but it will give you an understanding of how PHP works as a language which in turn will help you when it comes to integration.

Author: David Powers (Amazon)

So there you have 5 books I’d recommend to any Front End Web Developer looking to expand their client-side knowledge. Leave a comment if there are any books you’d recommend and I’ll take a look and add it to my Amazon wishlist.

A feature that I saw on another site (although I can’t remember which) was when a user rolled over a code box it would expand to fit the code, allowing the user to see everything. Cool little addition, so I decided to create my own using jQuery. I’ve taken some of the code from the plug-in and pasted it below so you can see it in action:

Since this action is fired on hover, I didn’t want the code boxes expanding immediately every time a user hovers over a box; as just scrolling down the page would expand the boxes which would become extremely annoying. The boxes should only expand when the cursor is left over the box; lucky there’s a plug-in for jQuery that already adds this functionality, it’s called $.event.special.hover.

Special hover simply replaces the standard hover event with one that monitors the speed of the cursor over a set period of time. If the cursor speed drops below the threshold the hover event fires. This is enough to stop random hover events firing when a user navigates over the page, simple!

I’d be interested to see if the code works for others using CodeColorer, there’s no reason why it shouldn’t. Download the code, give it a try and let me know what you think.

After finding I use the word ‘great’ a little too much, I thought it was about time to do something about it. Here are a few screenshots of the plug-in in action:

Notice the widget in the top right corner.

The widget has completed a search and populated the results panel.

Big thank you to Big Huge Labs for providing the excellent API. I’ve included an admin page with a few settings (under ‘settings’). One feature to note is the ability to enter your own API key. I’ve added this just in case the plug-in starts exceeding the 10,000 requests per day a single API key is allowed. Sign up is simple and only takes a couple of minutes, then you’ll have 10,000 requests per day all to yourself.

I’ve implemented the API using a little jQuery Ajax goodness and some JSONP. Since jQuery is used by the WordPress admin by default, there’s no additional overhead in having to add it manually.

Grab the plug-in off the WordPress site here, or you can download the zip from my site here (Version 1.0.0.0).

Hope you find it useful, any feature requests or bugs leave a comment below.

Tab Down simply hides content above the page which a user can then access via a floating tab. It’s easier to illustrate using a couple of demos. Demo 1 pushes the page content down with the tab, where as demo 2 tab content floats over the top of the page content. You can easily switch between versions by passing true or false to the “floating” option when calling the tabDown method.

Demo 1 example with floating set to false.

The plug-in is simple to use and has a number of options to allow customisation:

• Floating: Sets if the tab floats over the main content or pushes it down (default: true)
• Time: Time in milliseconds for the slide animation (default: 1000)
• Container: If your tab content is inside a “wrapper” div, let the plug-in know the selector for this div, see demo 1 for an example (default: “body”)
• Downtext: The text used in the tab before sliding down (default: “Down”)
• Uptext: The text used in the tab after sliding down (default: “Up”)
• Easing: For smoother animation you can use animation easing, requires the jQuery easing plug-in (default: “swing”)

View demo 1 and demo 2 or download the code (version 0.1 – updated 2nd Apr 2010).

Every so often a designer asks for something a little different, this time it was for an animated clock that sits in the top right corner of a website. Usually that means looking for a Flash based solution, but Canvas is the new Flash… apparently; luckily Coolclock is available to plug the no-flash gap.

Coolclock is a fantastic little script that will generate a canvas based clock from the parameters you pass it via the class attribute (I don’t agree with that, but it works). It’s fully customisable by way of a little JSON data, allowing you to create your own skins. There are quite a few user submitted skins available to use on the Coolclock homepage if you don’t want to create your own.

I needed the clock to be able to change depending on the country that’s chosen from a dropdown list, here’s how I achieved it:

Very simple, the relevant HTML code is generated with JavaScript as to not leave a pointless dropdown on the page when it’s turned off. The key to the solution was calling the CoolClock.findAndCreateClocks() function from the coolclock.js file, without that the clock isn’t recreated when the dropdown is changed.

As mentioned above, the script seems to come unstuck when viewed in Internet Explorer, since IE doesn’t support the canvas tag. You can plug the lack of canvas support using ExplorerCanvas, but even then coolclock is a little quirky. I managed to get the clock working with IE6 & IE7 but IE8 wasn’t having any of it; bit of of shame as it’s a nice solution. Good news is on the horizon though, IE9 will support canvas by default so no nasty JavaScript hacks.

Eventually I decided to add the clock as a type of ‘progressive enhancement’ by wrapping the function in the following:

It’s not great, and I hate having to do it but if users want to see a cool clock they will have to upgrade to a modern browser (that’s not IE8).

For those who are interested, here’s a quick demo of the code in action.