Published at 4 July 2008
in 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);
});
Published at 23 June 2008
in jQuery.
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.
