Book of the Week

**Jay Dog** · 09-10-2013, 02:33 PM

Hi,

I've been asked by the library to come up with a bit of code that will show them a book of the week.

I have this code here which is a birthday announcer which works OK however this shows a book or text a day, not a week, if I want it for a week using this code then I have to copy and paste the bit of code 7 times:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--Copy and paste into the HEAD section of your HTML.-->

<SCRIPT language="JavaScript" type="text/javascript">

<!-- Date Message JavaScript at-->
<!-- http://www.rainbow.arch.scriptmania.com/scripts/ -->

<!-- Begin
var days = new Array();
var msgs = new Array();

days[0] = "September 10, 2013";
msgs[0] = "<IMG src='http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg'>";

days[1] = "September 11, 2013";
msgs[1] = "<IMG src='http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg'>";



days[2] = "September 12, 2013";
msgs[2] = "<IMG src='http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg'>";

days[3] = "September 13, 2013";
msgs[3] = "<IMG src='http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg'>";

days[4] = "December 24, 2005";
msgs[4] = "<BR>Today is Christmas Eve, thanks for visiting!";

days[5] = "December 24, 2005";
msgs[5] = "<BR>Welcome to this page on Christmas Day!";

days[6] = "January 01, 2006";
msgs[6] = "<BR>Happy New Year!";

var months = new Array("",
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
);

var today = new Date(); // today
var mon = months[today.getMonth() + 1]; // month
var day = today.getDate(); // day
var year = y2k(today.getYear()); // year

function dateMsg() {
for (i = 0; i < days.length; i++) {
tempdate = new Date(days[i]);
tempmonth = months[tempdate.getMonth() + 1];
tempday = tempdate.getDate();
tempyear = y2k(tempdate.getYear());
if (year == tempyear && mon == tempmonth && day == tempday)
return("" + msgs[i]); // returns day message
   }
return("Today is " + mon + " " + day + ", " + year + "."); // returns default
}

// Y2K Fix Function
function y2k(year) {
if (year < 2000)
year = year + 1900;
return year;
}
//  End -->
</SCRIPT>


</head>

<body>

<!--Simply copy and paste it where you wish it to appear.-->



<table width="200" border="0" align="center">
  <tr>
    <td><center><script>
document.write(dateMsg());
</script></center></td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#760d09"><font size=3 color="#FFFFFF"><strong>Book of the Week</strong></font></td>
  </tr>
</table>






</body>
</html>

Is there a way to modify this code so that it will show a specific book within a set week?

Thanks,

Jay Dog

**molendijk** · 09-10-2013, 05:52 PM

This may be helpful.

**Jay Dog** · 09-11-2013, 12:19 PM

Hi, thanks man but I'm going to be perfectly honest, that stuff seems a bit beyond me I'm afraid, I'll have a go at it but can't seem to connect the dots, but again thanks.

**Jay Dog** · 09-11-2013, 03:33 PM

If I can't get a weekly image, how can I add a link from the book image to another webpage?

**jscheuer1** · 09-11-2013, 04:37 PM

Well, a book of the week could be as simple as:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Book (or anything) of the Week - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" /><script type="text/javascript">
Date.prototype.getWeek = function() {
 var onejan = new Date(this.getFullYear(),0,1);
 return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
 };
</script>
</head>
<body>
<script type="text/javascript">
document.write('<img src="book_' + new Date().getWeek() + '.jpg" alt="" title="">')
</script>
</body>
</html>

Right now that would look for:

book_37.jpg

And you would have to have a book_#[#].jpg for each week in the year (starting at 1 and ending with 53). If you have only - say 10 (any number less than 52, really) books and you want to rotate through them in order, that can be arranged. And we could have an image and a message for each book, or just a message, or just an image (like in the above). And the message and/or image (whichever are used) could be linked. The images could have more descriptive names.

Please tell me what you think you would like, and how many books you have.

**molendijk** · 09-11-2013, 06:32 PM

John's solution is simpler and more elegant than what I was just about to post before I saw his script. I'll post mine still, because it may give you a little bit more freedom in choosing your book-images. The highlighted part applies to week 37 (= this week). You can make as many if(weeknr== ...) as you want.

Code:

