jQuery.linkify

Download uncompressed (JS 9.16 kB) or minified (JS 3.81 kB).

$(function()
{
	$('.section').linkify();
});

Demo

Points

• Section becomes a link based on the first or optionally the nth link
• Text remains selectable
• Classes applied for styling control
  • for visited links
  • for sub links; links with a different uri to the main link
• The title attribute is inherited, except for sub links
• Focus and blur events work in tandem with hover
• Window status is updated with the link uri (status not updated in Firefox unless the Allow scripts to change the status bar option is selected, see How to enable window.status in Firefox)

Styles

The following classes are always applied:

.linkify {cursor:pointer;}
.linkify-visited {}
.linkify-focus {}
.linkify-visited-focus {}
.linkify-focus-sub {}
.linkify-focus-sub:visited {}

When the linkify option is set to true the following classes are applied, class refers to a section element class:

.class-linkify {}
.class-linkify-visited {}
.class-linkify-focus {}
.class-linkify-visited-focus {}
.class-linkify-focus-sub {}
.class-linkify-focus-sub:visited {}

Options

// Use the uri of the second link.
$('.section').linkify(1);

// All available options set to their defaults.
$('.section').linkify(
	{
		// Linkify section classes; Adds .section-linkify etc.
		linkify: true,
		
		// Set the linkify class; .[linkify_class] and .section-[linkify_class]
		linkify_class: 'linkify',
		
		// Adds the focus class; .[linkify_class]-[focus_class] etc.
		focus: true,
		focus_class: 'focus',
		
		// Adds the focus sub link class; .[linkify_class]-[focus_sub_class] etc.
		focus_sub: true,
		focus_sub_class: 'focus-sub',
		
		// Adds the visited class; .[linkify_class]-[visited_class] etc.
		visited: true,
		visited_class: 'visited',
		
		// Sets which link to use.
		link: 0
	}
);

// Omit focus, focus sub and visited classes and use the second link.
$('.section').linkify({focus: false, focus_sub: false, visited: false, link: 1});

Similar plugins