Posts tagged jquery

No more re-binding with jQuery 1.3

Jan 26th

Posted by Paul in jquery

No comments

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

Oct 1st

Posted by Paul in jquery

2 comments

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

,
Demo picture

Improving table usabiltity with jQuery

Jul 25th

Posted by Paul in jquery

No comments

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