Improving table usabiltity with jQuery

I’ve often found reading information quickly and correctly from a large HTML table difficult. I would like to share a small piece of jQuery code I wrote to help improve the readability of large tables. It provides two functions. Highlight the row of the table on which the mouse is hovered over and highlight the row if clicked on it. Row highlighting allows you to easily track the correct line across the screen while click highlighting enables you remember a particular spot of interest.

All this requires is the latest version of jQuery (version 1.2.6 included in the demo download) and to past in the code provided. You also need a bit of knowledge of HTML and CSS to implement in your own web site.

Download (16kb Zip)

See the Demo

Code

$(document).ready(function(){
	// improve table usability
	$("table").find("tr").hover(function(){
		$(this).addClass("rowhighlight");
	},function(){
		$(this).removeClass("rowhighlight");
	});
 
	// Add class on single click
	$("table").find("tr").click( function() {
 
		if($(this).attr("class") == "rowhighlight_clicked rowhighlight"){
			$(this).removeClass("rowhighlight_clicked");
		}else{
			$(this).addClass("rowhighlight_clicked");
		}
	});
})

Essential Free PHP Web Development Tools

As a PHP web developer I’ve tried many different tools to aid my work. There are many tools out there to try and I encourage you to do so, but I have complied a list of what consider essential to make your job as easy as possible. If anyone has any useful tools/sites I haven’t listed let me know.

PHP

xampp - A cross platform web server including PHP and MySQL along with other tools such as Perl. Easily installs on a Windows machine (though it is cross platform), I recommend the lite version and install it on USB pen for portability.

phpMyAdmin - A web based tool for administrating MySQL databases, makes setting them up easy. The new version even includes a query builder. This is included with xampp just go to  http://localhost/phpmyadmin.

Zend Framework - A open source object oriented PHP5 framework. Contains easy to use classes to create a modern web app. Has support for many web services such as flickr and Google.

phpclasses - This a web site with a massive database of PHP classes. Always look her first as its probably already been done to a high standard.

Web browsers

FireFox 3.0 - An open source web broswer that supports loads of useful plugins for web developers. Not to mention generally how much better it is then any other.

Web Developer - One of the best FireFox plugins ever made. Contains a massive array of tools to help you develop your web site. From window resizing to editing CSS on the fly. Just try it!

IE Tab (Windows only) - A plugin for FireFox that allows you easily to switch your browser window to the Explorer rendering engine. As this is the most widely used browser you have to check your app works in it.

Multiple IE (Windows XP only) - A great little download that gives you old Internet Explorers (6.0, 5.5, 5, 4, 3) to try your site in. If you like me and upgraded to IE7, how do you check your site in IE6, many people still use it. Pity it doesn’t work on Vista.

Safari - Some people use this as a web browser, I guess now its available on windows you could check your site works in it

Text Editors

notepad++ - A free cross platform text editor with useful add-ons such as code highlighting for every language imaginable.

Other web tools

X Ray - Just add it to your bookmarks and you ready to go, click it, it loads then you can click any element on a page and it will show you the ‘CSS box model’. Very useful when your having pixel problems.

Browser Shots - Check you new web site in every browser known to man on any platform in one go. Warning: it doesn’t always return everything you ask for and it can take a while.

FireFtp - A FireFox plugin, a simple and realiable FTP program, can manage multiple accounts.

JavaScript & Ajax

Firebug - A plugin for FireFox, before this you would go mad debugging your JavaScript with nothing to go on. This provides full details on all errors and detailed information on Ajax requests. I also use it to be nosey on other web sites to see how they work.

JQuery - A fast lightweight JavaScript framework. Makes Ajax and HTML manlipation very easy for a modern 2.0 app.

Interface for jQuery - An additional set of jQuery plugins that provide a mass of additioal functionality for jQuery.

UI for jQuery - More plugins for jQuery that provide more for jQuery. I believe that interface and UI are being merged.

Visual jQuery - The doucmentation for jQuery can be a little rubbish, this web site lays it out in a simple format to effectivly use it.

Jabroo - Server problems

Users of Jabroo.com will of experienced server problems for the last week (29th June 08 - 3rd July 08). Unfortunately the server has been down due to some technical difficulties with upgrading from a Godaddy VPS to a newer faster server. Please accept my apologies for any problems. Some has data has been lost as my backup was a good month old.

The good news is that it is on a much better server and no doubt you will have noticed it is much faster and more reliable thanks to Centation. Also problems with signing in and some broken images have been solved.

Soon the third version of Jabroo will be available to try out. Hopefully it will be realised in the next month or so.