Identify The Age Of Your Word & PDF Files Using CSS & jQuery
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Sep 08
A request that often pops up at my workplace is the ability to tag files as "new" when we add them to our websites. The sites that I develop are usually littered with PDFs and Word documents so this can be a daunting task to manage whether a file is "new" or not since there are hundreds of files on the site.
Ultimately what happened, is our .NET programmer added a field to the database for date which we enter in the last updated date and he does the logic server-side. That worked great for PDF and DOC files in the database but in reality, that only cover 50% of the files on our site.
CSS Only Solution?
My original idea was to solve this problem using only CSS. After all, CSS is my specialty. I was thinking around the lines of adding some metadata to my anchors like so:
<a href="august_2009_updates.pdf rel="2009-08-01">August Updates</a>
As you can see the above example is clearly time-sensitive. Normally what would happen is a month or two later, this file would be sitting on our site with the "new" icon still intact. My CSS only solution was to do something like this:
a[href^="2009-08"] { background: url(new.png) no-repeat left center; }
The problem with this is I don't have the ability to use variables or date-based logic in CSS so once it passes August, I'll need to update my CSS selector. PS I'm aware that I could use some sort of server-side solution serving CSS up via ASP or PHP and then use variables. I hate mixing server-side code with static files like CSS or Javascript so I avoided this.
Enter jQuery and CSS
Next, I created a jQuery plugin that tags files by date with a new icon. It can be called with a selector that will narrow the focus of the search. Some parameters to this plugin are what attribute to search (I used the rel attribute. The next parameter is the name of the class name that will be assigned. After that it takes a parameter for the number of days that have passed to determine if the link is "new" or not. Finally the last parameter is for debugging purposes.
$(document).ready(function(){
$("#content a").newClass("rel","new",90,true);
});
JQuery Plugin
Below is the corresponding jQuery plugin I wrote:
(function($){
$.fn.newClass = function(attr,classname,offset,debug){
var now = new Date();
var day = 1000*60*60*24;
return this.each(function(i){
var old = new Date($(this).attr(attr));
var diff = Math.floor((now.getTime() - old.getTime()) / day);
if(diff < offset) $(this).addClass(classname);
if(debug) $(this).append(" - " + diff + " day(s)"); //testing
});
}
})(jQuery);
To see this in action view the demo >>
