Monday, February 20, 2006

Day By Day (Vertical) Using JavaScript and CSS

BlogTipsBasilOne very popular feature many blogs (including this little blog) carry is the comic strip "Day By Day" authored by Chris Muir. Okay, it's more popular with Conservatives than with Liberals. But still, it's one of the most popular Web-based cartoons.

"Day By Day" is carried on many right-leaning blogs and Web sites, most often in the standard horizontal format. That means the blog must allow for an area 575 pixels wide. That's not an issue for some blogs, but it is an issue for others, particularly Blogger blogs, or other blogs that don't have a single column that wide.

Many WordPress or other PHP-based blogs (PHP is a script language/interpreter; if you use PHP, you probably know that you use PHP; if you don't know, you probably don't use it) have had an additional method for carrying "Day By Day" for nearly two years now. 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.

In the past, I had tinkered with ways to make it appear in a vertical form using JavaScript and/or CSS. I had no luck.

Then, recently The Palmetto Pundit asked me about it again. So, I gave it another crack. And this time, we made it work! Check it out here at Palmetto Pundit, who was kind enough to participate in a test of the code for us.

So, here's the code for displaying "Day By Day" in a vertical format on non-PHP blogs, including Blogger, TypePad, and many other platforms. Sorry, nothing for WordPress.com; however, this will work for standard WordPress blogs, as will the Tempus Fugit PHP code.

This new method has been tested on Internet Explorer 6 and Firefox 1.5 with positive results.

<!-­ add the following lines to your website to get the most current cartoon from www.daybydaycartoon.com -­>
<script language="JavaScript" src="http://www.daybydaycartoon.com/scripts/daybyday.js"></script>
<div style="background-color: #FFFFFF; width: 180px; height: auto; text-align: center;">
<div style="overflow: hidden; width: 180px; height: 190px; margin-left: 0px;">
<div style="overflow: hidden; width: 205px; height: 190px; margin-left: -25px; margin-top: -5px;">
<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">
<script language="javascript">MM_changeProp ('dayByDay1','','src',parseUrl(),'IMG');</script></a><br />
</div>
</div>
<div style="overflow: hidden; width: 180px; height: 190px; margin-left: 0px;">
<div style="overflow: hidden; width: 405px; margin-left: -206px; margin-top: -5px;">
<a href="http://www.daybydaycartoon.com"><img src="http://www.daybydaycartoon.com/images/sp.gif" height="200" width="575" id="dayByDay2" name="dayByDay2" border="0">
<script language="javascript">MM_changeProp ('dayByDay2','1','src',parseUrl(),'IMG');</script></a><br />
</div>
</div>
<div style="overflow: hidden; width: 180px; height: 190px; margin-left: 0px;">
<div style="overflow: hidden; width: 575px; margin-left: -388px; margin-top: -5px;">
<a href="http://www.daybydaycartoon.com"><img src="http://www.daybydaycartoon.com/images/sp.gif" height="200" width="575" id="dayByDay3" name="dayByDay3" border="0">
<script language="javascript">MM_changeProp ('dayByDay3','1','src',parseUrl(),'IMG');</script></a><br />
</div>
</div>
<div style="text-align: center;"><a href="http://www.daybydaycartoon.com">Day By Day© by Chris Muir.</a></div>
<!-­ 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 -­>
</div>
<!-­ end Day By Day© code -­>

We thank Chris Muir. for taking the time to review this code and grant his approval. And for continuing to make Day By Day freely available on the Internet.

And we hope fans of Day By Day© by Chris Muir will find this useful.

6 comments:

  1. Thanks!...

    Thanks to Basil’s Blog, not only for having this site on his blogroll, but for the code to install the Day by Day cartoon in vertical format.

    ......

    ReplyDelete
  2. Great News For Day-by-Day Fans!...

    Basil, who runs a little blog called basil's blog came up with a solution. He figured out a way to display Day By Day using Javascript and CSS that will fit neatly within most sidebars....

    ReplyDelete
  3. Which way do you use it?
    I haven't looked at the php code in a while, but when I did, I gave up on it. I think it was a width issue, but I can't remember.
    ???

    ReplyDelete
  4. Truth time: I didn't know until I checked again this morning.

    I had switched back and forth several times between the Tempus Fugit (PHP) code and my JavaScript/CSS version, comparing the two. And I thought I had left it with the new way, but apparently not. But it's the version listed here that I am using ... now.

    It's the same width as the Tempus Fugit (PHP) code, since it doesn't resize the panels. So, if the code they offer is too wide, the code I offer is too wide.

    The Tempus Fugit code offers the ability to show only one panel and expand to show three. I didn't do the extra work on that.

    Bottom line is, if you want to show three panels all the time, the code here will work. And it's copy-paste, so it should be fairly easy. It will work on WordPress (but not WordPress.com), TypePad, Blogger ... anything where you can edit your template/theme.

    ReplyDelete
  5. This works! 200 pixel sidebar, bam, you have it daily. No muss, no fuss.

    Thanks, Basil. Thanks, Chris Muir

    ReplyDelete
  6. Hmmm. I like your version, because copy + paste = GOOD!
    I probably just got lost in Jaquith's code when I looked at his version, or something...who knows. I'm gonna give it a try!

    Thanks basil!

    ReplyDelete

Please choose a Profile in "Comment as" or sign your name to Anonymous comments. Comment policy