Sill trying to get logo script working...ARG!!

[Tantirx]

Ok I had posted this issue before and had limited success getting it to work. When I did what someone what suggested the screen want blank and a "view source" rendered a blank text document. I then accidentally deleted a directory in ZC that rendered the program useless. I know...I'm a bonehead!!

This time around I have properly setup for my overrides and backed up the entire ZC system (just to be on the safe side.

I am now using a custom template I am doing myself called "abyss".

OK I will explain what I am trying to do. I have a stripped down mockup HERE. Once you get the the page take notice of the header/logo combo..it should be a wintry scene.

ACTUALLY TRY THIS!!

Now; Change the date on your computer to December 25 and refresh the webpage. The header/logo combo should have automatically changed to a Christmas theme!! All in all that's what the script does is checks the date, finds the image that corresponds with that date, then uses the appropriate image. NOTE: If you do a "view source" you will see this line:

<img src="./logo.jpg" onload="setImgByDate(this,holiday)">

The image "logo.jpg" is a failsafe/default logo.

Now you can head over to my ZC and see where I am with this problem. You can get there HERE

As you can see the script is not working at all (except for the default logo). I have used the instructions for adding javascript as well as using the onload command to no avail.

The actual JavaScript is below..it's actually pretty simple. As you can see I have used full paths to the images just to be safe.

<script language="javascript" type="text/javascript">
<!--
var holiday = [
[ "1025", "1030", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logohalow.jpg" ],
[ "1101", "1111", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoremem.jpg" ],
[ "1112", "1130", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoautumn.jpg" ],
[ "1201", "1209", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logowinter.jpg" ],
[ "1210", "1223", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logogreetings.jpg" ],
[ "1224", "1226", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoxmas.jpg" ],
[ "1227", "1230", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logowinter.jpg" ],
[ "1231", "1231", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logonewyear.jpg" ],
[ "0101", "0103", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logonewyear.jpg" ],
[ "0104", "0206", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logowinter.jpg" ],
[ "0207", "0214", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logovalen.jpg" ],
[ "0215", "0309", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logowinter.jpg" ],
[ "0310", "0317", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logostpatty.jpg" ],
[ "0318", "0319", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logowinter.jpg" ],
[ "0320", "0331", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logospring.jpg" ],
[ "0401", "0401", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logofool.jpg" ],
[ "0402", "0421", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logospring.jpg" ],
[ "0422", "0423", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logogood.jpg" ],
[ "0424", "0425", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoeaster.jpg" ],
[ "0426", "0523", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logospring.jpg" ],
[ "0524", "0525", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logovictor.jpg" ],
[ "0526", "0620", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logospring.jpg" ],
[ "0621", "0630", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logosummer.jpg" ],
[ "0701", "0702", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logocanada.jpg" ],
[ "0703", "0921", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logosummer.jpg" ],
[ "0922", "1001", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoautumn.jpg" ],
[ "1002", "1010", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logothanks.jpg" ],
[ "1011", "1024", "http://www.oceanabyssaquatics.ca/store/includes/templates/abyss/images/logoautumn.jpg" ],
];

function disable(){return false}

function setImgByDate(imgRef,dateList) {
imgRef.onload = disable;
var today = new Date();
var month = 1+today.getMonth();
if (month<10) month = "0"+month;
var date = today.getDate();
if (date<10) date = "0"+date;
var MMDD = ""+month+date;
for (var i=0; i<dateList.length; i++) {
if (MMDD>=dateList[i][0] && MMDD<=dateList[i][1]) {
imgRef.src = dateList[i][2];
return;
}
}
}


//--></script>

Last but not least; the trigger for the JavaScript is:

<img src="./logo.jpg" onload="setImgByDate(this,holiday)">

Any help would be awesome!! I don't know JavaScript nor do I know PHP....so spell it out for me. I am fluent in XHTML, HTML and CSS.

Thanks again...in a advance

[niccol]

try taking the html comments out of the javascript.

This '<!--' and this '//-->'

Then see what you get.

[gjh42]

Returns full image path for current installation, current date at server.

<?php
/**
 * Logo Date Switcher  by Glenn Herbert (gjh42) 2010-12-02
 */

$holiday = array();
$holiday[] = array('0101', '0103', 'logonewyear.jpg');
$holiday[] = array('0104', '0206', 'logowinter.jpg');
$holiday[] = array('0207', '0214', 'logovalen.jpg');
$holiday[] = array('0215', '0309', 'logowinter.jpg');
$holiday[] = array('0310', '0317', 'logostpatty.jpg');
$holiday[] = array('0318', '0319', 'logowinter.jpg');
$holiday[] = array('0320', '0331', 'logospring.jpg');
$holiday[] = array('0401', '0401', 'logofool.jpg');
$holiday[] = array('0402', '0421', 'logospring.jpg');
$holiday[] = array('0422', '0423', 'logogood.jpg');
$holiday[] = array('0424', '0425', 'logoeaster.jpg');
$holiday[] = array('0426', '0523', 'logospring.jpg');
$holiday[] = array('0524', '0525', 'logovictor.jpg');
$holiday[] = array('0526', '0620', 'logospring.jpg');
$holiday[] = array('0621', '0630', 'logosummer.jpg');
$holiday[] = array('0701', '0702', 'logocanada.jpg');
$holiday[] = array('0703', '0921', 'logosummer.jpg');
$holiday[] = array('0922', '1001', 'logoautumn.jpg');
$holiday[] = array('1002', '1010', 'logothanks.jpg');
$holiday[] = array('1011', '1024', 'logoautumn.jpg');
$holiday[] = array('1025', '1030', 'logohalow.jpg');
$holiday[] = array('1101', '1111', 'logoremem.jpg');
$holiday[] = array('1112', '1130', 'logoautumn.jpg');
$holiday[] = array('1201', '1209', 'logowinter.jpg');
$holiday[] = array('1210', '1223', 'logogreetings.jpg');
$holiday[] = array('1224', '1226', 'logoxmas.jpg');
$holiday[] = array('1227', '1230', 'logowinter.jpg');
$holiday[] = array('1231', '1231', 'logonewyear.jpg');

function image_date($holiday) { //returns full image path for current installation, current date at server
  $date = date(md);
  for ($i=0;$i<sizeof$holiday;$i++) {
    if ((int)$date >= (int)$holiday[$i][0] and (int)$date <= (int)$holiday[$i][1]) {
      $img = $holiday[$i][2];
      break;
    }
  }
  $img = DIR_WS_TEMPLATE_IMAGES . $img;
  return $img;
}
//EOF

The code could have been simpler, but retaining the start and end dates allows recognizing a leap day.

[gjh42]

Correction:

  for ($i=0;$i<sizeof$holiday;$i++) { 

should be

  for ($i=0;$i<sizeof($holiday);$i++) { 

[gjh42]

For completeness, the function would be used like this:

<?php echo '<img src="' . image_date($holiday) . '" />'; ?>

[Tantirx]

For completeness, the function would be used like this:

<?php echo '<img src="' . image_date($holiday) . '" />'; ?>

So the JavaScript rewrite would be named jscript_holiday.php and NOT jscript_holiday.js?

Where would the function be placed (which file?...header.php?)

[gjh42]

Sorry, I did not give much explanation. What I posted was a PHP version of the function (you mentioned that you didn't know PHP, and it was a good exercise for me). It would do almost the same thing as your js function but for the server time zone, not necessarily the customer's time zone. The PHP function call would go in tpl_header.php; the function/array file would go in /includes/functions/extra_functions/ named something like logo_date_switcher_functions.php (the exact name doesn't matter).

Have you tried Nick's suggestion? I don't know much javascript.

[Tantirx]

Wow gjh42 you ROCK !! It's working!! And the date come server side...nice.

Thanks you a bunch...and you too niccol :)

[gjh42]

Glad it works for you! I didn't test it (hence the correction after posting)... I didn't actually look at the js function code beyond seeing what it accomplished, and it's interesting to see that the process (aside from the cleaner date retrieval) turned out identical in both cases. I could even have put the return where the break is if I had taken time to minimize the steps. A simple task has one optimal solution, I guess:)