Tag Archives: jquery

No more re-binding with jQuery 1.3

With the release of the jQuery 1.3 on the 24th Janurary 2009 see’s the new feature called ‘Live Events’. This goes some way to solve the jQuery problem of creating dom elements on the fly which then have no events bound. Then your normally required to rebind any event handlers to them, resulting another potential large layer of complexity to your code.

Well with Live Events this is no longer required (well for some events anyway). By creating a event handler through a via Live Event it bounds all current and future elements. This gives you the advantage of not having to repeat the events handlers. Some events are excluded: blur, focus, mouseenter, mouseleave, change, submit. Fortunately the most common ones are supported and no doubt all will be supported in the future.

jQuery Live Events Doc

jQuery plugin: popmenu

popmenu is a jQuery plugin that allows you to create simple ‘pop-up’ menu’s like which appear on web sites like play.com. It is currently being used at ikonsports.com.

It has similar functionality jQuery’s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an element that you want to appear when you move off the mouse original element and on to any new element, where ever its located in the DOM.

Parameters

target (DOMElement): This is the element that is to ‘appear’ when the hover event is called.
addStyle (string): Optional. Adds a class to the matched element on hover (of matched element and target). Removed on hover off.
time (int): Optional. Time in milliseconds after a hover off when target element is invisible.
speed (String|Number): Optional. A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation displaying the target (e.g. 1000).
autooff (boolean): Optional. Default is true. If turned on will automatically hide any target elements if visible when a different popmenu is triggered. For example if you pop up menu’s would overlap if they were both visable at the same time it will hide it first.

Example

$('#mybutton').popupmenu({
				target: "#mybutton_menu",
				time: 300 });

Download

Production (944 bytes, packed) v1.0
Development (1.75 Kb) v1.0

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");
		}
	});
})

jQuery Table sorter

While making a e commerce application I wanted the ability to easily sort product and categories by click and drag. Basically to allow the customer to re-order the way their products and categories are displayed. No doubt that you’ve seen application that have numerous “move up” and “move down” buttons that seem to take forever to use and from development point of view cumbersome to do. Of course the other method is to have input boxes with numbers in that can be altered, again cumbersome for both user and designer.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ‘sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

This will give you the following results like this (try dragging the rows):

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});
#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:


Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)