Adding Javascripts to index.php?

[Guest]

I've had a successful install of my second store. I want to add a javascript next to my logo.gif at the top of the page. I've got a solid knowledge of HTML and javascripts, etc, but I don't know the php language.

 

Can someone show me how and where to insert the following script so that it will display next to the logo.gif at the top of the page?

 

This part would be in the HEAD section of the page:

<script LANGUAGE="JavaScript">

// the following script displays the countdown timer
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "images/clock/1c.gif";
c2 = new Image(); c2.src = "images/clock/2c.gif";
c3 = new Image(); c3.src = "images/clock/3c.gif";
c4 = new Image(); c4.src = "images/clock/4c.gif";
c5 = new Image(); c5.src = "images/clock/5c.gif";
c6 = new Image(); c6.src = "images/clock/6c.gif";
c7 = new Image(); c7.src = "images/clock/7c.gif";
c8 = new Image(); c8.src = "images/clock/8c.gif";
c9 = new Image(); c9.src = "images/clock/9c.gif";
c0 = new Image(); c0.src = "images/clock/0c.gif";
Cc = new Image(); Cc.src = "images/clock/Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("May 28 2006 7:00:00");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
//  End -->

</script>

 

The 2nd part would be in the BODY section:

<div align="center">
<b>
<font face="Verdana" size="2">Countdown to Bugorama 57</font></b>
</div><center>
<table id="table2"><tr><td bgcolor="black" valign="bottom">
<img height=16 src="images/clock/0c.gif" width=11 name=x>
<img height=16 src="images/clock/0c.gif" width=11 name=a>
<img height=16 src="images/clock/0c.gif" width=11 name=b>
<img height=16 src="images/clock/Cc.gif" width=4 name=c>
<img height=16 src="images/clock/0c.gif" width=11 name=y>
<img height=16 src="images/clock/0c.gif" width=11 name=z>
<img height=16 src="images/clock/Cc.gif" width=4 name=cz>
<img height=16 src="images/clock/0c.gif" width=11 name=d>
<img height=16 src="images/clock/0c.gif" width=11 name=e>
<img height=16 src="images/clock/Cc.gif" width=4 name=f>
<img height=16 src="images/clock/0c.gif" width=11 name=g>
<img height=16 src="images/clock/0c.gif" width=11 name=h>
</td></tr></table>
</center>

<div align="center">
<font size="1" face="Verdana" color="#FF0000">(Days : Hours : Minutes : Seconds)</font>
</div>

 

The store is located at: http://www.mattdavisracing.com/catalog

 

THANK YOU!

 

Scott Faivre

[spax]

If you want that on every page, I would put the call for it in header.php or footer.php. There is some familiar HTML in those two files.

If you can't get the actual function working from there, you could save it to a .js file and call it in the <head> from all the root level php files.

[Guest]

If you want that on every page, I would put the call for it in header.php or footer.php. There is some familiar HTML in those two files.

 

I opened the header.php file and I located the area on line 57 where the logo.gif is. Can I just stick that javascript in there? Where would the part that goes in the HEAD tags go?

 

If you can't get the actual function working from there, you could save it to a .js file and call it in the <head> from all the root level php files.

 

This second solution is above my present understanding of php :blink: without some step by step instructions as how to do this. If I might beg you for some assistance :blush: , I'd GREATLY appreciate it! ;)

 

THANKS!

Scott Faivre

[spax]

Where you see the php closing tag in header.php ?> on the line below it, put your head section of javascript, so:

 

?>
<script LANGUAGE="JavaScript">

// the following script displays the countdown timer
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "images/clock/1c.gif";
c2 = new Image(); c2.src = "images/clock/2c.gif";
c3 = new Image(); c3.src = "images/clock/3c.gif";
c4 = new Image(); c4.src = "images/clock/4c.gif";
c5 = new Image(); c5.src = "images/clock/5c.gif";
c6 = new Image(); c6.src = "images/clock/6c.gif";
c7 = new Image(); c7.src = "images/clock/7c.gif";
c8 = new Image(); c8.src = "images/clock/8c.gif";
c9 = new Image(); c9.src = "images/clock/9c.gif";
c0 = new Image(); c0.src = "images/clock/0c.gif";
Cc = new Image(); Cc.src = "images/clock/Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("May 28 2006 7:00:00");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->

</script>

 

Then put the body part of it in whatever table cell you can fit it in.

 

If it doesn't work, put all that head section of javascript into a seperate file, save it as countdown.js or whatever you want, in your includes directory and then call for it in the <head> tag of index.php, so:

 

<script type="text/javascript" language="JavaScript1.1" src="includes/countdown.js"></script>

 

If the second way works, countdown.js, you would need to call for it in every root level file of your store that you wanted it to show. That means all files in your catalog directory.

 

Actually, if you are going to do that, you could also put the body section in any file. You could even create a new infobox and have it in column_left or column_right.php.