Many times we need to show different icons for different files - mostly when files are being uploaded from various members.
Here's what we are trying to do:
Normally, it can be done with PHP, i.e. assign CSS classes dynamically, but that is way too inefficient after jQuery showed me the new method.
So, how to do it with jQuery ?
Given this snippet:
-
<div class="attachment"><a href="http://www.gigapromoters.com/blog/file.doc">mydocument.doc</a> <a href="http://www.gigapromoters.com/blog/file.pdf">mypdf.pdf</a> <a href="http://www.gigapromoters.com/blog/file.png">myimage.png</a> <a href="http://www.gigapromoters.com/blog/file.txt">mytext.txt</a></div>
1. Lets define CSS, and put icons in required directory.
Here's the css which I'll be using:
-
div.attachment a
-
{
-
color: black;
-
font-weight: bold;
-
padding-left: 32px;
-
display: block;
-
height: 25px;
-
padding-top: 6px;
-
-
}
-
.pdf
-
{
-
background: url('pdf.png') no-repeat;
-
background-position: 5px 50%;
-
}
-
.doc
-
{
-
background: url('doc.gif') no-repeat;
-
background-position: 5px 50%;
-
}
-
.txt
-
{
-
background: url('text.gif') no-repeat;
-
background-position: 5px 50%;
-
}
-
.img
-
{
-
background: url('img.png') no-repeat;
-
background-position: 5px 50%;
-
}
2. Now, we need to write Javascript using jQuery so our files get their respective class names in order to assign different icon for different file types.
$('div.attachment a[@href$=pdf]').attr('class','pdf');
using selector to find all the 'a' tags where attribute 'href' end with 'pdf'.. simple enough ? as soon as selector does it work and return the matched elements, we assign to 'class' attribute, the value 'pdf'.. and done..! So, we can complete this for the rest of file types.
-
$(document).ready(function() { //as soon as jQuery is initialized after page load
-
-
$('div.attachment a[@href$=pdf]').attr('class','pdf');
-
$('div.attachment a[@href$=doc]').attr('class','doc');
-
$('div.attachment a[@href$=txt]').attr('class','txt');
-
$('div.attachment a[@href$=png]').attr('class','img');
-
}
$('div.attachment a[@href$=png]').attr('class','img');
This can improved to support multiple file types like jpg, jpeg and others, but I didnt go into much depth... If anyone already knows, I would love to see that trick.
- Abhimanyu Grover