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'

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

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');

-

v0.3.0 (August 5, 2009)

• Accepts events that span across multiple days
• MooTools v1.2.3 required.

v0.2.2 (April 11, 2009)

• Fixed a rendering problem for people outside of the U.S.
• Added the option for weeks to start on Monday

v0.2.1 (Feb 9, 2009)

• bug fix - usage error with parseInt(). Events wouldn't load on the 8th and 9th of a month.
• HTML allowed in events. This allows for events to link elsewhere.

v0.2.0 (Feb 1, 2009)

• uses plug-ins or direct loading through the constructor for events
• uses iCal/ISO 8601 dates/times for event input
• different style sheets can be used for 3 different sized calendars

v0.1.0 (Oct 3, 2008)

• month, week, and day views
• tool tips for month view events (using Tips)
• scrolling day events for month view (using Scroller)
• events loaded manually or possibly through a JSON feed

Extends the Date Object:

function prevMonth(){
var thisMonth = this.getMonth();
this.setMonth(thisMonth-1);
if(this.getMonth() != thisMonth-1 && (this.getMonth() != 11 || (thisMonth == 11 && this.getDate() == 1)))
this.setDate(0);
}
function nextMonth(){
var thisMonth = this.getMonth();
this.setMonth(thisMonth+1);
if(this.getMonth() != thisMonth+1 && this.getMonth() != 0)
this.setDate(0);
}

Date.prototype.nextMonth = nextMonth;
Date.prototype.prevMonth = prevMonth;

Example of Usage:

function getPrevMonth(){
var today = new Date(2008,9,31); //set "today" to October 31, 2008
today.prevMonth(); //show one month earlier -> September 30, 2008 (instead of September 31, 2008 which converts to October 1st, 2008
}
function getNextMonth(){
var today = new Date(2008,9,31); //set "today" to October 31, 2008
today.nextMonth(); //show one month later -> November 30, 2008 (instead of November 31, 2008 which converts to December 1st, 2008
}

Using Mootools:

function stopLoad()
{
   $try(
      function(){window.stop()},
      function(){document.execCommand('Stop')}
   )
}

Using Prototype:

function stopLoad()
{
   Try.these(
      function(){window.stop()},
      function(){document.execCommand('Stop')}
   )
}

So you want to add content to the bottom of your web page without reloading the whole page or DIV that the majority of your content is located in? You could add a separate DIV to the bottom of your page and use the document.getElementByID('myDIV').innerHTML = xmlHttp response; method to append the new content...

But, what if you want to append multiple times?

• add rows to your favorite database's front end
• add stories to the front page, as the user scrolls down, like on DZone's home page
• use it on the top end to dynamically stack new content without user intervention

Why not include new DIV tags within your response code?

Existing DIV at the bottom of your page:

<div id="newdiv001">

</div>

xmlHttp Response from the server:

latest news flash here</div>
<div id="newdiv002">

After it's inserted into your existing DIV, it'll look like this:

<div id="newdiv001">
latest news flash here</div>
<div id="newdiv002">

</div>

... and now "newdiv002" is ready to take the next response.
The important thing to remember here, is to keep track of your DIV ids. By using a number at the end of your id's name, you can keep track of it with a simple counter.

The other way to request a date range is to pass a date parameter in the URL:

Example:
https: //google.com....dashboard?...&pdr=20080109-20080109

parameter: pdr

value: 20080109-20080109 (YearMonthDay-YearMonthDay)

Greasemonkey is a Firefox Add-on that allows customized JavaScript to be added to any web page that you visit.

I've written a user script called Analytics Today that sets your Analytics date range to the current day instead of the previous month. You can still obviously change the range just as you do now. Please feel free to try it out. I've included it, along with source code, below!

-

Download it here -> AnalyticsToday.user.js - v0.1.3 (10-21-08)

-

Source Code:

// ==UserScript==
// @name          Analytics Today - v0.1.3
// @namespace     blog.dansnetwork.com
// @description   Sets Google Analytic's default date range to today.

// @include       https://www.google.com/analytics/reporting*

// @exclude
// ==/UserScript==

var url = window.location.href;
var urlParam = "&pdr=";

var today = new Date();
var day = today.getDate().toString();
var month = (today.getMonth() + 1).toString();
var year = today.getFullYear().toString();
var todaysRange;

if(day < 10)
day = '0' + day;
if(month < 10)
month = '0' + month;

var todaysRange = year + month + day + '-' + year + month + day;

if(url.indexOf(urlParam) < 0)
window.location.href += '&pdr=' + todaysRange;