<script>
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
} 
var weeknr=new Date().getWeek();

function weekly_book(which_book)
{
document.write("<div style='position: absolute; width: 100%; margin-left:-20px; top: 50%; margin-top: -185px; text-align: center'><img src='"+which_book+"'style='position: relative;height:350px' alt=''><br><a style='text-align: center'>Book of the week</a></div>")
}
</script>

<script>
if(weeknr==37){weekly_book('http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg')}
</script>

**jscheuer1** · 09-12-2013, 12:13 AM

Hi Arie,

That's workable too. There are so many possibilities. What we need to know is exactly what Jay Dog has in mind. Like

How many books?
Do you need messages and images, just images, or just messages?
Do any of those have to be linked?

Here's one possibility:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Book of the Week - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#bookoftheweek {
	text-align: center;
}
#bookoftheweek img {
	width: 230px;
	height: 346px;
}
</style>
<script type="text/javascript">
Date.prototype.getWeek = function() {
 var onejan = new Date(this.getFullYear(),0,1);
 return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
 };
(function(){
	var books = [
		'http://ecx.images-amazon.com/images/I/51yMJ%2Ba6TlL._SY346_PJ.jpg',
		'http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJ.jpg',
		'http://ecx.images-amazon.com/images/I/51gj25hEcPL._SY346_PJ.jpg',
		'http://ecx.images-amazon.com/images/I/510%2BzdA699L._BO2,204,203,200_PI.jpg',
		'http://ecx.images-amazon.com/images/I/51r8R67hEhL._BO2,204,203,200_PI.jpg',
		'http://ecx.images-amazon.com/images/I/51M9P2NQnPL._SY346_PJ.jpg',
		'http://ecx.images-amazon.com/images/I/51tEjskdelL._SY346_.jpg'
	], bl = books.length, months = [
		'January', 'February', 'March', 'April', 'May', 'June',
		'July', 'August', 'September', 'October', 'November', 'December'
	], d = new Date(), weekof,
	weekimage = '<img src="' + books[d.getWeek() % bl - 1] + '" alt="" title="">';
	while(d.getDay()){d.setDate(d.getDate() - 1);}
	weekof = 'Sunday ' + months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
	window.bookoftheweek = weekof + '<br>' + weekimage;
})();
</script>
</head>
<body>
<div id="bookoftheweek">
Book of the Week for the Week of:<br>
<script type="text/javascript">
document.write(bookoftheweek);
</script>
</div>
</body>
</html>

**Jay Dog** · 09-12-2013, 10:51 AM

WOW!!!

A huge thank you, this is very impressive. I have a working model based on the first one suggested by John. However, is there a way that I can have text that is weekly based instead of me copying it every day for a week?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pete's read of the week</title>



<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" /><script type="text/javascript">
Date.prototype.getWeek = function() {
 var onejan = new Date(this.getFullYear(),0,1);
 return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
 };
</script>
<!--Copy and paste into the HEAD section of your HTML.-->

<SCRIPT language="JavaScript" type="text/javascript">

<!-- Date Message JavaScript at-->
<!-- [url]http://www.rainbow.arch.scriptmania.com/scripts/[/url] -->

<!-- Begin
var days = new Array();
var msgs = new Array();

days[0] = "September 10, 2013";
msgs[0] = "<IMG src='http://www.bigwood.nottingham.sch.uk/uploads/libray/library4.jpg'>";

days[1] = "September 11, 2013";
msgs[1] = "<IMG src='http://www.bigwood.nottingham.sch.uk/uploads/botw1.jpg'>";



days[2] = "September 12, 2013";
msgs[2] = "<BR>Hello! Pete the Library Pigeon here! My friend Harry recommended a remarkable book to me, it is entitled: Northern Lights by Philip Pullman. It uses many language techniques and comparisons, which make it very interesting!";

days[3] = "September 13, 2013";
msgs[3] = "<IMG src='http://www.bigwood.nottingham.sch.uk/uploads/botw1.jpg'>";

days[4] = "December 24, 2005";
msgs[4] = "<BR>Today is Christmas Eve, thanks for visiting!";

days[5] = "December 24, 2005";
msgs[5] = "<BR>Welcome to this page on Christmas Day!";

