Tuesday, January 09, 2007
Adding CSS icons to links automatically
Many times, developers come across the need to link to "non-web" documents. This would include .pdf, .xls, .doc, etc... files. What has become a common theme is highlighting the hyperlink by adding an icon next to it showing the user what to expect. In other words, if the hyperlink goes to a .pdf, show a small .pdf icon next to the link.
This can be easily done with CSS through a class:
a.application-pdf {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
application-pdf.gif is a small icon. You can see how it looks at: http://admissions.unl.edu/diversity/nationalhispanicvisit.asp
This requires a class to be provided on the link:
<a href="xyz.pdf" class="application-pdf">The year-end financial report</a>.
This works great, but wouldn't it be better if we didn't have to put this class in every time we created a link to a .pdf?
Through CSS, you can use selectors to automatically add the icon image. I won't go into the details, the gurus over at Ask the CSS Guy have done that already. It looks like this:
a[href $='.pdf'] {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
However, this only works in IE7, Firefox and Safari. This leaves out a major population of IE6 and lower users who haven't upgraded (through my experience of IE7, I can't blame them). So I got to thinking, how can we make this better?
Enter jQuery. I love to find ways to use jQuery in my applications. When it comes to using Javascript, jQuery is the way to go!
What if we used jQuery to setup a rule to work only for IE6 and lower users that will add the icon? With that in mind, this is what I came up with:
$(document).ready(function() {
/*@cc_on
@if (@_jscript_build < 8832)
$("a[@href$='.pdf']").addClass("application-pdf");
/*@end
@*/
});
Basically what this does is determine if the broswer is IE6 (@_jscript_build < 8832), finds all links which end with ".pdf" and then add the "application-pdf" class to the A tag.
In the CSS, I have combined the use of the CSS selector and the original class definition:
a[href $='.pdf'], a.application-pdf {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
The same would work for any other document type, all we would need is another icon, the class definition and a line in the jQuery function.
With the combination of CSS and jQuery, we now an automatic way of adding icons next to each of our links to "non-web" documents. This won't work for user's without JavaScript, but it is still accessible. I figure I'll probably miss some .pdf links anyhow, so the payoff is about the same.
Comments
Posted By: Nik on Thursday, June 28, 2007 @ 12:09:00 PM
Posted By: 3stripe on Saturday, July 14, 2007 @ 8:11:00 AM
Posted By: Rob on Wednesday, October 17, 2007 @ 2:17:00 PM
Posted By: Guru on Wednesday, August 05, 2009 @ 5:42:00 AM
Posted By: Allie28House on Tuesday, April 13, 2010 @ 8:11:00 AM
Posted By: wedding on Thursday, July 15, 2010 @ 1:54:00 AM
Posted By: deexu on Thursday, July 15, 2010 @ 11:30:00 PM
Posted By: 传奇私服 on Wednesday, July 28, 2010 @ 9:54:00 AM
Posted By: DSDSD on Wednesday, July 28, 2010 @ 8:37:00 PM
Posted By: dolce gabbana belts on Thursday, July 29, 2010 @ 12:01:00 AM
Posted By: dior mens belt on Thursday, July 29, 2010 @ 7:36:00 PM
Posted By: tiffany on Wednesday, August 04, 2010 @ 1:54:00 AM
Posted By: dress on Wednesday, August 04, 2010 @ 2:02:00 AM
Posted By: icemi on Wednesday, August 04, 2010 @ 3:39:00 AM
Posted By: icemi on Wednesday, August 04, 2010 @ 3:39:00 AM
Posted By: 传奇私服 on Wednesday, August 04, 2010 @ 9:00:00 AM
Posted By: dulala on Friday, August 06, 2010 @ 12:04:00 AM
Posted By: pndglobal on Wednesday, August 11, 2010 @ 12:16:00 AM
Posted By: mivpl on Sunday, August 15, 2010 @ 4:45:00 AM
Posted By: 11 on Monday, August 16, 2010 @ 8:43:00 PM
Posted By: louis on Wednesday, August 18, 2010 @ 3:08:00 AM
Posted By: ugg on Thursday, August 19, 2010 @ 6:02:00 PM
Posted By: Marathi messages on Monday, August 23, 2010 @ 3:54:00 AM
Posted By: mivpl on Monday, August 23, 2010 @ 4:55:00 AM
Posted By: cheap clothing on Monday, August 23, 2010 @ 6:22:00 AM
Posted By: Shopping mall P90X ( Tony Horton) Now Only $59.90 on Wednesday, August 25, 2010 @ 5:54:00 AM
Posted By: look4wholesaler on Wednesday, August 25, 2010 @ 6:28:00 AM
Posted By: Lip gloss 2010 on Monday, August 30, 2010 @ 6:06:00 AM
Posted By: abcweightloss on Friday, September 03, 2010 @ 4:11:00 AM