As a user interface developer, I come across those annoying question marks in Firefox fairly frequently, where someone has copied-and-pasted some text from a rich-text editor into an HTML file which contained unencoded HTML character entities. I have a fairly good memory for these things, but inevitably I have to use Google to find some that escape my memory. So I developed a simple HTML application to copy the encoded HTML character entities to my clipboard, ready to be pasted directly into my HTML.
CSS3 transitions and animations are rightly attracting a lot of attention. With support in most modern browsers, there is a lot of scope for creating rich user experiences using only CSS. In this post, I will walk through how to create a stack of photos using CSS keyframe animations and a dash of jQuery to achieve a pretty awesome effect.
This is basically another take on moving backgrounds using jQuery, but I was inspired to create a rotating globe by Román Cortés Pure CSS Coke Can. Sure, this has nothing to do with displacement, and it uses JavaScript, but it was fun none-the-less!
I’m very much looking forward to the World Cup this year, which reminded me of the fun I had during the last one four years ago. I remember organising a Question of Sport style quiz for my fellow colleagues, which gave me a great chance to try out some JavaScript that I had learned. One round involved the creation of a picture board, which is divided up into squares, and users can click on the numbers to reveal a portion of an image underneath, similar to the Picture board on Question of Sport, but more like a game of Catchphrase. It got me thinking: what would I do now I am armoured with all this jQuery goodness?
A while ago, over at Bright Interactive, we had a client with a challenging requirement: they wanted a tabbed area on a page, which would have multiple rows of tabs. The challenging part came about when they requested that the tabs would automatically fill their containing box. That was still pretty easy to achieve, until I realised that the website had a fluid layout, and so the width of the containing box was not defined in pixels in the CSS stylesheet.