Vertical align with jQuery

Sometimes I need to centre dynamic content vertically within an area. This used to be a doddle with tables, valign=”middle” was all you needed. However, in the world of div tags and css this isn’t acceptable anymore.

So, I figured jQuery must be able to help out - why not, it can do everything else!

HTML

<div class="container">
    <div class="box">Vertical content of unknown height</div>
</div>

CSS

.container { float:left; width:380px; height:380px; }
.container .box { float:left; width:200px; margin-left:90px; }

jQuery

$(document).ready(function(){
    var top = ( $('.container').height() - $('.container .box').height() ) / 2;
    $('.container .box').css('margin-top', top);
});

jQuery: In at the deep end

I’ve been using a little jQuery on sites for a while now but hadn’t had chance to fully get to grips with it. However, I recently landed a project that needed a rich user-experience and after sitting through Neil Middleton’s presentation at Scotch it seemed that jQuery was the obvious choice.

The first place I started was with the jQuery Docs which I found to be mostly well written with some good examples provided. I was also truly amazed at the number of useful plugins available. The two I took advantage of were the jQuery Cycle Plugin and jCarousel. These saved me a lot of development re-inventing the wheel.

I also worked how to do a few things that previously I would have used the ColdFusion AJAX tags for, and it’s just as easy (when you know how) doing it all with jQuery.

All in all I’m pretty pleased with how it all worked out and I’ll definitely be using jQuery to add a little spice to projects in future.

Versions: A new Mac Subversion Client

I downloaded the beta of Versions a few days back and I really like it. It just feels… well.. Mac like. It’s easy to setup Working copy bookmarks, as it calls them, for your existing projects and just links right in.

I still use Subclipse within Eclipse for most things but I find it tends to hang when doing large commits so Versions is a real help.

Well worth a look

More on Railo announcement

Railo 3.1 will be distributed under the LGPL2 license. Professional and Community versions to merge and be hosted at JBoss.org.

JBoss.org provides a home for the development of software in open source by an open community. Including source repository, issue tracking, wiki, forums, etc.

Possible integration with Hibernate - the popular JBoss ORM - JBoss Cache, JBoss Clustering, etc.

Looking at my future hosting requirements I’m keen to see how OpenDB and Railo can perform, not purely based on cost but also as to how extensible they have both now become.

2nd CFML Engine goes Open Source

Sitting in the Railo keynote at Scotch and they’ve just announced that they’re going Open Source with JBoss.org.

Interesting times.

Testing from Blogo

Just trying out a Blogo, a desktop blogging tool for Mac. I know I haven’t been blogging much recently but maybe this could be a way to get some of those quick posts online easily.

It has a nice preview feature and fullscreen mode that hides those other distractions and lets you get on with the post.


WordPress Automatic Upgrade plugin

I don’t seem to get much time for housekeeping tasks and I’ve been meaning to update my WordPress install to the latest version for a while now. While doing so I ran into WordPress Automatic Upgrade plugin. This great plugin does all the hard work for you and provides backups of the old stuff before you start so you’ve no chance of losing anything. :-)

New davidhayton.co.uk launched

Yesterday a new project was released into the wild for David Hayton Limited. This local Peugeot dealership has branches throughout the North West of England and recently expanded to a site in Carlise.

David Hayton

The site was developed with Adobe ColdFusion 8 and MySQL using the Fusebox 5.5 framework. Using the new CF AJAX goodness saved me a lot of development time and makes the site pretty slick. The client has been running the site internally for while and the sales staff are loving it.

Merge Sort an Array of Structures in ColdFusion

After a recent spell of doing lots of prototyping, I’m finally getting back to some proper coding. I have an array of structures that I’d been sorting on a particular key (price) using a quick bubble sort algorithm. However, with real data on the site it was randomly returning errors and proving fairly unstable.

I knew there were better algorithms out there, so I thought I’d try a Merge Sort, and wrote a version in cfscript… posted here for your pleasure :-)

