Blog

SVG jQuery darts board interface

Open interface

 
My brother recently needed a darts board interface that someone could click on.

Now, everyone who's tried using absolute positioning of multiple divs to create some kind of graphical interface knows, its a total nightmare! But one thing I did know, is that making a darts board in Illustrator isn't much different from creating a pie chart : )

I'd also just read a great article by Chris Coyier about using SVG's, but what had really caught my attention at the time of reading was the fact that you could select different paths using jQuery - which was exactly what I wanted! I could do away with rectangular divs with png background images - really important for registering where the user clicked the mouse.

And the best bit of anything Gareth needs doing, it only ever has to work in Chrome! I knocked up the darts board pretty quickly, then named every single layer in Illustrator super neatly and accurately. Check out the finished product here:

http://djave.co.uk/free-svg-dartboard/

 


Ends:

Favicons

I was recently making a favicon for the guys at Twist Media. I bought myself a book recently called The Icon Handbook. Its full of really beautifully crafted icons and gives you a new appreciation for these little poems (to steal the description from the first pages of the book). It covers some of the techniques for getting a full size logo and crunching it down to really small, without losing quality.

Anyway, here is my first attempt at really trying to make the text on a 32x32 icon stand out, before and after:

Before favicon   After favicon

The simplest way to create your own wordpress gallery

Using the wordpress gallery shortcode

Customise wordpress' built in gallery

The wordpress built-in gallery is awesome, but I recently needed to customise it. I came across a very comprehensive tutorial over here shibashake.com, but it just got too complicated.

The gallery function basically outputs some code that looks like [gallery ids="1,2,3"]. I just needed to grab these.

// Remove the shortcode function that is already there
remove_shortcode('gallery');
// Add our new one
add_shortcode('gallery', 'djave_gallery_shortcode');

// Define the new gallery function
function djave_gallery_shortcode($atts) {
	// Define some variables
	global $post;
	$retour;
	// Grab the shortcode atts - the important one here is 'ids'
	// Also, set a default image size
	extract(shortcode_atts(array(
		'id' => $post->ID,
		'ids' => "",
		'image_size' => 'medium',
	), $atts));
	// Turn the ids into an array we can loop over
	$image_ids = explode(",", $ids);
	
	// Loop over the array
	foreach($image_ids as $image_id):
		// Grab each image attachment
		$img = wp_get_attachment_image($image_id, $image_size, false);
		// Add it to the return data
		$retour .= $img;
	endforeach;

	// Return that data!
	return $retour;
}

Wrap tags or divs around images in Wordpress gallery

You can add any styling you like to the gallery inside of that foreach loop - like wrapping the images with divs or adding the captions, and you could even call it a second time if you wanted to add thumbnails or reuse the same images.

jQuery Plugin

A while ago now I created a Flash text cypher for a job I was working on. This seemed a bit out dated, as no one ever used Flash unless you're making a game or a horrible web banner, so I thought I'd update it to use JavaScript rather than ActionScript.

As the functionality seemed pretty generic, I thought rather than just flatly copy the layout of code from the previous version, why not make a jQuery plugin that can have options and be reused, how hard could it be? A couple of tutorials and a couple of hours later I was all done.

Its called djave_cypher, and you call it like any other plugin, so:
$("div#target").djave_cypher();

It will just work, but also accepts the following options:


	// The phrase to cypher (defaults to node's contents)
'cypher_text' : this.text(),
// How many times to cypher before the first solve
'start' : 10,
// How many cyphers between the letters solving
'offset' : 5,
// How frequently (milliseconds) the numbers change
'frequency' : 60,
// which div to act on
'target' : this,
// If set to true, will output to console on complete
'console_log' : false

I also figured it would be a great opportunity to use github, which has always (quite frankly) scared me a bit, but I think I'm gradually starting to get the hang of it. So, if you want to grab the plugin, why not head over to github:

https://github.com/sheepysheep60/Cypher/