Friday, July 07, 2006

On This Day

I've always thought it was cool to be able to find out what happened in history on a particular day. This used to be limited to encyclopedias and birtday cards, but in the "information age" this type of information is available from a lot of places fairly easily.

I started searching the web and ran across some information on how to do this on a blogger.com site, but the link was dead. Needless to say, I managed to track down a site the had it implemented (which I believe is the original) and was able to view the javascript code.

I have implemented a version of this on my blog and am posting instructions on how to do it. You should be comfortable with HTML, CSS, and JavaScript and not be afraid of customizing your blogger.com template.

I apologize in advance for the word-wrapping in the following code sections. If you want a better formatted version of the code, you can grab it from the source of this page or email me.

The first step is to add the following JavaScript to your template. This should be added to the <head> section:


<script type="text/javascript" language="javascript">
function OnThisDay(thisDay)
{
   var returnString   = "<span class=\"on-this-day\">On this day: #Wikipedia# ‡ #HistoryChannel# ‡ #NYTimes# <br> #BBC# ‡ #Britannica#</span>";

   var Wikipedia      = "<a TARGET=\"_blank\" href=\"http://en.wikipedia.org/wiki/#month#_#day#\">Wikipedia</a>";
   var HistoryChannel = "<a TARGET=\"_blank\" href=\"http://www.historychannel.com/tdih/tdih.jsp?month=#month#&day=#day#&cat=10272946\">The History Channel</a>";
   var NYTimes        = "<a TARGET=\"_blank\" href=\"http://www.nytimes.com/learning/general/onthisday/#year##month##day#.html\">The New York Times</a>";
   var BBC            = "<a TARGET=\"_blank\" href=\"http://news.bbc.co.uk/onthisday/hi/dates/stories/#month#/#day#/default.stm\">BBC News</a>";
   var IMDB           = "<a TARGET=\"_blank\" href=\"http://www.imdb.com/OnThisDay?day=#day#&month=#month#\">IMDb</a>";
   var Reference      = "<a TARGET=\"_blank\" href=\"http://reference.com/thisday/index.html?m=#month#&d=#day#\">Reference.com</a>";
   var Britannica     = "<a TARGET=\"_blank\" href=\"http://www.britannica.com/eb/dailycontent?month=#month#&day=#day#\"><font style=\"font-variant:small-caps;\">ENCYCLOPÆDIA BRITANNICA</font></a>";

   var monthNames = new Array(
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
   );

   var date = new Date(thisDay);
   var day = date.getDate();
   var month = date.getMonth() + 1; // fixup the month number since getMonth() returns a zero based number;
   var year = date.getFullYear();
   var monthName = monthNames[month - 1];

   var wikipedia = Wikipedia.replace(/#month#/, monthName).replace(/#day#/, day);
   var historyChannel = HistoryChannel.replace(/#month#/, 10272953 + (month - 1)).replace(/#day#/, 10272965 + day);
   var nyTimes = NYTimes.replace(/#year#/, year).replace(/#month#/, (month < 10 ? "0" + month : month)).replace(/#day#/, (day < 10 ? "0" + day : day));
   var bbc = BBC.replace(/#month#/, monthName.toLowerCase()).replace(/#day#/, day);
   var britannica = Britannica.replace(/#month#/, month).replace(/#day#/, day);

   return returnString.replace(/#Wikipedia#/, wikipedia).
           replace(/#HistoryChannel#/, historyChannel).
           replace(/#NYTimes#/, nyTimes).
           replace(/#BBC#/, bbc).
           replace(/#Britannica#/, britannica)
           ;
}
</script>

Next, add the following CSS declarations to the <style> block:


.on-this-day-header {
  border-bottom:2px dotted #999;
}

.on-this-day {
  margin:1.5em 0 .5em;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
}

Finally, you are ready to change the actual date header. You are looking for the section enclosed by the <BlogDateHeader> element. It usually looks like this:


   <BlogDateHeader>
      <h2 class="date-header"><$BlogDateHeaderDate$></h2>
   </BlogDateHeader>

You need to change the <BlogDateHeader> content so it looks like this:


   <BlogDateHeader>
      <div class="on-this-day-header">
         <h2 class="date-header"><$BlogDateHeaderDate$></h2>
         <script type="text/javascript">document.write(OnThisDay("<$BlogDateHeaderDate$>"));</script>
      </div>
   </BlogDateHeader>

If you want to customize the script, there are only a few things you need to do. The script is broken up into sections. The first section defines some constant strings that represent the output returned from the function (returnString) and the URLs for each of the sites you want listed. To add a new site, you need to add a new URL variable with the appropriate URL and add a new string replacement pattern to resultString.

The middle section computes the date information based on the date that is passed in. This part should be very simple and should not need to be changed.

The third section fills in the URL strings replacing the patterns with the appropriate values. To add a new site, once you have added the URL constant, you need to create a new variable in this section that holds the fixed-up string pattern.

Finally, we return the resultString value. To add a new site, you need to add the appropriate .replace() call to the return statement.

posted by Scott at 1:17 PM

0 Comments:

Post a Comment

<< Home