jQuery – Breakfast, Dinner, Tea

jquery-mondrian : My Very First jQuery Plugin

I am a massive fan of jQuery. Earlier in my career, we made do with massive custom libraries full of nasty hacks to make everything work across all browsers (back to IE5.5, when I began, eurgh), and this left very little time to have fun with JavaScript. jQuery has corrected that for us – it takes care of nasty cross-browser stuff (especially ajax), makes traversing the DOM an absolute joy, and has a huge library of user-contributed code – in the form of plugins – to solve just about every common JS problem you can imagine, as well as quite a few not-so-common ones.

This post is about one of those not-so-common ones, namely the one used here on this site to print those shit-looking attempts at Piet Mondrian canvases on the background. It all came about because a) I saw a Mondrian piece and figured ‘those look kinda automatable’ and b) I’d been looking for an excuse to piss about with canvas.

You can download, fork, or just laugh at the code here on github, there’s nothing revolutionary in it – it randomly places lines and fills some of them with given colours. That’s it. Really. There are a couple of extras that I’d like to code into it further down the line, one of which is functionality similar to what can be seen on Composition With Javascript – an awesome site I discovered not long after starting to code this plugin, which executes a similar idea in a much better fashion. Another thing I’d like to possibly mess on with is the Piet programming language, how about feeding the output of such a plugin into a Piet interpreter? Or reading in piet-formatted programs? Obviously, there’s a long long way to go to get to any of that from what is essentially a toy, but they’re fun ideas – to me, at least.

But all of that really comes down to time available, there are a couple of other avenues that I’d still like to explore with regards to canvas, and they might get played with first – but the bottom line is that I’m writing in this blog more often in order to push myself to do more fun stuff to have more bollocks to write about.

I’ve recently needed this little snippet of code a few times over the last couple of months, I’ve never seen it documented so it’s probably obvious to anyone who isn’t me. But I’m going to stick it here just in case there are other people this has annoyed.

The situation: you have a series of elements (say divs or images) of equal width and floated left to give the visual impression of columns. However, this visual impression is broken when the elements start differing in height.

As you can see here, the 3rd and 4th elements are stacked, instead of breaking onto the next row.

While we could give the elements a fixed height, it’s not very nice for authors to have to tailor their content to a design.

So what we do is create a new clearing element at the end of the ‘row’.

We can actually do this with very little JavaScript: $('<div/>').css({ 'width': '100%', 'clear': 'both', 'height': '0', 'border': '0' }).insertAfter('div:nth-child(3n)');. This creates a new div element, applies a bit of CSS to stretch it and make it invisible, and then adds it after every third div (or image or whatever you want).

The full effect can be seen in the following jsFiddle:

Now purists will be screaming at me for using JS for the presentation layer, and they’d be dead on. Ideally we’d use CSS, and technically that can be done using something like div:nth-child(3n+1) {clear:left;} (I’ve only tested that in Chrome). Unfortunately, nth-child is only supported as of IE9 beta and so those chumps in MS-land won’t get the benefit of your genius design skills. Another way of attacking it is coding in those clearing divs in the source, but that’s pig ugly and I just plain don’t like it, but feel free to go that way if you wish (this would also get rid of the problem of people with JS turned off, but that’s a whole other discussion).

So yeah, no idea if that’s useful to anyone outside of me, but figured I’d put it out there if only to get some fresh content on this here blog.

Edit: Oh, and while I remember, this code is in use on my little Mixed Martial Arts news tracker that I knocked up while playing with Google App Engine. To see the effect of the code click some of the ‘+’s next to the news items and watch with glee as the entire row below slides up and down. Neat, eh?