Using javascript and a separate css for the header.

[Tantirx]

Basic info

- I am using v 1.3.9h
- this is a brand new install
- No add ons

OK I am doing a redesign of a site for the client and if you look at my mockup page at http://www.oceanabyssaquatics.ca/redo you will see that the header uses a javascript that changes the header to match the season or holiday (to see what I mean just just change the date on your computer to - let's say Jan 1 and then refresh the page). All together there are 21 different headers.

QUESTION 1: How can I implement this into the header of ZC?
QUESTION 2: Where is the best place to store the js files and the 21 images?


As you will see on the same page above, I also have a carousel type javascript at the very top of the main body of the page (Scrolling Ads) this also uses it's own css. If possible; I would like to implement this ad scroller at the top of the main body of ZC on ALL PAGES.

QUESTION 3: How can I implement this into the header of ZC?
QUESTION 4: Where is the best place to store the images, css and javascript?

Thank you all in advance for your assistance.

[kobra]

Seperate the logo from the head image as a transparent gif & name it logo.gif - - remainder is applied as a background image in css
I don't know what your js is but review the tutorial about adding/naming js files - - and for all pages it is in the js dir inside of your template dir
https://www.zen-cart.com/tutorials/index.php?article=36

[Tantirx]

Thank you for your assistance Let's deal with the first issue first. I cant do it like you suggested for a few reasons:

1. The logo uses more than 256 colors therefore a transparent gif is out of the question.

2. The logo itself will change on occasion. What you have described to me is fine if the logo itself is static and the only the background behind the logo changes.

That being said; if you have not actually looked at the mock up and the source as well as changed dates on your computer and refreshed your web browser in order to see the changes then I suggest you do so. Then I believe you will understand what I am asking.

If you have checked it out then you have likely misunderstood what I want...Let me know if you need more clarification.

BTW here is the javascript and the call is below it...in case you want to see it:

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

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

Thanks again

[kobra]

1. The logo uses more than 256 colors therefore a transparent gif is out of the question.

My photoshop can export to a 256 color gif...

2. The logo itself will change on occasion. What you have described to me is fine if the logo itself is static and the only the background behind the logo changes.

All the more reason to seperate it - then you only need change one image and not the dozen that you are talking about

[Tantirx]

My photoshop can export to a 256 color gif...


All the more reason to seperate it - then you only need change one image and not the dozen that you are talking about

I'm not trying to be difficult but I am aware of how Photoshop works. Not to mention the whole idea of the script is AUTOMATION and the ability to eliminate changing that part of the site...ever.

[kobra]

Then just add the js according to the Zen convention I linked earlier and add the rotator code to your header

[Tantirx]

I have added the javascript according to the Zen convention you linked earlier. But it's not working...it's showing up when you view source on the page but there is one more html line that needs to be added...namely:

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

This code is placed in the spot where header logo would go. The img src loads the "default logo header image" and the "onload" command overrides the "default logo header image" and the java script looks at the date on the users computer and loads the logo banner according to the date. The img src="./logo.jpg" is simply a fail safe in case the js fails.

More suggestions please.

[Tantirx]

Ok I found how to add and onload command :)

It still doesn't work Someone must have the expertise to assist me with more to get this to work. I chose Zen Cart for the huge amount of options available.

But; if I can't get this damn thing skinned then I will go back to another cart system with less options but I can get it to look the way it needs to look. I really hate CubeCart.

Can someone assist?

[kobra]

This code is placed in the spot where header logo would go.

How
about the actual file name and more of the surrounding code

[DrByte]

You posted a URL which you said is your mockup page.
What's the URL to your Zen Cart page where this alleged problem can be seen in action?