JavaScript for Quote of the Day

If you are wondering whether I manually add a Quote of the Day, the answer is no. I have used a simple JavaScript to display a new Quote everyday. There are a few JavaScript codes written by several people - some make you pay to buy their program, while others allow you to tap on to their Quotes database. I was looking for something simple, and unfortunately a number of those I found online do not work.

In the end, I looked up books and came up with a simple JavaScript which stores quotes and authors in a format called “arrays”. I keyed in 31 quotes and the script will display a new quote every day of the month.

If you would like to add one, go to Template ->Page Elements and click “Add a Page Element” to the place you want your Quote of the Day to appear. Add a "HTML/JavaScript".

The JavaScript I have used for the Quote of the Day you see in this site is as follows:-

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<table border="1" cellpadding="20" bordercolor="#ADD8E6">
<tr>
<td bgcolor="#E0FFFF">
<a href= "http://quotes-motivational-inspirational.blogspot.com/"> Quote of the Day</a>
<p></p>

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[1]="Friendship is far more tragic than love. It lasts longer.";

quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";

quotes[3]="";

quotes[4]="";

quotes[5]="";

quotes[6]="";

quotes[7]="";

quotes[8]="";

quotes[9]="";

quotes[10]="";

quotes[11]="";

quotes[12]="";

quotes[13]="";

quotes[14]="";

quotes[15]="";

quotes[16]="";

quotes[17]="";

quotes[18]="";

quotes[19]="";

quotes[20]="";

quotes[21]="";

quotes[22]="";

quotes[23]="";

quotes[24]="";

quotes[25]="";

quotes[26]="";

quotes[27]="";

quotes[28]="";

quotes[29]="";

quotes[30]="";

authors[0]="Erma Bombeck";

authors[1]="Oscar Wilde";

authors[2]="Josh Billings";

authors[3]="";

authors[4]="";

authors[5]="";

authors[6]="";

authors[7]="";

authors[8]="";

authors[9]="";

authors[10]="";

authors[11]="";

authors[12]="";

authors[13]="";

authors[14]="";

authors[15]="";

authors[16]="";

authors[17]="";

authors[18]="";

authors[19]="";

authors[20]="";

authors[21]="";

authors[22]="";

authors[23]="";

authors[24]="";

authors[25]="";

authors[26]="";

authors[27]="";

authors[28]="";

authors[29]="";

authors[30]="";

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</td>
</tr>
</table>

Allow me to elaborate what the script does.

1. I have defined a table for the Quote of the Day to be displayed in. You can of course change the “bordercolor” and “bgcolor” (background color) to whatever suits you. For a complete list of color values, you may refer to the Color Chart.

2. If you do not want a table but just a line of the Quote, simply remove these elements from the above script:-

<table border="1" bordercolor="#ADD8E6" cellpadding="20" bgcolor="#E0FFFF"> <tr> <td> </td> </tr> </table>

3. The first element of the arrays are [0]. I have for the purpose of this example entered the first 3 Quotes together with the corresponding authors' names. You can enter your favorite Quotes to fill up the remaining arrays. I have used Quotes from this Famous Motivational and Inspirational Quotes site.

4. Towards the bottom you will see this script:-

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

What it does is to call for the numerical date. For example, the date of this posting is 10th February. The script “quotes[d.getDate()-1]” will call for the number “10” and minus 1 from this number. The result is that the Quote displayed will be the one keyed in under “quotes[9]”. The reason for having to deduct 1 is because, as mentioned above, arrays must begin with [0]. Hence, if the date were the 1st February, deducting 1 will give you a value “0”, and the displayed quote will be the one that appears under “quotes[0]”.

Once you have saved the JavaScript, refresh your Blog page, and you should now have a Quote of the Day automatically displayed on your Web Page.

Important Note: When you key in the quotations or names, do not use characters like " or ; and do not press “Enter” within the quotation marks. These are special characters which are used by JavaScript.

Change Font type, size and color

Should you want to change the font face, size and color of the quotes, you can insert the <span style> tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-

<span style="color: rgb(255, 0, 0);">TEXT</span>

Insert these tags (highlighted in red) into the above JavaScript for Quote of the Day at these places:-

<span style="color: rgb(255, 0, 0);"> <script language="javascript" type="text/javascript"> \| \| \| </script> </span>

If you want to change the font type or color, you can do the same. Type any word in the “Compose” mode, highlight it and change the type or color through the toolbar. Go to “Edit HTML”, copy the <span style> code and insert that into the place shown above

JavaScript for Quote of the Day

0 comments:

Post a Comment

Labels