Posts Tagged ‘javascript’

Content Expirator – jQuery Content Expiration Plugin

Saturday, March 27th, 2010

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

jQuery Classes – An Object Oriented Approach

Tuesday, April 14th, 2009

MooTools has been my framework of choice for the past couple of years. I've worked my way up to using Classes for most of my projects and really liked using the OOP approach. For the past couple of projects, I started using WordPress as my CMS and every time ended up using jQuery. I was disappointed to find out that it didn't have the native Class library that MooTools did. Fortunately there is a plugin available to assist with this task:

- A plugin that adds class functionality to jQuery: jQuery-Klass

JavaScript ISO8601/RFC3339 Date Parser

Saturday, November 1st, 2008

Updated (bug fix): 2-11-09

In need of a JavaScript function that would parse an ISO8601 compliant date, I came across an attempt (http://delete.me.uk/2005/03/iso8601.html) and rewrote it (because I'm all about reinventing the wheel). My function extends the Date object and allows you to pass in an ISO8601 date (2008-11-01T20:39:57.78-06:00). The function will then return the Date. In the date string argument the dashes and colons are optional. The decimal point for milliseconds is mandatory (although specifying milliseconds isn't). If a timezone offset is specified, the '+' or '-' sign must be included. This function should also work with iCalendar(RFC2445) formatted dates. If a the date string doesn't match the format, there will be a final attempt to parse it with the built in Date.parse() method.

Code:


Date.prototype.setISO8601 = function(dString){

var regexp = /(\d\d\d\d)(-)?(\d\d)(-)?(\d\d)(T)?(\d\d)(:)?(\d\d)(:)?(\d\d)(\.\d+)?(Z|([+-])(\d\d)(:)?(\d\d))/;

if (dString.toString().match(new RegExp(regexp))) {
var d = dString.match(new RegExp(regexp));
var offset = 0;

this.setUTCDate(1);
this.setUTCFullYear(parseInt(d[1],10));
this.setUTCMonth(parseInt(d[3],10) - 1);
this.setUTCDate(parseInt(d[5],10));
this.setUTCHours(parseInt(d[7],10));
this.setUTCMinutes(parseInt(d[9],10));
this.setUTCSeconds(parseInt(d[11],10));
if (d[12])
this.setUTCMilliseconds(parseFloat(d[12]) * 1000);
else
this.setUTCMilliseconds(0);
if (d[13] != 'Z') {
offset = (d[15] * 60) + parseInt(d[17],10);
offset *= ((d[14] == '-') ? -1 : 1);
this.setTime(this.getTime() - offset * 60 * 1000);
}
}
else {
this.setTime(Date.parse(dString));
}
return this;
};

Usage:


var today = new Date();
today.setISO8601('2008-12-19T16:39:57.67Z');