Content Expirator – jQuery Content Expiration Plugin

Content ExpiratorContent Expirator is a jQuery utility plugin that provides an easy way to give DOM elements an expiration date. If the element is found to be expired, its 'display' parameter is set to 'none'. A better approach would be to perform this function server side with a server side language, but this is a quick and easy way to implement it client side.

Download: jquery.content_expirator-0.1.0.js

 

Let's say your client has given you a flyer to put on their website for an event.

<img src="easter_flyer_2010.jpg" class="aligncenter" alt="Easter Flyer" />

After Easter is over, you're going to want to take this flyer off of their site. Instead of manually editing the site on the Monday after Easter to take it down, you can give it an expiration date so that it isn't displayed after Easter.

<img src="easter_flyer_2010.jpg" class="exp-2010-04-04 aligncenter" alt="Easter Flyer" />

The Content Expirator looks for an element containing a class name (must be the first one listed) containing the prefix 'exp'. When it comes across one, it compares the date (formatted year-month-day) with the current day to decide if the element's 'display' (style) parameter should be set to 'none'.

Calling The Function:

default:

$(document).ready(function(){
    jQuery.contentExpirator();
});
// looks for -> 'exp-year-month-day'

custom prefix:

$(document).ready(function(){
    jQuery.contentExpirator('end');
});
// looks for -> 'end-year-month-day'
<script> <html> Result:

Run

Tags: , ,

  • Ryan McAllen

    Hey, thanks for the plugin!

    I was using it and noticed it wouldn’t find the exp-0000-00-00 if wasn’t the first class…

    Here’s what I came up with, might not be elegant, but wanted to share:

    note this subtle change:[class*=”+pfix+”]

    (function($){
    $.contentExpirator = function(prfx){
    var pfix = prfx || ‘exp’;
    $(“[class*=”+pfix+”]”).each(function(){
    var tag = $(this);
    var eString = $(this).attr(‘class’).split(‘ ‘);
    $(eString).each(function(){
    if (this.match(pfix)) {
    var dString = this.split(‘-‘);
    var d = new Date(dString[1],dString[2].toString()-1,dString[3]);
    var today = new Date();
    if(d < today){
    $(tag).css('display','none');
    }
    }
    });
    });
    }
    })(jQuery);

    thanks again!