Morrow Studios – personal site of Chris Morrow, Interactive Developer

I recently worked on a wiki at work and wanted to create document icons for links to files without manually adding classes to every link.

Enter jQuery… and voila!

• Word Document
• Excel Document
• PowerPoint Document
• PDF Document
• Zip File Link

The html looks like this:

<ul class="docs">
		<li><a href="#document.doc" alt="">Word Document</a></li>
		<li><a href="#Excel-file.xls" alt="">Excel Document</a></li>
		<li><a href="#Powerpoint-pres.ppt" alt="">PowerPoint Document</a></li>
		<li><a href="#somefile.pdf" alt="">PDF Document</a></li>
		<li><a href="#Archive.zip" alt="">Zip File Link</a></li>
</ul>

The Javascript looks like this:

jQuery(document).ready(function($) {
    $('.docs').find('a').attr('href');
	// Word doc
	$('a[href$=".doc"]').addClass('doc');
	$('a[href$=".docx"]').addClass('doc');
	$('a[href$=".docm"]').addClass('doc');
	// Excel
	$('a[href$=".xls"]').addClass('excel');
	$('a[href$=".xlsx"]').addClass('excel');
	$('a[href$=".xlsm"]').addClass('excel');
	$('a[href$=".xltx"]').addClass('excel');
	// PowerPoint
	$('a[href$=".ppt"]').addClass('ppt');
	$('a[href$=".pptx"]').addClass('ppt');
	$('a[href$=".potx"]').addClass('ppt');
	$('a[href$=".potm"]').addClass('ppt');
	// PDF
	$('a[href$=".pdf"]').addClass('pdf');
	// ZIP
	$('a[href$=".zip"]').addClass('zip');
});

Source code :

Dynamic Document Icons (source code)