Home & blog  /  2010  /  Jul  /

Spraycan - vandalise your page

posted: 24 Jul '10 10:13 tags: fun, drawing, Javascript, jQuery

This is what Mitya does when he's bored. This allows you - or rather your site visitors - to take a break from reading your blurb and graffiti your page like it was a wall.

Once the ap starts, you paint by clicking and dragging on the screen. A toolbox allows you to pick the brush colour and size.

Click here to vandalise my homepage. I know, I know. I did tell you I was bored.

Head over here to download, get usage info or view a demo.

The only problem is that clicking and dragging always means selecting text. To my mind there's no way around this apart from in IE (which defines a special text select event, whereas in other browsers you can only return false from the onmouseodwn event - not really an option for a script that listens for mousedown to know when to start painting).

One possible fix would be to append brush strokes to a new, invisible canvass rather than to the itself. Then, during painting, calling event.stopPropagation() would ensure the drag action never made it as far as the body's text elements.

2 comments | post new

Table sort update - sorting on child element

posted: 17 Jul '10 13:01 tags: table, sort, animation, Javascript, jQuery, child

The reception to my animated table sort plugin, posted a few weeks ago, has been great. A number of blogs, articles and tweets have featured it.

Some people have asked if it's possible to sort on the content of a child element of each . It wasn't - but it now is, via a new parameter: child, which should be a selector string to match the element.

So if each in column 1 contained a text field, and you wanted to sort on the current values of those textfields, you'd could run:

1$('#example1_table').sortTable({

2     onCol: 1,

3     keepRelationships: true,

4     child: 'input'

5});

It's important that your selector matches only one element per , else the sort will fail. If in doubt, be more specific with your selector, e.g.

child: 'input.mytextfield'

Head over here to download, get usage info or view a demo.

post a comment
^^ top of page

jQuery drop-down selector

posted: 11 Jul '10 13:09 tags: select, drop-down, navigation

UI / UX developers have long wished the built-in , except with links, not options, and allowing you to specify the behaviour of each link (callback? disabled?) and precisely how the drop-down looks.

Head over here to download, get usage info or view a demo.

You call it by running dropdown(linkData), where 'linkData' is an array containing objects that hold data about each link, like so:

1dropdown([

2     {url: 'http://www.yahoo.co.uk', text: 'Yahoo!'],

3     {text: 'Bing', click: function() {

4         alert("Sorry - we're not going to Bing right now");

5     }},

6     {url: 'http://www.google.co.uk', text: 'Google', disabled: true}

7]);

As with everything I write, it's just one file. No dependent HTML or CSS - everything's DOM-scripted by the scirpt and styled within it, too.

post a comment
^^ top of page

Blockster transition effect

posted: 01 Jul '10 12:56 tags: block, transition, effect, rotation, slideshow, Javascript, jQuery

Just posted this in the scripts section. Blockster is a cool transition effect designed for 'featured content' rotators or slideshows, transitioning between slides block by block.

Head over here to download, get usage info or view a demo.

The script gives you full control over how the script behaves, giving you scope to create some pretty varying effects.

You can set the number of rows and cols in the block grid, whether the blocks should fade in or simple appear, whether they should appear randomly or in order, and more.

post a comment
^^ top of page
older posts >