JS For Quote everyday

Follow @dhavalkuku

I have used a simple JavaScript to display a new Quote everyday. 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 10 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 that 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">
<p></p>

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

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="We cannot always build the future for our youth, but we can build our youth for the future.";

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

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

quotes[3]="Politics is war carried out without bloodshed, while war is politics carried out with bloodshed.";

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

quotes[5]="";

quotes[6]="";

quotes[7]="";

...

authors[0]="Franklin D. Roosevelt ";

authors[1]="Josh Billings";

authors[2]="Erma Bombeck";

authors[3]="Mao Zadong";

authors[4]="Oscar Wilde";

authors[5]=" ";

authors[6]=" ";

authors[7]=" ";
...

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>

What the script does.

1. I have defined a table for the Quote 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 automatically displayed on your Web Page.

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 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.

Follow @dhavalkuku

BlogTrixz