days[6] = "January 01, 2006";
msgs[6] = "<BR>Happy New Year!";

var months = new Array("",
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
);

var today = new Date(); // today
var mon = months[today.getMonth() + 1]; // month
var day = today.getDate(); // day
var year = y2k(today.getYear()); // year

function dateMsg() {
for (i = 0; i < days.length; i++) {
tempdate = new Date(days[i]);
tempmonth = months[tempdate.getMonth() + 1];
tempday = tempdate.getDate();
tempyear = y2k(tempdate.getYear());
if (year == tempyear && mon == tempmonth && day == tempday)
return("" + msgs[i]); // returns day message
   }
return("Today is " + mon + " " + day + ", " + year + "."); // returns default
}

// Y2K Fix Function
function y2k(year) {
if (year < 2000)
year = year + 1900;
return year;
}
//  End -->
</SCRIPT>


<style type="text/css">
.arial {
	font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>

<!--Simply copy and paste it where you wish it to appear.-->





<table width="420" height="200" border="0" align="center">
  <tr>
    <td width="135" rowspan="2" align="left" valign="top"><script type="text/javascript">
document.write('<img src="book_' + new Date().getWeek() + '.jpg" alt="" title="">')
</script></td>
    <td width="5" rowspan="2" align="left" valign="top">&nbsp;</td>
    <td width="256" height="20" align="center" valign="middle" bgcolor="#760d09"><font size=3 color="#FFFFFF"><strong>Pete's read of the Week</strong></font></td>




  </tr>
  <tr>
    <td width="280" align="left" valign="top"><script>
document.write(dateMsg());
</script></td>
  </tr>
</table>

</body>
</html>

Thanks

**jscheuer1** · 09-12-2013, 01:53 PM

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Book of the Week - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#bookoftheweek {
	text-align: center;
}
#bookoftheweek img {
	width: 230px;
	height: 346px;
}
</style>
<script type="text/javascript">
Date.prototype.getWeek = function() {
 var onejan = new Date(this.getFullYear(),0,1);
 return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
 };
(function(){
	var suffixes = ['', 'st', 'nd', 'rd'];
	function formatdate(d){
		return d + (d > 3 && d < 21? 'th' : (suffixes[d % 10] || 'th'));
	}
	var msgs = [ //You need 52 of these:
		'Message for Week 1 goes here.',
		'Week 2 Message.',
		'', //you could have a blank one here or anywhere, this is week 3, it will have no message
		'Week 4 Message.',
		'Week 5 Message.', //week 5
		'Week 6 Message.',
		'Week 7 Message.',
		'Week 8 Message.',
		'Week 9 Message.',
		'Week 10 Message.', //week 10
		'Week 11 Message.',
		'Week 12 Message.',
		'Week 13 Message.',
		'Week 14 Message.',
		'Week 15 Message.', //week 15
		'Week 16 Message.',
		'Week 17 Message.',
		'Week 18 Message.',
		'Week 19 Message.',
		'Week 20 Message.', //week 20
		'Week 21 Message.',
		'Week 22 Message.',
		'Week 23 Message.',
		'Week 24 Message.',
		'Week 25 Message.', //week 25
		'Week 26 Message.',
		'Week 27 Message.',
		'Week 28 Message.',
		'Week 29 Message.',
		'Week 30 Message.', //week 30
		'Week 31 Message.',
		'Week 32 Message.',
		'Week 33 Message.',
		'Week 34 Message.',
		'Week 35 Message.', //week 35
		'Week 36 Message.',
		'Week 37 Message.',
		'Week 38 Message.',
		'Week 39 Message.',
		'Week 40 Message.', //week 40
		'Week 41 Message.',
		'Week 42 Message.',
		'Week 43 Message.',
		'Week 44 Message.',
		'Week 45 Message.', //week 45
		'Week 46 Message.',
		'Week 47 Message.',
		'Week 48 Message.',
		'Week 49 Message.',
		'Week 50 Message.', //week 50
		'Week 51 Message.',
		'Week 52 Message.'
	], months = [
		'January', 'February', 'March', 'April', 'May', 'June',
		'July', 'August', 'September', 'October', 'November', 'December'
	], d = new Date(), weeknum = d.getWeek(), weekof, msg = '',
	weekimage = '<img src="book_' + weeknum + '.jpg" alt="book ' + weeknum + '" title="">';
	if(msgs[weeknum]){
		msg = '<br>' + msgs[weeknum - 1];
	}
	while(d.getDay()){d.setDate(d.getDate() - 1);}
	weekof = 'Sunday ' + months[d.getMonth()] + ' ' + formatdate(d.getDate()) + ', ' + d.getFullYear();
	window.bookoftheweek = weekof + '<br>' + weekimage + msg;
})();
</script>
</head>
<body>
<div id="bookoftheweek">
Book of the Week for the Week of:<br>
<script type="text/javascript">
document.write(bookoftheweek);
</script>
</div>
</body>
</html>

