Confused.com Style jQuery Row Highlighter
So that website Confused.com has a new feature that they have coined the highlighter, very original. It is quite impressive though. It allows you to highlight all the rows that match a certain criteria. Seeing as confused.com is a insurance comparison website it would allow you to highlight the insurers that will give you no claims discount or other such things. I think you get my drift. Here is how to do that sort of effect with jQuery.
A little bit Of CSS
First we need a bit of CSS to highlight our items. I’ve just made a simple CSS class as follows. I’m not going to explain it because it shouldn’t really need explaining. 😉
|
1 2 3 |
.lightit { background:red; } |
A little bit of HTML
Normally this would probably be generated by the server using PHP, ASP or whatever. For this example though I’m going to use some static information. You need to place the information into a *shock* Table *shock* which is perfectly fine because it’s tubular data. Of course this will work without the table, but you might need to tweak the CSS a little to make it look nicer, but this effect is mainly aimed at tubular data which is normally held in a table.
Before we get to the table though we need a form for the checkboxes that you press to make the highlighter highlight. Here is what I used:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form id="genre_selector"> <label>Folk: <input type="checkbox" name="folk" id="folk" /> </label> <label>Rock: <input type="checkbox" name="rock" id="rock" /> </label> <label>Pop: <input type="checkbox" name="pop" id="pop" /> </label> <label>Indie: <input type="checkbox" name="indie" id="indie" /> </label> </form> |
I’ve gone for a list of singers/bands because I’m obsessed with music. So I’m making a genre highlighter that highlights the artists that sing that certain style of music. One thing to note about the form is that the ID attribute of the inputs must match the classes placed in the coming table rows since that’s how the matching works. You can use shorthand or abbreviated versions of your criteria I’m just using the full version for visual impact during the tutorial.
So next is that table. Here is my example, remember to look out for what I was saying about the ID’s of the inputs matching the classes used in the table rows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table id="highlighter_table"> <tr> <th>Artist</th> </tr> <tr class="folk"> <td>KT Tunstall</td> </tr> <tr class="rock"> <td>Ash</td> </tr> <tr class="rock"> <td>Muse</td> </tr> <tr class="pop"> <td>Girls Aloud</td> </tr> <tr class="pop"> <td>The Saturday's</td> </tr> <tr class="indie"> <td>Ladyhawke</td> </tr> </table> |
As you can see it’s a very simple table & you would have a lot more info in it that I have, but this is just an example. Now that all the HTML is done we can get on with the jQuery. 😉
That jQuery Magic
|
1 2 3 4 |
<script src="http://google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> |
That little gem is Google’s javascript API. It allows you to grab the latest version of many different javascript frameworks from Google. I use it on my localhost to stop me having to download all the different frameworks but I guess you could use it on a production site. Just remember if Google go down (as unlikely as that is) then your framwork stops working & your javascript code stops working too.
Anyway onto the javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { //check to see if any checkboxes are already checked. Turn them all off it they are. if($('form#genre_selector input:checked').length > 0) { $('form#genre_selector input:checked').attr('checked', false); } $('form#genre_selector input[type=checkbox]').each(function(i) { window['light'+i] = false; $(this).click(function() { if(window['light'+i] == false) { genre = $(this).attr('id'); $("table#highlighter_table tr."+genre).addClass('lightit'); window['light'+i] = true; } else { genre = $(this).attr('id'); $("table#highlighter_table tr."+genre).removeClass('lightit'); window['light'+i] = false; } }); }); }) |
Ok, first is just a little check to see if any of the checkboxes are checked when the page is loaded. Sometimes if you refresh the page the checkboxes that have been checked remain checked, this stops that. Remember to change the form#genre_selector to whatever your form is called.
Next, again remember to change that forms ID, we target the inputs in the form with a type of checkbox & use each to apply a function to each one. Placing that i in the function assigns the current loop number to that variable. Next we creat a global variable called light followed by the current loops number and assign it to false.
Next we make an click event to trigger when the checkboxes are clicked. If the global variable light, followed by the loop number, is false when the checkbox is clicked we need to make the highlight appear. So we grab the ID of the checkbox using the attr('id') function assigning it to genre (you can customise that), then we select the tr in the table with a class the same as the current value of genre (remember to change that if you customised genre). Then we set that global variable to true. The rest is exactly the opposite & turns off the highlight & sets the global variable to false. This is only ran if the highlight is on when the checkbox is clicked. Remember to change all references to genre, if you want to change that variables name.
If you want a different colored highlight for each group (genre in my case) you can just change both lines that say:
|
1 |
$("table#highlighter_table tr."+genre).addClass('lightit'); |
To:
|
1 |
$("table#highlighter_table tr."+genre).addClass('lightit-'+genre); |
Then make a CSS class for each expected group (genre).
Phew. That was hard to explain. I’m hoping that’s understandable & isn’t a load of gibberish. You can see an example of this by clicking here (it will open in a lightbox). Yes, I know the styling isn’t the best, but I’m not a designer. 😛
If you have any questions feel free to ask. 😉
