One of the things I like to do as standard is to add a nice little pdf logo to any pdf links. This allows users to quickly see that there is something a little bit special on the page and attracts the eye to content. This code will automatically update any pdf links without any further intervention from you. It’s useful if you’re using a CMS with content you don’t control yet want to define the style nicely.
Using jQuery, I add a class to any links with the extension ‘pdf’ using the following code. This can be placed before the </head> tag on your page.
// add class of pdf to links that end in pdf and open in a new window$(document).ready(function() {
$(“a[href$=pdf]“).addClass(“pdf”);
$(‘a[rel="external"]‘).click( function() {
window.open( $(this).attr(‘href’) );
return false;
});
});
Then in the css file for my site I add the following class assignment
.pdf {
background: url(../images/pdf-icon.gif) 100% 50% no-repeat;
padding-right: 28px;
}
We then receive the nice effect below. (You may right click the pdf image and use it for yourself)
Download Report Here