Day By Day (Vertical) Using JavaScript and CSS - REVISIT

Back in February, we offered a copy/paste edition of JavaScript code for Chris Muir's Day By Day cartoon. The reason is that many blogs cannot display the full cartoon in its native horizontal format. Back in April 2004, Tempus Fugit offered a PHP script that could be added to PHP sites that allowed them to display "Day By Day" in a vertical format. That's the first panel on top, the second panel in the middle, and the third panel on the bottom.

The problem with the Tempus Fugit code is that it only works on PHP sites. Many bloggers don't use PHP. The Alliance, for instance. And Blogger blogs. So, we came up with a piece of JavaScript code that can be used on sites that support JavaScript. That's most sites. Including TypePad, MoveableType, Mu.Nu, Blogger, and others. (But not WordPress.com sites, sorry.)

Recently, Chris Muir announced that he was changing his output ... and that people using the Tempus Fugit (PHP) code ... or our JavaScript code ... would need to make a change.

Dealing with this change is what we're going to discuss today.


Launch Date

Recently, Chris posted this message on the Day By Day site.

ATTN: READERS WHO HAVE INSTALLED THE STRIP ONTO THEIR OWN SITE(S)
ON 06/27/06 THE DBD CODE THAT SHOWS THE STRIP ON YOUR SITE WILL BE CHANGED. THE OLD CODE YOU INSTALLED TO DISPLAY THE STRIP ON YOUR SITE WILL WORK UNTIL 06/27/06, 3:00PM EST. YOU WILL NEED THE NEW CODE SHOWN BELOW TO SHOW THE STRIP ON YOUR SITE AFTER THIS TIME.
***WARNING***
DO NOT INSTALL THE NEW CODE UNTIL 06/27/06 AT 3:00 PM EST.
DBD VERTICAL CODE

This means exactly what it says. If you carry the Tempus Fugit (PHP) code or our JavaScript code, it will stop working at 3:00 PM Eastern time on June 27, 2006. It will work until then, but then it will stop working.

At that time, you'll have to make a change to your code. And Chris provides the new code.

Is There Another Alternative?

Of course there is an alternative. We came up with a piece of JavaScript that will work between now and Chris' changeover ... and will continue to work after Chris' changeover. We'll cover it in a minute. Be patient.

Why Should We Use The New Code?

Before we present the new code, let's talk about the some stuff.

If you want to leave everything alone ... and at 3:00 PM Eastern time, change your code, then you can skip all this. It's not for you.

However, if it's not all that easy to log on and make changes right at 3:00 PM, and if it's important to you to not have non-working code for a period of time, you might want to use our new code.

What Does The New Code Do?

Here's how it works. First of all, we get the scheduled changeover time in GMT (Universal Time) and place that in a variable. Then we get the current time, convert it to GMT (Universal Time) and place that in a variable. Then we compare the two values and see if we are before or after launch time.

If we are before launch time, we write out the old version of displaying the cartoon.

If we are after launch time, we write out the new way of displaying the cartoon.

So, What's The Plan?

Here's the suggested thing to do.

If you're using the Tempus Fugit (PHP) code or our JavaScript code, replace it with this new JavaScript code. You can do that any time before the changeover.

Run this new JavaScript code for as long as you like after the changeover.

If you choose to, then sometime after the changeover, you can stop using the new JavaScript code and start using Chris' IFRAME code.

The bottom line is: Use this new code and Day By Day will continue to display the entire time.

The Code

Copy and paste the following:

<!-- The following lines get the most current cartoon from www.daybydaycartoon.com -->
<!-- Adapted to add JPG version launch countdown -->
<script language="JavaScript" src="http://www.daybydaycartoon.com/scripts/daybyday.js"></script>
<script type="text/JavaScript">
<!--
var launchDate = Date.UTC(2006, 5, 27 , 19, 0, 0, 0);
var thisDate = new Date();
var nowUTC = Date.UTC(thisDate.getYear() , thisDate.getUTCMonth() , thisDate.getUTCDate() , thisDate.getUTCHours() , thisDate.getUTCMinutes() , thisDate.getUTCSeconds() );
var msToLaunch = launchDate - nowUTC;

if (msToLaunch > 0)
{
    document.write("<div style='background-color: #FFFFFF; width: 180px; height: auto; text-align: center;'>");
    document.write("<div style='overflow: hidden; width: 180px; height: 190px; margin-left: 0px;'>");
    document.write("<div style='overflow: hidden; width: 205px; height: 200px; margin-left: -25px; margin-top: -5px;'>");
    document.write("<a href='http://www.daybydaycartoon.com'><img src='http://www.daybydaycartoon.com/images/sp.gif' height='200' width='575' id='dayByDay1' name='dayByDay1' border='0'>");
    MM_changeProp ('dayByDay1','','src',parseUrl(),'IMG');
    document.write("<br />");
    document.write("</div>");
    document.write("</div>");
    document.write("<div style='overflow: hidden; width: 180px; height: 190px; margin-left: 0px;'>");
    document.write("<div style='overflow: hidden; width: 405px; margin-left: -206px; margin-top: -5px;'>");
    document.write("<a href='http://www.daybydaycartoon.com'>");
    document.write("<img src='http://www.daybydaycartoon.com/images/sp.gif' height='200' width='575' id='dayByDay2' name='dayByDay2' border='0'>");
    MM_changeProp ('dayByDay2','1','src',parseUrl(),'IMG');
    document.write("<br />");
    document.write("</div>");
    document.write("</div>");
    document.write("<div style='overflow: hidden; width: 180px; height: 190px; margin-left: 0px;'>");
    document.write("<div style='overflow: hidden; width: 575px; margin-left: -388px; margin-top: -5px;'>");
    document.write("<a href='http://www.daybydaycartoon.com'>");
    document.write("<img src='http://www.daybydaycartoon.com/images/sp.gif' height='200' width='575' id='dayByDay3' name='dayByDay3' border='0'>");
    MM_changeProp ('dayByDay3','1','src',parseUrl(),'IMG');
    document.write("<br />");
    document.write("</div>");
    document.write("</div>");
    document.write("<div style='text-align: center;'>");
    document.write("<a href='http://www.daybydaycartoon.com'>Day By Day© by Chris Muir.</a>");
    document.write("</div>");
}
else
{
    document.write("<iframe src='http://www.daybydaycartoon.com/iframe.html' width='200' height='220' scrolling='auto'>");
    document.write("</iframe>");
}
//-->
</script>
<!-- Code copyright 2004 by Day By Day© any redistribution, resale, or reuse without permission of the owner is forbidden -->
<!-- Modified for vertical use 2006-02-20 -->
<!-- Modified to include JPG countdown 2006-06-21 -->
<!-- end Day By Day© code-->

What If The Launch Is Delayed?

If we receive word of a delay in launch, we'll post modifications here.