Category: javascript

My brother Rory Gullan is pretty handy with a camera. To tie in with his first exhibition I built him a website to showcase some of his photographs.

Of course, I needed to give him a photo gallery. I first considered using Gallery2, which I implemented for Oscar Whicheloe’s site, but ended up building something a bit more individual. While this approach means more manual work for making changes (which wouldn’t have been appropriate for Oscar’s site), I minimised this in a few key ways:

1. The image for the overlay is determined by checking the value of the image “src” attribute rather than needing to manually pass it through to the javascript.
2. The alt text for each of the thumbnails is read by the javascript and used for the little description box.
3. I used jQuery. The point is more that I used a javascript library than which one I used - but jQuery certainly worked well!

When creating my news ticker plugin, I came across a slight complication when using setTimeout() to calling a function which needed parameters passed to it.

Not having had much call to use setTimeout in the past, I simply put:

setTimeout(myFunction(parameter),myTimeout);

but that doesn’t work. An apparent solution (until tried in Internet Explorer) is:

setTimeout(myFunction,myTimeout,parameter);

It wasn’t as easy as I expected to find out how to get around this, but it turns out that all is needed is a “closure”:

setTimeout(function(){myFunction(parameter)},myTimeout);

Wanting to create a news ticker along the lines of that used on the BBC news site, I took a look around for a handy plugin to do it, but with no success. So… I created my own, as a jQuery plugin.

A quick sample of how to use it follows, or you can see the news ticker in action. Continue reading BBC style news ticker

I’ve been having a lot of fun with jQuery recently. One of the things particularly easy to do with it is write nice and unobtrusive javascript (a good start when looking at progressive enhancement). This is largely down to the fact that it’s very easy to find particular elements within the DOM - with any level of specificity - and attach behaviour to them.

On the site I’ve been building at work, one particular example was to get jQuery to write in the “Print page” link, since that needs javascript.

// add print page link - since it can only work for JS, only add it for JS users
$('<li></li>') // create list item
    .addClass('print') //add relevant class to it
    .append('<a href="javascript:window.print();">Print this page</a>') //put in the link
    .insertBefore('li a.foo'); //add before the li item with link of class 'foo'

The above example is slightly more verbose than it need be, but it illustrates some of the different built-in functionalities of jQuery quite well.
Continue reading Progressive enhancement with jQuery