jQuery.linkify

Download uncompressed (JS 6.93 kB) or minified (JS 3.30 kB).

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

.linkify {}
.linkify:link {}
.linkify:visited {}
.linkify-focused:link {}
.linkify-focused:visited {}
.linkify-sub-focused:link,
.linkify-sub-focused:visited {}
.linkify .linkify-was-nth {}
.linkify .linkify-sub:link {}
.linkify .linkify-sub:visited {}

$(function()
{
	$('.demo-1 .section').linkify();
});

.linkify {display:block;padding:1px 24px 9px 24px;margin:12px 0;border:1px solid #b3b3fa;background-color:#fff;}
.linkify:link {color:#000;}
.linkify:visited {color:#000;border:1px solid #ccbadc;}
.linkify-focused:link {background-color:#eaeaff;border:1px solid #6666f5;}
.linkify-focused:visited {background-color:#f6ebff;border:1px solid #9976b9;}
.linkify-sub-focused:link,
.linkify-sub-focused:visited {background-color:#F0FFEB;border:1px solid #76B97F!important;}
.linkify .linkify-was-nth {}
.linkify .linkify-sub:link {}
.linkify .linkify-sub:visited {}

<div class="section">
<h3><a href="http://jquery.com/" title="Write less, do more with jQuery.">jQuery</a></h3>
<p>Write less, do more. Check out the <a href="http://docs.jquery.com/">jQuery documentation</a>. <a href="http://jquery.com/">Read on</a></p>
</div>

<div class="section">
<h3><a href="http://refresh-sf.com/yui/" title="Compress Javascript.">Online JavaScript/CSS compression using the YUI Compressor</a></h3>
<blockquote><p>The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint.</p></blockquote>
<p><cite><a href="http://developer.yahoo.com/yui/compressor/">Yahoo! UI Library: YUI Compressor</a></cite></p>
</div>

$(function()
{
	$('.demo-2 .section').linkify({
		focus: function(e)
		{
			$(this).stop();
			var style = $(this).attr('style') || '';
			$(this).removeAttr('style');
			var border_colour = $(this).css('borderLeftColor');
			var background_colour = $(this).css('backgroundColor');
			$(this).attr('style', style)
			.animate({backgroundColor: background_colour, borderTopColor: border_colour, borderRightColor: border_colour, borderBottomColor: border_colour, borderLeftColor: border_colour}, {duration: 10, queue: false})
			;
		},
		blur: function(e)
		{
			$(this).stop();
			var style = $(this).attr('style') || '';
			$(this).removeAttr('style');
			var border_colour = $(this).css('borderLeftColor');
			var background_colour = $(this).css('backgroundColor');
			$(this).attr('style', style)
			.animate({backgroundColor: background_colour, borderTopColor: border_colour, borderRightColor: border_colour, borderBottomColor: border_colour, borderLeftColor: border_colour}, {duration: 800, queue: false})
			;
		},
		sub_focus: function(e)
		{
			$(this).stop();
			var style = $(this).attr('style') || '';
			$(this).removeAttr('style');
			var border_colour = $(this).css('borderLeftColor');
			var background_colour = $(this).css('backgroundColor');
			$(this).attr('style', style)
			.animate({backgroundColor: background_colour, borderTopColor: border_colour, borderRightColor: border_colour, borderBottomColor: border_colour, borderLeftColor: border_colour}, {duration: 100, queue: false})
			;
		},
		sub_blur: function(e)
		{
			$(this).stop();
			var style = $(this).attr('style') || '';
			$(this).removeAttr('style');
			var border_colour = $(this).css('borderLeftColor');
			var background_colour = $(this).css('backgroundColor');
			$(this).attr('style', style)
			.animate({backgroundColor: background_colour, borderTopColor: border_colour, borderRightColor: border_colour, borderBottomColor: border_colour, borderLeftColor: border_colour}, {duration: 200, queue: false})
			;
		}
	});
});

.linkify {display:block;padding:1px 24px 9px 24px;margin:12px 0;border:1px solid #b3b3fa;background-color:#fff;}
.linkify:link {color:#000;}
.linkify:visited {color:#000;border:1px solid #ccbadc;}
.linkify-focused:link {background-color:#eaeaff;border:1px solid #6666f5;}
.linkify-focused:visited {background-color:#f6ebff;border:1px solid #9976b9;}
.linkify-sub-focused:link,
.linkify-sub-focused:visited {background-color:#F0FFEB;border:1px solid #76B97F!important;}
.linkify .linkify-was-nth {}
.linkify .linkify-sub:link {}
.linkify .linkify-sub:visited {}

<div class="section">
<h3><a href="http://jquery.com/" title="Write less, do more with jQuery.">jQuery</a></h3>
<p>Write less, do more. Check out the <a href="http://docs.jquery.com/">jQuery documentation</a>. <a href="http://jquery.com/">Read on</a></p>
</div>

<div class="section">
<h3><a href="http://refresh-sf.com/yui/" title="Compress Javascript.">Online JavaScript/CSS compression using the YUI Compressor</a></h3>
<blockquote><p>The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint.</p></blockquote>
<p><cite><a href="http://developer.yahoo.com/yui/compressor/">Yahoo! UI Library: YUI Compressor</a></cite></p>
</div>

Features

• A section becomes a link based on the first found section link
• Section text remains selectable
• Right-click and middle-click work
• Classes created as hooks for styling
• Callback functions for event control

Options

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

// All available options set to their defaults.
$('.section').linkify(
	{
		// The linkify class name.
		linkify_class: 'linkify',
		
		// Set whether a focus class is used. Class name will be [linkify_class]-focused.
		add_focus_class: true,
					
		// Set whether a focus sub class is used. Class name will be [linkify_class]-sub-focused.
		add_sub_focus_class: true,
					
		// Set the nth link to use.
		link_index: 0,
		
		// Replace nth link.
		replace_nth_link: true
	}
);

Similar plugins