Make Your Content Smarter With jQuery
At work today, we were asked by a client to add a link to download Adobe Acrobat onto every page that had a PDF linked on it. Since the site was mostly static, with some content coming from the content management system, we were not interested in adding it to all of the static pages and changing the programming of the CMS output pages.
My co-worker and I decided that the best way to do it would be with JavaScript. Since the site was already using jQuery, our company’s library of choice, it turned out to be quite a simple task. If you just want to get to the code, take a look at the demo.
The Idea
- We add the link to download Adobe Acrobat to the site’s template
- We hide the link using CSS
- We use jQuery to see if there are any links on the page linking to a PDF
- If there are, we use jQuery to show the link
The Execution
Ok, simple enough, just add the link to the source of the document:
<p id="acrobatDownload"><a href="http://www.adobe.com/products/acrobat/readstep2.html">Download Adobe Acrobat to view the PDFs on this page</a></p>Then, hide it with CSS:
#acrobatDownload { display: none; }The jQuery
First, we want to check and see if any of the links on the page end with .pdf. Then, if there are any, we fade in the link:
$(document).ready(function() {
if($('a[href$=.pdf]').length > 0) {
$('#acrobatDownload').fadeIn('slow');
}
});
I have created a demo page with a PDF link on it to see this in action.
Conclusion
I can’t even imagine how much time and hassle we saved ourselves by doing this with JavaScript. Plus, it could provide useful to someone who doesn’t have Acrobat (although I can’t imagine that there are many).
The concept is actually quite simple, and my mind is grinding away trying to think of other ways to use jQuery to do things like this.
Can you all think of anything?
Depending on the CMS you’re using, you could add a snippet of code to the CMS to add the Adobe link if there is a link to a PDF file (this is quite easy to do with the MODx CMS).
Another thought: if you’re using javascript to show the link if there’s a download link, why not use it to actually insert the link?
@Susan I think you are right suggesting that it is probably cleaner and better to implement this on the server side.
If you do decide to implement it on the client however the described is NOT the proper unobtrosive way to do it. If a user has no JavaScript enabled than the link will not show.
I think that there is no unobtrusive way to do this on the client, so I agree with Susan that this should better be implemented on the server.
This could be easily done server-side also, couldn’t it?.
@Susan-
We are using a custom CMS that our company built. Yes, I was considering using JavaScript to write in the link as well, but this makes it easier because it keeps the markup in the template instead of in the JavaScript.
@Susan, @Rob, @Gonzalo-
I really don’t think it’s a problem to not have it show for people without JavaScript. If you think about it, the number of people who don’t have JavaScript enabled and do not have Acrobat is probably a very, very small number too.
Trevor,
You maybe right about it not being a big problem, but there are such people out there.
But consciuously blocking out users will result in an increasing smaller number of these people coming to your site. It is a self fulfilling prophecy.
It’s the same as blocking (not supporting) browser X or Y because only 3.5% of your visitors visit your site. You will see the number go down and you can say that you were right because less and less vistors use browser X or Y.
Your solution is about improving usability or user experience and you must always be very, very careful with that, because you might just lock out some users and at best not make it worse for them.
I think this is a pretty nice little piece of code, particularly for websites that aren’t content-managed and therefore don’t have a server-side option. Why not go the next step and have each PDF link display a notation identifying them as a PDF link? It could be the PDF icon, or text: [PDF].
I’ve had this similar javascript-disabled user discussion many times with myself over the past years, especially since I moved to DC to take a government job in March. I’ve since decided that training oneself to anticipate these needs in advance, rather then just treating them as a non-issue from the get-go, doesn’t usually require any substantial changes in process or application - it becomes second nature before too long. I do think it’s always worth the effort to build in “backups” for any javascript functionality.
For this particular application, I would probably use your very nice jQuery script to implement Ray’s solution above (aside from looking nice, it’s also a usability issue…subtle inline alerts indicating which links point to PDFs are always a good practice) but for javascript-disabled users I do think it’s worth the effort of placing links on each page with PDF links (perhaps encased in if you prefer them not to show to most users). If you’re concerned about page density and the time commitment, a third less desirable option is just placing the text in your footer include (assuming you use include files for your page components) with tags so it appears on all pages only to javascript-disabled users. I know it doesn’t seem like you’d be much better off than leaving it as you wrote it in your post, but training oneself to always at least consider these users is (I think) a worthwhile investment.
jQuery really is a godsend, isn’t it? Prior to jQuery, Javascript client-side coding was just too unproductive for me. Now I do lots of it and it is pretty much just easy.
That said, too bad their isn’t a possibility to create a cQuery; you know a way to encapsulate away all the missing functionality and/or stupid design decisions for that abomination that is CSS. (Sorry, I couldn’t resist. ;-)
@Lauren-
I agree about having things degrade appropriately, as you can tell if you have read some of my previous posts. But in my opinion, adding a link to download Acrobat adds absolutely no value to the page. I mean Acrobat was first released in 1993! If people haven’t heard of Acrobat by now, they probably don’t even know what the internet is. Should we include links to download Microsoft Office too?
Also, I agree about Ray’s solution about adding the PDF icon, but that was not the point of the tutorial, which I why I didn’t include it.
@Mike-
Haha just couldn’t resist could you? jQuery really is amazing. Makes cross browser JavaScript A LOT easier.
It’s unfortunate that people are trying to compare JavaScript frameworks to CSS frameworks; I don’t think they will ever be comparable because of the way that the languages work. But, I will say jQuery has made it much easier to account for some of CSS’ problems, and just solve them with JavaScript.
I get upwards of 10 support requests a month from users who have no idea what a PDF is and want to know why they can’t view the information from sites on our network that were created before we started our policy of adding Acrobat links to our pages, and substantially fewer from those sites created after we started this policy.
If your audience is such that you feel comfortable overlooking it I think that’s a judgment call, but I personally have found that making those kind of assumptions is not always the best thing.
@Lauren-
Wow, that is amazing to me. How can people not know what a PDF is?
I agree, it is definitely all about the audience.
Yea, it’s pretty trippy. We deal with a lot of historians and govt officials, but even then one would think they have assistants that can deal with that kind of stuff.
If you hide the link by default using jQuery .css method, then users with no JavaScript will see the link always. This is probably the best compromise.