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.
Not long ago, I entered Chris Coyier’s CSS-Off competition. The mock-up was deceivingly harder than it looked, but I managed to put something together that I think should stand a chance of being considered for a prize. The one area that gave me trouble was the use of different colours on different lines of text within an element. I knocked together a quick jQuery plugin to achieve this, and then realised after submitting my entry that it didn’t work at all in Internet Explorer. Doh! Anyways, I have now fixed that, and here is the plugin.
Recently, I was faced with the requirement to make a horizontal navigation bar fixed to the top of browser window, but only when the user scrolls past it. I had a quick Google around, and found a few plugins that did way more than I needed them to. I was certain this could be achieved in a couple of lines using jQuery, so I did it myself.