Tempus Fugit

All of you who have wanted to display Chris Muir’s Day by Day cartoon on your website, but couldn’t find a way to fit the horizontally oriented strip into your design, you now have Day by Day Vertical by yours truly.

Current Version: v.0.5

Description

A PHP script to display Day by Day in a vertical orientation, dynamically.

Requirements

• PHP (tested on 4.3.4)
• PHP parsed on pages where you want to display the strip

Features

• Display the current day’s strip
• Figures the most recent strip by date, but will not attempt to display the current day’s strip if no strip has yet been released (will display the previous day’s strip until the new one is availible)
• Optionally allow the display of past strips, with a configurable number of archived days
• Optionally displays the most recent strip’s first frame only, with the 2nd and 3rd frames availible with dropdown JavaScript
• Option to have line breaks between the frames, or not
• Use text arrows, or your own images for previous/next and expand/retract
• Option to hide the current date text and the “previous strips” link (only if you are only displaying the most current strip)
• Configure the “previous strips” text

Installation

1. If you would like to use the simple black GIF arrows that I have included, place them in your images directory.
2. Place the transparent.gif file in your images directory
3. Open the daybyday_vertical.php file, and modify the settings. The following setting you NEED to set:
   • $images_path = ‘http://www.site.com/images/’;
     This is just the URL to your images directory.
4. Upload the script to a location on your server.
5. If you have decided to use the javascript option to display only the first frame of the most recent strip (with the other frames available in a JavaScript expander), you need to embed the following JavaScript into the HEAD section of all pages that the strip will be shown on.
   

   function showMore(varA1, varB1){
   var123 = ('varXYZ' + (varA1));
   varABC = ('varP' + (varA1));
   if( document.getElementById ) {
   if( document.getElementById(var123).style.display ) {
   if( varB1 != 0 ) {
   document.getElementById(var123).style.display = "block";
   document.getElementById(varABC).style.display = "none";
   } else { document.getElementById(var123).style.display = "none";
   document.getElementById(varABC).style.display = "block"; }
   } else { location.href = varB1;
   return true; }
   } else { location.href = varB1;
   return true; }
   }
   

   If this script looks familiar, it is because it is the commonly used “expandable entries” script. So if you use that script, you will not have to embed it again.

6. Finally, you must now insert the PHP include call to the script:
   

   <a name="daybyday"></a>
   <?php include '/home/site/path/daybyday_vertical.php'; ?>

   • The include path is the server path to the script, not the URL
   • The anchor on top is used by the script to refocus the browser to strip when viewing past strips or when expanding/contracting the current day’s strip with JavaScript. If you have a sidebar title above the strip, you can put the anchor there.

Additional installation notes:

• The width of the generated divs is 185px
• The width of any sidebar they are placed in needs to be at least 187px
• The width of the “previous” and “next” links may exceed 185px unless the strip inherits CSS styling that reduces the size of the text… small, x-small, or x-small should be fine.
• If you have a background color assigned to a:hover{}, you need to add the following line to your CSS file so you don’t get funky results on mouseover:
  

  a:hover.daybydaylink { background-color: transparent; }

Download

daybyday_vertical_v0.5.zip

Versions

• v0.5 Previous/Next links are set to target=”_self” to counteract any of you who have all links opening in a new browser window. Bug was fixed where if you turned archives off, it would display a link to the previous day (which wouldn’t work)
• v0.4 Removed HTML comments, simplified installation so that only one variable has to be set for it to work (thanks to the King)
• v0.3 Added CSS class to the links around the images so people who have a background color assigned to a:hover{} don’t get funky results. The links are class=”daybydaylink” You’ll want to set it like so in your CSS:
  

  a:hover.daybydaylink { background-color: transparent; }

• v0.2 First release
• v0.1 Unreleased alpha version