Tip of the day script

kabbinfever · 03-01-2009, 07:55 PM

HI -

I'm creating a golf website and the clients asked to put a "Golf Tip" on the site that could be changed. A Google search led me to your script (copied below) for "Tip of the Day", which seems to be exactly -- almost -- what I need. Can you tell me how to change the font color (for the tips) from gray to White? Also, is it possible to alter the script to make the tips weekly rather than daily?
Thanks much,
Richard

Code:

<table border="0" width="100%" bgcolor="#E8E8E8" cellspacing="0" cellpadding="0">
<tr><td width="100%">

<script>
<!--

/*
Tip of the day script
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

var today_obj=new Date()
var today_date=today_obj.getDate()

var tips=new Array()
//Configure the below variable to contain the "header" of the tip
var tiptitle='<img src="../../tip.gif"> <b>JavaScript Tip of the day</b><br />'

//Configure the below array to hold the 31 possible tips of the month
tips[1]='Tip 1 goes here'
tips[2]='Tip 2 goes here'
tips[3]='Tip 3 goes here'
tips[4]='Tip 4 goes here'
tips[5]='Tip 5 goes here'
tips[6]='Tip 6 goes here'
tips[7]='Tip 7 goes here'
tips[8]='Tip 8 goes here'
tips[9]='Tip 9 goes here'
tips[10]='Tip 10 goes here'
tips[11]='Tip 11 goes here'
tips[12]='Tip 12 goes here'
tips[13]='Tip 13 goes here'
tips[14]='Tip 14 goes here'
tips[15]='Tip 15 goes here'
tips[16]='Tip 16 goes here'
tips[17]='Tip 17 goes here'
tips[18]='Tip 18 goes here'
tips[19]='Tip 19 goes here'
tips[20]='Tip 20 goes here'
tips[21]='Tip 21 goes here'
tips[22]='Tip 22 goes here'
tips[23]='Tip 23 goes here'
tips[24]='Tip 24 goes here'
tips[25]='Tip 25 goes here'
tips[26]='Tip 26 goes here'
tips[27]='Tip 27 goes here'
tips[28]='Tip 28 goes here'
tips[29]='Tip 29 goes here'
tips[30]='Tip 30 goes here'
tips[31]='Tip 31 goes here'

document.write(tiptitle)
document.write(tips[today_date])

//-->
</script>

</td></tr></table>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

peteyb383 · 03-01-2009, 09:06 PM

Change this code:

Code:

document.write(tiptitle)
document.write(tips[today_date])

To this:

Code:

document.write(tiptitle);
document.write('<span style="color: white;">');
document.write(tips[today_date]);
document.write('</span>');

jmrker · 03-02-2009, 03:00 AM

Modified for Week of the Year:

Code:

<html>
<head>
<title>Tip of the Week</title>
<script type="text/javascript">
// Modified for: http://www.codingforums.com/showthread.php?t=160083

Date.prototype.getWeek = function() {
  var onejan = new Date(this.getFullYear(),0,1);
  return Math.ceil((((this - onejan) / 86400000) + onejan.getDay())/7);
} 
</script>
</head>
<body>
<table border="0" width="100%" bgcolor="#E8E8E8" cellspacing="0" cellpadding="0">
<tr><td width="100%">

<script type="text/javascript">

/*
Tip of the day script
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

var today_obj=new Date()
// var today_date=today_obj.getDate()

var tips=new Array()

//Configure the below array to hold the 52 possible tips of the week for the year
tips[0] ='Not used';
tips[1] ='Tip 1 goes here';
tips[2] ='Tip 2 goes here';
tips[3] ='Tip 3 goes here';
tips[4] ='Tip 4 goes here';
tips[5] ='Tip 5 goes here';
tips[6] ='Tip 6 goes here';
tips[7] ='Tip 7 goes here';
tips[8] ='Tip 8 goes here';
tips[9] ='Tip 9 goes here';
tips[10]='Tip 10 goes here';
tips[11]='Tip 11 goes here';
tips[12]='Tip 12 goes here';
tips[13]='Tip 13 goes here';
tips[14]='Tip 14 goes here';
tips[15]='Tip 15 goes here';
tips[16]='Tip 16 goes here';
tips[17]='Tip 17 goes here';
tips[18]='Tip 18 goes here';
tips[19]='Tip 19 goes here';
tips[20]='Tip 20 goes here';
tips[21]='Tip 21 goes here';
tips[22]='Tip 22 goes here';
tips[23]='Tip 23 goes here';
tips[24]='Tip 24 goes here';
tips[25]='Tip 25 goes here';
tips[26]='Tip 26 goes here';
tips[27]='Tip 27 goes here';
tips[28]='Tip 28 goes here';
tips[29]='Tip 29 goes here';
tips[30]='Tip 30 goes here';
tips[31]='Tip 31 goes here';
tips[32]='Tip 32 goes here';
tips[33]='Tip 33 goes here';
tips[34]='Tip 34 goes here';
tips[35]='Tip 35 goes here';
tips[36]='Tip 36 goes here';
tips[37]='Tip 37 goes here';
tips[38]='Tip 38 goes here';
tips[39]='Tip 39 goes here';
tips[40]='Tip 40 goes here';
tips[41]='Tip 41 goes here';
tips[42]='Tip 42 goes here';
tips[43]='Tip 43 goes here';
tips[44]='Tip 44 goes here';
tips[45]='Tip 45 goes here';
tips[46]='Tip 46 goes here';
tips[47]='Tip 47 goes here';
tips[48]='Tip 48 goes here';
tips[49]='Tip 49 goes here';
tips[50]='Tip 50 goes here';
tips[51]='Tip 51 goes here';
tips[52]='Tip 52 goes here';

//Configure the below variable to contain the "header" of the tip
var tiptitle='<img src="tip.gif" alt="tip.gif"> <b>Tip of the week</b><br />';

document.write(tiptitle);
document.write('<span style="color: red;">');
alert(today_obj.getWeek());
document.write(tips[today_obj.getWeek()]);
document.write('</span>');

</script>

</td></tr></table>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

jmrker · 03-04-2009, 04:12 AM

Quote:

Originally Posted by jeromine

whats going on here i dont know plz tell me detail

(removing spam link)

What is it that you don't understand?

kabbinfever · 08-19-2009, 01:11 PM

Hope I've got the right place to post this question...

I also used the Tip of the Week code on a fishing site that we have. Tip #34 - prior to placing it in the script - had a link to navigation lighting code (the word "code" was the link). The link obviously disappeared once it was in the script. Is there a way to put the link back?

jmrker · 08-19-2009, 02:41 PM

Quote:

Originally Posted by kabbinfever

Hope I've got the right place to post this question...

I also used the Tip of the Week code on a fishing site that we have. Tip #34 - prior to placing it in the script - had a link to navigation lighting code (the word "code" was the link). The link obviously disappeared once it was in the script. Is there a way to put the link back?

What is the contents of the 'tip' and where is the link supposed to go?

kabbinfever · 08-19-2009, 03:21 PM

here's a snippet:

tips[32]='As soon as you pull the boat out of the water for the winter, make every effort to clean the hull immediately. If you wait until it dries, you will have to struggle with the marine growth that would have otherwise rinsed right off.';
tips[33]='As soon as you pull the boat out of the water for the winter, make every effort to clean the hull immediately. It will also help to put a light coat of wax on as well – the slicker the hull, the less resistance/drag and the greater the speed and gas mileage you’ll achieve next season.';
tips[34]='Operating at night or in reduced visibility can present some special challenges to boaters. Most recreational vessels are way less than 30 feet in length and, according to the Rules of the Road, shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going. Are your navigation lights up to code?';
tips[35]='Operating at night or in reduced visibility can present some special challenges to boaters. Most recreational vessels are way less than 30 feet in length and, according to the Rules of the Road, shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going. Are your navigation lights up to code?';
tips[36]='A battery can lose – depending on how and where it is stored – up to 30% of its charge per month, just sitting around the house or garage! And there are all kinds of things that affect battery charge and loss thereof – like temperature, humidity, state of discharge, age of battery, etc. Make sure to keep your battery charged during the off-season.';

Tips #34 & #35 (same tip) have, as the last word in the tip - "code". That is where the link would go; the target would be: http://boatsafe.com/nauticalknowhow/sidelights.htm

If you'd like to see it on the site, it is: http://www.onthelake.net/fishing/rkarlstips.htm

Thanks much!

Philip M · 08-19-2009, 04:10 PM

tips[34]='Tip 34 Operating at night or in reduced visibility can present some special challenges to boaters. Most recreational vessels are way less than 30 feet in length and, according to the Rules of the Road, shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going. Are your navigation lights up to ' + '<a href = "http://boatsafe.com/nauticalknowhow/sidelights.htm">this legal standard?</a>';

A small point - you should include

tips[53]='Tip 53 goes here';

as otherwise the script will fail on 31st December.

jmrker · 08-19-2009, 05:14 PM

PhillipM is right. Some years are longer than 52 weeks even without an extra leap year day.

Anyway, here's a modified version of the code posted earlier.
Note, you had tip #34 and #35 the same, so I modified one a little more to show that you can
put other HTML and CSS tags into the display to spice it up a little more.

I also added a test button to see all possible tips without waiting for a year to pass.
Remove that part when/if of no use to you.

Code:

<html>
<head>
<title>Tip of the Week</title>
<script type="text/javascript">
// Modified for: http://www.codingforums.com/showthread.php?t=160083

Date.prototype.getWeek = function() {
  var onejan = new Date(this.getFullYear(),0,1);
  return Math.ceil((((this - onejan) / 86400000) + onejan.getDay())/7);
} 
</script>
</head>
<body>
<table border="0" width="100%" bgcolor="#E8E8E8" cellspacing="0" cellpadding="0">
<tr><td width="100%">

<script type="text/javascript">

/*
Tip of the day script
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

var today_obj=new Date()
// var today_date=today_obj.getDate()

var tips=new Array()

//Configure the below array to hold the 52 possible tips of the week for the year
tips[0] ='Not used';
tips[1] ='Tip 1 goes here';
tips[2] ='Tip 2 goes here';
tips[3] ='Tip 3 goes here';
tips[4] ='Tip 4 goes here';
tips[5] ='Tip 5 goes here';
tips[6] ='Tip 6 goes here';
tips[7] ='Tip 7 goes here';
tips[8] ='Tip 8 goes here';
tips[9] ='Tip 9 goes here';
tips[10]='Tip 10 goes here';
tips[11]='Tip 11 goes here';
tips[12]='Tip 12 goes here';
tips[13]='Tip 13 goes here';
tips[14]='Tip 14 goes here';
tips[15]='Tip 15 goes here';
tips[16]='Tip 16 goes here';
tips[17]='Tip 17 goes here';
tips[18]='Tip 18 goes here';
tips[19]='Tip 19 goes here';
tips[20]='Tip 20 goes here';
tips[21]='Tip 21 goes here';
tips[22]='Tip 22 goes here';
tips[23]='Tip 23 goes here';
tips[24]='Tip 24 goes here';
tips[25]='Tip 25 goes here';
tips[26]='Tip 26 goes here';
tips[27]='Tip 27 goes here';
tips[28]='Tip 28 goes here';
tips[29]='Tip 29 goes here';
tips[30]='Tip 30 goes here';
tips[31]='Tip 31 goes here';
tips[32]='As soon as you pull the boat out of the water for the winter, make every effort to clean the hull immediately.'
        +' If you wait until it dries, you will have to struggle with the marine growth that would have otherwise rinsed right off.';
tips[33]='As soon as you pull the boat out of the water for the winter, make every effort to clean the hull immediately.'
        +' It will also help to put a light coat of wax on as well – the slicker the hull, the less resistance/drag'
        +' and the greater the speed and gas mileage you’ll achieve next season.';
tips[34]='Operating at night or in reduced visibility can present some special challenges to boaters.'
        +' <br>Most recreational vessels are way <span style="font-size:3em;color:blue">less than 30 feet</span> in length and,'
        +' <br>according to the Rules of the Road,'
        +' shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going.'
        +' <p>Are your navigation lights up to <a href="http://boatsafe.com/nauticalknowhow/sidelights.htm">code</a>?';
tips[35]='Operating at night or in reduced visibility can present some special challenges to boaters.'
        +' Most recreational vessels are way less than 30 feet in length and, according to the Rules of the Road,'
        +' shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going.'
        +' Are your navigation lights up to <a href="http://boatsafe.com/nauticalknowhow/sidelights.htm">code</a>?';
tips[36]='A battery can lose – depending on how and where it is stored – up to 30% of its charge per month,'
        +' just sitting around the house or garage! And there are all kinds of things that affect battery charge'
        +' and loss thereof – like temperature, humidity, state of discharge, age of battery, etc.'
        +' Make sure to keep your battery charged during the off-season.';
tips[37]='Tip 37 goes here';
tips[38]='Tip 38 goes here';
tips[39]='Tip 39 goes here';
tips[40]='Tip 40 goes here';
tips[41]='Tip 41 goes here';
tips[42]='Tip 42 goes here';
tips[43]='Tip 43 goes here';
tips[44]='Tip 44 goes here';
tips[45]='Tip 45 goes here';
tips[46]='Tip 46 goes here';
tips[47]='Tip 47 goes here';
tips[48]='Tip 48 goes here';
tips[49]='Tip 49 goes here';
tips[50]='Tip 50 goes here';
tips[51]='Tip 51 goes here';
tips[52]='Tip 52 goes here';
tips[53]='Tip 53 goes here ... Man that was a long year dude, but I had more time to fish!!!';

//Configure the below variable to contain the "header" of the tip
var tiptitle='<img src="tip.gif" alt="tip.gif"> <b>Tip of the week</b><br />';

document.write(tiptitle);
document.write('<span style="color: red;">');
// alert(today_obj.getWeek());
document.write(tips[today_obj.getWeek()]);
document.write('</span>');

</script>

</td></tr></table>

<!-- for testing purposes -->
<p>Show Tip #<input id="TipNo" type="text" value="" size="3">
<button onclick="document.getElementById('TestTipDisplay').innerHTML = tips[document.getElementById('TipNo').value]">
Show tips 1...52</button>
<div id="TestTipDisplay"></div>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

Good Luck on the site!

kabbinfever · 08-19-2009, 06:16 PM

So that all can see, thanks to both of you for your helpful posts - especially the part about week/tip #53. I am sure that on 1-1-10 I would have had no clue as to what had happened. This is the third time I have received excellent help from Coding Forums, and I really appreciate it. Thanks so much!

12 Pack Mack · 08-19-2009, 07:58 PM

kabbinfever:

Or try this.

The "week" always starts on a Sunday, so that week 1 may be longer than 7 days. There are never more than 52 weeks.

This code rotates the tip of the day, every day, not every week. 



 It uses  four, 13 week sections, so that the tips don't become stale.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	

	function init(){

		var tips = [];
		tips[1] ='Tip 1 goes here';
		tips[2] ='Tip 2 goes here';
		tips[3] ='Tip 3 goes here';
		tips[4] ='Tip 4 goes here';
		tips[5] ='Tip 5 goes here';
		tips[6] ='Tip 6 goes here';
		tips[7] ='Tip 7 goes here';
		tips[8] ='Tip 8 goes here';
		tips[9] ='Tip 9 goes here';
		tips[10]='Tip 10 goes here';
		tips[11]='Tip 11 goes here';
		tips[12]='Tip 12 goes here';
		tips[13]='Tip 13 goes here';
		tips[14]='Tip 14 goes here';
		tips[15]='Tip 15 goes here';
		tips[16]='Tip 16 goes here';
		tips[17]='Tip 17 goes here';
		tips[18]='Tip 18 goes here';
		tips[19]='Tip 19 goes here';
		tips[20]='Tip 20 goes here';
		tips[21]='Tip 21 goes here';
		tips[22]='Tip 22 goes here';
		tips[23]='Tip 23 goes here';
		tips[24]='Tip 24 goes here';
		tips[25]='Tip 25 goes here';
		tips[26]='Tip 26 goes here';
		tips[27]='Tip 27 goes here';
		tips[28]='Tip 28 goes here';
		tips[29]='Tip 29 goes here';
		tips[30]='Tip 30 goes here';
		tips[31]='Tip 31 goes here';
		tips[32]='As soon as you pull the boat out of the water for the winter, make every effort to clean the hull immediately.'
       		 +' If you wait until it dries, you will have to struggle with the marine growth that would have otherwise rinsed right off.';
		tips[33]='Make every effort to clean the hull immediately.';       		 
		tips[34]='Operating at night or in reduced visibility can present some special challenges to boaters.'
       		 +' Most recreational vessels are way <span class="large_blue">less than 30 feet<\/span> in length and,'
       		 +' According to the Rules of the Road,'
       		 +' shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going.'
       		 +' Are your navigation lights up to <a href="http:\/\/boatsafe.com\/nauticalknowhow\/sidelights.htm">code<\/a>?';
		tips[35]='Rules of the Road,'
       		 +' shall be equipped with navigation lights, allowing others to not only see you, but determine which way you are going.'
      		 +' Are your navigation lights up to <a href="http:\/\/boatsafe.com\/nauticalknowhow\/sidelights.htm">code<\/a>?';
		tips[36]='And there are all kinds of things that affect battery charge'
       		 +' and loss thereof, like temperature, humidity, state of discharge, age of battery, etc.'
       		 +' Make sure to keep your battery charged during the off-season.';
		tips[37]='Tip 37 goes here';
		tips[38]='Tip 38 goes here';
		tips[39]='Tip 39 goes here';
		tips[40]='Tip 40 goes here';
		tips[41]='Tip 41 goes here';
		tips[42]='Tip 42 goes here';
		tips[43]='Tip 43 goes here';
		tips[44]='Tip 44 goes here';
		tips[45]='Tip 45 goes here';
		tips[46]='Tip 46 goes here';
		tips[47]='Tip 47 goes here';
		tips[48]='Tip 48 goes here';
		tips[49]='Tip 49 goes here';
		tips[50]='Tip 50 goes here';
		tips[51]='Tip 51 goes here';
		tips[52]='Tip 52 goes here';

		/* Do not edit below this line */

		var tipDisplay = "";
		var endDate = new Date();
		endDate.setHours(0,0,0,0);		
		var eDay = endDate.getDay()+1;
		var startDate = new Date("1/1/"+endDate.getFullYear());
		var sDay = startDate.getDay()+1;
		var daysApart = Math.round((endDate-startDate)/86400000);
		var tmp1 = Math.abs(Math.abs(1-sDay)-7);
		var tmp2 = tmp1-(parseInt(tmp1/7)*7);
		var nWeek = ((daysApart-tmp2-eDay+1)/7);
		if (sDay > 1 || eDay > 1){nWeek++;}
		nWeek = nWeek == 0 ? 1 : nWeek > 52 ? 52 : nWeek;	
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "tip_of_the_day")
				{
				 tipDisplay = nDiv[i];
				}
			}	
		var nSection = Math.ceil(nWeek / 13) - 1;		
		var nIndex = endDate.getDate();
		nIndex = nIndex <= 13 ? nIndex
				      : nIndex > 13 && nIndex < 27 ? nIndex - 13 
				      : nIndex > 26 ? nIndex - 26
				      : null;		
		var nTip = ((nSection) * 13) + nIndex;
		tipDisplay.innerHTML = tips[nTip];		
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	.tip_of_the_day {font-family: helvetica; font-size: 11pt; width: 285px; height: 165px; overflow: auto; 
			 text-align: justify; text-indent: 15px; padding: 5px; border: 1px solid black;
			 background-color: #f0fff0;} 
	.large_blue {font-size: 12pt; color: blue;}

</style>
</head>
	<body>
		<div class="tip_of_the_day"></div>
	</body>
</html>

Philip M · 08-19-2009, 08:36 PM

Well, that is one way to calculate the week number. Another way is jmrker's. Most people can work out which is the simplest and best.

pazpazpaz · 08-24-2009, 12:50 AM

this is awesome...
i've been trying to learn javascript to create a new website and this is almost exactly what i want.
what would make it PERFECT and make me very happy would if the tip.gif could be dynamic also.
happy to have 1.gif, 2.gif in a folder but i just can't figure out how to get this to work.

many thanks in advance

Andy

jmrker · 08-24-2009, 01:33 AM

How many tip.gif images?
Where you do want them to appear?
Are they to replace the 'logo' in the link of post #7?

Or somehow incorporated into each tip.
If the latter, then you can just put the image as an <img...> tag into the tip[1]...tip[53] directly.

tnago · 09-03-2009, 03:17 PM

Hi

I found script on the web for Tip of day and event once per browser session. But was unable to find a script where tip of day is only displayed only once per browser session. Can anyone direct me to right place or help me achieve this? I am in asp enviornment.

Thanks in advance.