FYI I don't post here often. For more regular updates see long-winded explanation here.

WIP—Rise of the Red Dragon

A Work In Progress. Feedback welcome (here or on soundcloud), be gentle 😉

Part two of a two (or three) part suite loosely themed around the conflicted nature of a fallen angel. Mostly just an excuse to play with MIDI and VIs!

Posted in

Music

I’ve always loved music. I spent a lot of time playing music when I was younger. I studied it at uni (majoring in composition), then changed focus to IT and haven’t written a dot since. Until recently…

After a long break I’ve been getting back into composition, but in a much more organic way than I have before. While studying composition, I felt a (real or imagined) expectation that I’d output sophisticated, intellectual, original, contemporary art music. Which was frankly quite stifling!

I don’t feel like I ever really ‘found my voice’ as a composer. I intend to work my way (slowly) towards that now. Along the way I’m likely to output much that is derivative of in homage to those who inspire me musically (sure to talk about them here in future).

I will post bits and pieces here as I work on them. Always happy for feedback, ideas or advice.

Posted in

Get the text within an element—including alt text—using jQuery

When working on the butterfly lightbox I needed a way to grab the text with a link including the alt text from any images within.

I couldn’t find any existing approaches, so I put together this small plugin to do the job. I thought I should post it here before I forget, or in case anyone else might find it useful too.

Example

If you had the following html:

<a id="smiley" href="">The symbol for happiness is <img src="smiley.png" alt="a smiley face" /></a>

You could grab the accessible text using the jQuery plugin like this:

$('#smiley').accessibleText();

Which would return the text ‘The symbol for happiness is a smiley face‘.

Plugin code

/**
 * jQuery plugin that returns the text nodes within the target element, combined/concatenated 
 * with any alt text or input values.
 */
$.fn.accessibleText = function() {
	if (this.is('img')) {
		return this.attr( 'alt' );
	} else if (this.is('input')) {
		return this.attr( 'value' );
	} else {
		return $.map( this.contents(), function( domElement ) {
			if ( domElement.nodeType === 3 ) {
				return domElement.data;
			} else if ( domElement.nodeType === 1 ) {
				var $element = $( domElement );
				if ( $element.is( 'img, imput' ) || $element.find( 'img[alt], input[value]' ).length > 0 ) {
					return $element.accessibleText();
				} else {
					return $element.text();
				}
			}
		}).join( '' );
	}
};

Let me know if you found this useful, or if you know of a better solution!

Edit: Much improved version above, thanks to Ben!
Edit again: I have updated it again to support input elements, and support using the plugin on inputs and imgs directly (this should really go on github).
Final edit: Here it is, accessibleText on github.

Posted in

Butterfly lightbox, now with gallery support

By popular demand (thanks Ray) the butterfly lightbox has been extended with new functionality.

The biggest new feature is the addition of support for galleries. Specify a gallery using either a container element to wrap the related links, or by using the same rel attribute on related links allows a series of lightbox links to work together, with ‘next’ and ‘previous’ controls presented beside the lightbox content to allow navigation between each gallery item.

Try it out here:

See full examples, downloads and changelog for more detail.

Posted in

Cached images have no width or height in webkit (e.g. Chrome or Safari)

Stackoverflow (SO) has always been a handy resource. Today I noticed a particularly valuable comment with 0 votes.

I created an SO account with the explicit purpose of voting this comment upwards, but unfortunately, I have no reputation on SO, and am not able to do this (yet).

For lack of a better way to credit JKS for his insightful solution I thought I’d recognise it here.

Problem

In webkit browsers (e.g: Chrome or Safari) the onload event fires for both cached and non-cached images, but images loading from cache seem to return dimensions of 0—for both width and height.

Solution

JKS proposes a simple solution, a seemingly redundant setTimeout before taking your measurements seems to magically restore cached image dimensions. In jQuery, that would look like this:

$('img').load(function(){
    setTimeout(function(){
        // do something based on $('img').width and/or $('img').height
    }, 0);
});

Thanks

Thanks again to JKS for the tip!

Posted in