The msgs array can be written differently so that you only need entries for those weeks that have messages, example (a few other parts of the code have changed slightly to accommodate the new message format):

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Book of the Week - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#bookoftheweek {
	text-align: center;
}
#bookoftheweek img {
	width: 230px;
	height: 346px;
}
</style>
<script type="text/javascript">
Date.prototype.getWeek = function() {
 var onejan = new Date(this.getFullYear(),0,1);
 return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
 };
(function(){
	var suffixes = ['', 'st', 'nd', 'rd'];
	function formatdate(d){
		return d + (d > 3 && d < 21? 'th' : (suffixes[d % 10] || 'th'));
	}
	var msgs = []; //You should have 52 of these, numbered from 1 to 52, any skipped will be blank when that week comes up:
		msgs[1] = 'Message for Week 1 goes here.';
		msgs[37] = 'Week 37 Message.';
		msgs[38] = 'Week 38 Message.';
		msgs[39] = 'Week 39 Message.';
		msgs[40] = 'Week 40 Message.'; //week 40
		msgs[41] = 'Week 41 Message.';
		msgs[42] = 'Week 42 Message.';
		msgs[43] = 'Week 43 Message.';
		msgs[44] = 'Week 44 Message.';
		msgs[45] = 'Week 45 Message.'; //week 45
		msgs[46] = 'Week 46 Message.';
		msgs[47] = 'Week 47 Message.';
		msgs[48] = 'Week 48 Message.';
		msgs[49] = 'Week 49 Message.';
		msgs[50] = 'Week 50 Message.'; //week 50
		msgs[51] = 'Week 51 Message.';
		msgs[52] = 'Week 52 Message.';
	var months = [
		'January', 'February', 'March', 'April', 'May', 'June',
		'July', 'August', 'September', 'October', 'November', 'December'
	], d = new Date(), weeknum = d.getWeek(), weekof, msg = '',
	weekimage = '<img src="book_' + weeknum + '.jpg" alt="book ' + weeknum + '" title="">';
	if(msgs[weeknum]){
		msg = '<br>' + msgs[weeknum];
	}
	while(d.getDay()){d.setDate(d.getDate() - 1);}
	weekof = 'Sunday ' + months[d.getMonth()] + ' ' + formatdate(d.getDate()) + ', ' + d.getFullYear();
	window.bookoftheweek = weekof + '<br>' + weekimage + msg;
})();
</script>
</head>
<body>
<div id="bookoftheweek">
Book of the Week for the Week of:<br>
<script type="text/javascript">
document.write(bookoftheweek);
</script>
</div>
</body>
</html>

Any questions you have or tweaks you need, just let me know.

**molendijk** · 09-12-2013, 03:07 PM

Yes, this (together with weeknum = d.getWeek()):

Code:

if(msgs[weeknum]){msg = '<br>' + msgs[weeknum];}

does it. Very nice.
The person could even do without the weekimage variable, since the images could be part of the messages, like:

Code:

msgs[37] = 'Week 37 Message.<br><IMG src="http://ecx.images-amazon.com/images/I/513m3XmIZCL._SY346_PJlook-inside-v2,TopRight,1,0_SH20_.jpg">'

That would allow him to use existing images without renaming them to book_#[#].jpg.

Thread: Book of the Week

Thread Tools

Search Thread

Book of the Week

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

Similar Threads

Rid the world of ie6 in a week

One Week - One Free Work

Different page for each day of the week

Make Book Flip similate reading a book

Bookmarks

Bookmarks

Posting Permissions