Daily Archives: Tuesday 26/01/2010

Highlight a Table Row using jQuery CodeUnit 26 JAN 2010

Using jQuery to highlight a table row on mouse over is pretty simple to achieve, and today I’ll quickly demonstrate how you can achieve this neat effect using the addClass and removeClass jQuery functionalities.

First, you need to define your CSS style to be applied to the row you are hovering over, picking out some CSS attributes that you wish to manipulate. In our case, we’re going to be changing the background-color property and thus our CSS style entry looks like this:

.datahighlight {
        background-color: #ffdc87 !important;
}

Next, we force all the rows in our table to be a member of a specific class:

Text Row to be highlighted

Finally, we apply the jQuery code:

      $(document).ready(function(){
		$('.simplehighlight').hover(function(){
			$(this).children().addClass('datahighlight');
		},function(){
			$(this).children().removeClass('datahighlight');
		});
      });

As you can see, all the jQuery magic is doing on mouse over of any element with the class ‘simplehighlight’ applied is adding a class ‘datahighlight’ to all the child elements of that selected element (the one being hovered above), in our case those being the actual cells of the row. Seeing as the !important rule is applied to the simplehighlight definition, those cell backgrounds are forced to the new color definition, giving the appearance of a row highlight.

On mouse out, the datahighlight class is removed, forcing all of the child elements (once again our cells) to return to their normal background color schemes.

It’s simple, easy to implement, and highly effective, as shown by the example below:

Ultimate Bobotie Showdown! My Life 26 JAN 2010

Seeing as we hadn’t done it for quite a bit, last Thursday evening Chantelle and I invited our two sets of folks over for supper with us in Gordon’s Bay, with Chantelle eagerly piquing her mom’s interest by declaring it to be a bobotie evening for a change.

Now for those of you who don’t know, bobotie has traditionally been one of those age old disputes between Chantelle and Cheryl, with each claiming that theirs is by far better than the other’s, meaning that this was at last a great setting to try and settle this feud once and for all.

(And what better timing than just before each is to submit their bobotie recipe to the Sarie’s SA’s Best Bobotie Competition anyway?)

Luckily for her, Chantelle just happened to be off on Thursday, thus giving her plenty of time to prepare the pad and cook up her storm in a pyrex dish, meaning that by the time I got home everything was pretty much done and all that was needed now was the arrival of the parentals – who naturally, well… arrived.

Plenty of wine, chatter and catching up led us eventually all the way through to dinner time and once again Chantelle had completely outdone herself, as proved by the lovingly taken table shot second from the bottom in the list of photos below. Seeing as it was such a beautiful evening once again, we ate supper with half of us outside and half inside, but with all the doors flung wide open in order to capture the best of the weather while Gordon’s Bay reigned in its infamous wind for a change.

Once sated and all sitting with a big grin on our faces, Chantelle promptly announced that it was time for the taste-testing challenge to commence and hauling out Cheryl’s sample which had co-incidentally been baked the previous evening for the Montgomery clan supper, she set about digging out her sleeping mask and creating the anonymous samples which she then duly administrated in a blind taste test setup to each and every one of us present, including Cheryl herself.

Now to cut a story short, Chantelle took the honours in a very one-sided 4 votes to 1 showing, with the single vote for Cheryl’s bobotie coming from Cheryl herself, all of which lead to a ridiculously funny victory dance from Chantelle and a sigh from Monty who realized that sleeping on the couch once back home was now very much a rather strong possibility.

Needless to say, I was rather proud of my wifey! :)

(Not that she was quite finished yet mind you. After all the victory celebrations, out came the coffee and cake, the cake being one of the most richest, most decadent chocolate cakes I’ve yet to come across, a cake that quite simply belongs on one of those glass platters sitting there in an exclusive little coffee shop at the top of Kloof street. It was seriously that good!)

Chantelle showing off her skills in the kitchen

The world's most decadent chocolate cake, fit for kings and a most worthy dessert item. Truly you could only manage a single piece of this rich monster...

The evening's bobotie-centric spread - I don't think anyone could disapprove.

A closeup of the bobotie dish that was to once and for all, settle the age old dispute between mother and daughter as to whose bobotie was the best! Naturally the daughter took it! :)