Using javascript and a separate css for the header.

[Tantirx]

Sorry all...brain fart

The url for the ZC installation is http://www.oceanabyssaquatics.ca/store/ I have done nothing but trying to skin this thing. As u see I have the background image in place and the overall width is where it should be. I did also make a new template called abyss and followed the directions in the tutorials. I did find some discrepancies between the tutorials and advice in other threads. That is why when you view source on the main ZC page you will see two of the same javascript instances in two different locations....arg.

Another Note: the bar above (what is now the zc logo) with the home and login links will stay there. The header/logo/js combo will be where the ZC logo and the "TagLine Here" text is. The header should be 100px x 150px (which it is).

I know CSS well as well as HTML....I can loosely follow php and javascript (and I do emphasis loosely)

I believe the onload should be in the "logowrapper" and not the body tag.

Thanks for looking

[DrByte]

There are a few ways to tackle this situation:

a) use javascript, as you're doing. The downside is that this creates a (brief) slowdown in page execution while the javascript processes. And, since it doesn't process until the page has fully loaded, the actual desired image doesn't get loaded until after the rest of the page has finished loading (when the javascript tells the browser which image to load).
If that's what you want to do, you'll need to move the onload() out of the place you've put it, and into the actual image code inside your template file.
(The onload functionality you're hooking into is for page-wide onloads, not element-specific onloads like images.)

tpl_header.php (your custom version of it):

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, '', '', ' onload="setImgByDate(this,holiday)"') . '</a>'; ?></div>

b) Or you could just write the logic into PHP code to select the right image immediately before the page is even sent to the browser.
Same line of code from the template, with a different change:

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $selectedSeasonalImage, HEADER_ALT_TEXT) . '</a>'; ?></div>

Then create another new file for the calculation: /includes/extra_configures/select_seasonal_header_image.php

<?php
// convert your javascript logic for calculating the right image here
// and set $selectedSeasonalImage to that image filename as the last thing you do in this file.

blah 
blah
blah
$selectedSeasonalImage = [the new logo_xyz.jpg filename]

[Tantirx]

tried your first suggestion page went blank (only page background showing)

Second suggestion just simply did not work. As you can see the page is completely blank with NO CODE AT ALL. Here is the code I uses for the selected_seasonal_image.php file (which is located in /includes/extra_configures)

<?php
// convert your javascript logic for calculating the right image here
// and set $selectedSeasonalImage to that image filename as the last thing you do in this file.


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;
}
}
}

$selectedSeasonalImage = [
[ "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/abyssimages/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" ],

As you can see I used the fullpath to the images in the code (just to be sure.

[Tantirx]

What next?

[DrByte]

1. Probably a typo of some sort. Or an error on my part. mismatched quotation marks and apostrophes?
Reference: https://www.zen-cart.com/tutorials/index.php?article=82

2. You can't just dump javascript code into a PHP file and have it magically work as PHP. You'll have to rewrite your logic into PHP format.




Edit: yup, missing apostrophe at the end of my suggested change.

[Tantirx]

1. Probably a typo of some sort. Or an error on my part. mismatched quotation marks and apostrophes?
Reference: https://www.zen-cart.com/tutorials/index.php?article=82

2. You can't just dump javascript code into a PHP file and have it magically work as PHP. You'll have to rewrite your logic into PHP format.




Edit: yup, missing apostrophe at the end of my suggested change.

Rewriting the logic is completely alien to me

Like I mentioned before my thing is HTML, XHTML, CSS ...javascript and php are like Chinese to me. I can implement scripts (and I have done so hundreds of times with pre-made scripts). But trying to implement them into a complex language like php is completely foreign.

[kobra]

Like I mentioned before my thing is HTML, XHTML, CSS ...javascript and php are like Chinese to me. I can implement scripts (and I have done so hundreds of times with pre-made scripts). But trying to implement them into a complex language like php is completely foreign.

Have you has success with this in just a html page??

Edited:
I believe that your demo page might have been this??

[Tantirx]

Have you has success with this in just a html page??

Edited:
I believe that your demo page might have been this??

Yes the demo page shows how it should work. The top part (logo banner with the fall leaves) is the script I am workin on now. The part below is the ad banner (this will eventually be at the very top of the main content column) and uses jquery and 3 js files.

As you can see from my mockup (demo) page...the design is sound...it's just a matter of implementation into a language I have almost no clue about; namely php.

[kobra]

Looking at your 2 pages I did not see alignment in the js being used??
The ZenCart is using jscript_seasons.js and seasons is not seen on your mockup page??

If this is square and correct try entering in a COPY for your template in the tpl_header.php file and change from

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

And replace with this and see what results

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><a href="http://www.oceanabyssaquatics.ca/store/"><img src="./logo.jpg" onload="setImgByDate(this,holiday)"></div>

If this works should later add the html ALT entry

[DrByte]

Rewriting the logic is completely alien to me

Like I mentioned before my thing is HTML, XHTML, CSS ...javascript and php are like Chinese to me. I can implement scripts (and I have done so hundreds of times with pre-made scripts). But trying to implement them into a complex language like php is completely foreign.

Fine.
Use the corrected code I posted for approach #1, and live with the consequences of using javascript to accomplish what you're after.