Why jQuery?

Yes, it is not that difficult with css. Just declare some classes and give background images then assign that class to the links as required. Then why we need jQuery. The answer is, for simplicity. Who ever entering the content should be cautious to add the right classes for the right links. Also adding classes are difficult in a blog platform – you will need to switch to HTML view instead of the editor view.

Using jQuery we’ll make sure that the right icon is showing for a particular link.

Step 1 – Find the right icons

Getting a free icon describing your file type is easy. You might need to search for free icon sets, or better search in any of the three following icon search engines. For eg: search for the term “pdf” and you will see a lot of images in different dimensions, select the one that suits your need. Just make sure you’re not using a copyrighted icon

1. Icon Look – http://www.iconlook.com
2. Icon Let – http://www.iconlet.com
3. Icon Finder – http:www.iconfinder.net

Here I am using five icons – One for pdf files, one for txt documents, one for zip files, one for email links and one for external links. You may add any number of icons for any file type as I am going to describe in the next sections.

I’ve selected icons of 16px in size because it look better in content. If you need large icons, you will need to use the css display:block property.

CSS styles

Now we’ve have the right icons. Now we need to add classes with background image.

a.pdf { /*The background image*/
	background: url(images/pdf.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px; /* To center the text vertically with the icon */
}
 
a.txt { /*The background image*/
	background: url(images/txt.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.email {
	background: url(images/email.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.external {
	background: url(images/ext_link.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}

Eg:

 
.download a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	height: 48px;
	padding-left: 55px;
	line-height: 48px; /* Center the text vertically with image */
	vertical-align: bottom; /* to align the text with image bottom, line height property required */
	display: block; /* Need this to show the images fully */
	float: left; /* You might need this as well for aligning it with the parent element */
}

JQuery

Now, we can write the jQuery statements.

$(document).ready(function() {
 
 
	// Add pdf icons to pdf links
	$("a[href$='.pdf']").addClass("pdf");
 
	// Add txt icons to document links (doc, rtf, txt)
	$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
	// Add zip icons to Zip file links (zip, rar)
	$("a[href$='.zip'], a[href$='.rar']").addClass("zip"); 
 
	// Add email icons to email links
	$("a[href^='mailto:']").addClass("email");
 
	//Add external link icon to external links - 
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external");
	//You might also want to set the _target attribute to blank
	/*
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external").attr("target", "_blank");
	*/
});

For determining the links, we’re using jQuery’s attribute syntax. For eg: To identify PDF links, we check whether the href attribute ends with a ‘.pdf’ extension.

To find external links we’ll compare the anchor tag’s host name with the location host name

Do not copy paste from the above code. It is formatted for viewig. Please download the full source code at the end

demo
It will look like the below image. For an actual demo check the below links.

Demo & Download
Demo
Download full examples (24 KB)

Related posts:

1. Vertical alignment of contents inside an element using jQuery One of the old problems! Vertical alignment of contents inside...
2. Building a reusabe font size controller interface using jQuery Most of the web2.0 design allows the user to change...
3. Make curved corners with jQuery Corner plugin If you want a curved edge for your element, the...

Related posts brought to you by Yet Another Related Posts Plugin.