<cfscript>
	/**
	 * Sorts an array of structures using the Merge Sort algorithm.
	 *
	 * @param arr 	 The array to sort. (Required)
	 * @param key 	 Structure Key to sort by (Required)
	 * @return Returns an array.
	 * @author Anthony Cooper (ant@outsrc.co.uk)
	 * @version 1, 8 Feb 2008
	 */

	function MergeSort( arr, key ) {
	    var leftArray = ArrayNew( 1 );
	    var rightArray = ArrayNew( 1 );
	    var result = ArrayNew( 1 );
	    var middle = 0;
	    var i = 0;

	    if ( ArrayLen( arr ) LTE 1 ) {
	    	return arr;
	    }
	    else {
			middle = Ceiling( ArrayLen( arr ) / 2 );
			for ( i = 1; i LTE middle; i++ ) {
				ArrayAppend( leftArray, arr[ i ] );
			}
			for ( i = ( middle + 1 ); i LTE ArrayLen( arr ); i++ ) {
				ArrayAppend( rightArray, arr[ i ] );
			}
			leftArray = MergeSort( leftArray, key );
			rightArray = MergeSort( rightArray, key );
			result = Merge( leftArray, rightArray, key );

			return result;
	    }
	}

	function Merge( leftArray, rightArray, key ) {
		var result = ArrayNew( 1 );

		while ( ArrayLen( leftArray ) > 0 AND ArrayLen( rightArray ) > 0 ) {
			if ( leftArray[ 1 ][ key ] <= rightArray[ 1 ][ key ] ) {
				ArrayAppend( result, leftArray[ 1 ] );
				ArrayDeleteAt( leftArray, 1 );
			}
			else {
				ArrayAppend( result, rightArray[ 1 ] );
				ArrayDeleteAt( rightArray, 1 );
			}
		}
		if ( ArrayLen( leftArray ) > 0 ) {
			result = ArrayJoin( result, leftArray );
		}
		if ( ArrayLen( rightArray ) > 0 ) {
			result = ArrayJoin( result, rightArray );
		}

		return result;
	}

	function ArrayJoin( firstArray, secondArray ) {
		var i = 0;
		for ( i = 1; i <= ArrayLen( secondArray ); i++ ) {
			ArrayAppend( firstArray, secondArray[ i ] );
		}
		return firstArray;
	}
</cfscript>

And here’s how you’d use it…

<cfscript>
	products = ArrayNew( 1 );

	products[1] = { name = "Jacket", price = "2999" };
	products[2] = { name = "Shoes", price = "2199" };
	products[3] = { name = "Slacks", price = "1999" };

	sortedProducts = MergeSort( products, "price" );
</cfscript>

Disclaimer: I’m not claiming this is perfect, and I know it could be improved upon and sort direction etc added. But it was a quick solution to my problem. I’d be interested in others feedback.

Unfuddling my projects

I’m definitely a list person. I find that unless I keep things in order then my productivity goes downhill as I sit and wonder what I’m supposed to be doing rather than actually doing it. Recently I’ve been reading David Allen’s excellent “Getting things Done” book and have been keeping all my tasks and projects in order with the recently released OminFocus. This works really well for day to day things, but isn’t so great at managing client projects as I’m the only one that can see the tasks and it doesn’t provide me with detailed enough information when it comes to billing.

I’ve been using ProWorkFlow for a couple of years for managing projects, CVSDude.com for hosting Subversion offsite, and occasionally Lighthouse Pro for issue tracking. Each one works quite well although I do find myself digging around in ProWorkFlow trying to get out the information that I want. The real problem though is that there’s too many systems. Surely there must be one product that can do all this…

…well, I could use Trac but I just don’t find it user friendly, so there is no way I could get a client to be enthusiastic about it.

So after some more research and reading a blog post by Peter Bell, I too thought I’d try to Unfuddle my projects. So far it’s going well, and I’m really liking the interface. Much more user friendly. I have projects, milestones, issues, notepad (wiki), and a subversion repository all in one place. I can add other developers and clients, and it has a nice shiny “Web 2.0″ interface. Let’s hope it continues to shine.