[Previous entry: "How's Your Sister?"] [Cliffs - Home] [Next entry: "Old People"]

06/03/2003: "Greymatter Mods"

I wanted to have today's date on the sidebar along with an image above the calendar that rotates monthly, in traditional calendar fashion. As you can see, I have the current date and the image above the calendar implemented and I'm going to share the necessary JavaScript. Click more.. below for information about problems I had and the JavaScript to fix these problems.

The current date comes out of graymatter variables but it's, alas, not today's date, it's the date that the last entry was made. If there is a way to keep the true current date posted, using the variables, I couldn't find it. The first part of the code takes care of the date. The image above the calendar is, of course, just an image. The tricky part comes in when you try to keep the image in sync with the displayed calendar page. May's calendar is displayed on pages with May entries while entries made in June carry the June calendar. This is done because the calendar has all those cool links to all other individual entries made during that month, however, it means that you can't just create a new image and upload it when the month rolls over and expect everything to remain in sync. What happens is that every time someone makes a comment to an entry made in the previous month the image displayed above the calendar is swapped for the image intended for the current month because the page is rebuilt to display the comment and the image source is now updated to the current month. What has to happen is the image source has to reflect the month the entry was made just as the calendar does. These functions are executed when the page loads. Drop them into the header template and add an onload="camdte();" to the body tag. last, put a

tag with an id of "harddate" wherever you want the date to appear and name your calendar picture img tag "calpic".

// Build a current date that looks like: tue, jun 3, 2003
function camdte()
{
camdate = new Date();
SideBarDate = getDayString(camdate.getDay()) + ", " + getMonthString(camdate.getMonth()) + " " + camdate.getDate() + ", " + camdate.getFullYear();
// Point to the div id harddate and append the formated date
document.getElementById("harddate").appendChild(document.createTextNode(SideBarDate));
};
// Translate day of the week to alpha
function getDayString(num)
{
var day;
var dayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
day = dayName[num];
return day;
};
// Translate month to alpha
function getMonthString(num)
{
var month;
var monthName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
month = monthName[num];
return month;
};
// Translate the Greymatter month (nn = month when entry was made)
function camImage()
}
// you have to change the quotes to two sets of curlie brackets around ""monthmonth""
gmPageMonth = ""monthmonth"";
gmPageMonth = gmPageMonth -1;
var jpgtable = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
// Build a new image source and drop it into the img named "calpic"
change = new Image();
change.src = "http://www.awesomelyactive.com/pages/cliff/images/" + jpgtable[gmPageMonth] + ".jpg";
document.calpic.src=change.src;
};
// End

Note to readers:
Readers with Internet Explorer can use these links to "Add to Favorites." The rest of you are on your own. Remember, Cliffs Notes dot Info.
Click here to add this page to your favorites!
Click here to add this site to your favorites!

If you've enjoyed Cliff's Notes, click here to find lots more blogs. This link opens in a new window in case you realize you were better off here.
Last but not least, if anything interesting comes to mind about the above post that you would like to share, blurt it out in the form below. If you enter a "homepage," your "name," as you entered it, will become a link to your site. E-mail addresses, if entered, may be harvested by spammers.


Powered by Greymatter