Swap image on site every Monday

This site is best viewed in a modern browser with JavaScript enabled.

grajay155

Hello - new here so hope some kind person can help me along the way.

I've done quite a bit of trawling through this forum and have found instances that nearly match what I want to do - but not quite.

I have a village website and have been asked to put up a reminder changing every Monday morning/Sunday midnight for the forthcoming week with an image of which color refuse bin it is in the current week - ie green bin one week and black bin the next. A number of folks have already said how useful it is but the Javascript I am using currently changes the image over on Saturdays.

This is the code I am using currently:

var today = new Date();
var weekno = today.getWeek();

var images = []
images [1] = "images/green.png";
images [2] = "images/black.png";
images [3] = "images/green.png";
images [4] = "images/black.png";
images [5] = "images/green.png";
images [6] = "images/black.png";
images [7] = "images/green.png";
images [8] = "images/black.png";
images [9] = "images/green.png";
images [10] = "images/black.png";
images [11] = "images/green.png";
images [12] = "images/black.png";
images [13] = "images/green.png";
images [14] = "images/black.png";
images [15] = "images/green.png";
images [16] = "images/black.png";
images [17] = "images/green.png";
images [18] = "images/black.png";
images [19] = "images/green.png";
images [20] = "images/black.png";
images [21] = "images/green.png";
images [22] = "images/black.png";
images [23] = "images/green.png";
images [24] = "images/black.png";
images [25] = "images/green.png";
images [26] = "images/black.png";
images [27] = "images/green.png";
images [28] = "images/black.png";
images [29] = "images/green.png";
images [30] = "images/black.png";
images [31] = "images/green.png";
images [32] = "images/black.png";
images [33] = "images/green.png";
images [34] = "images/black.png";
images [35] = "images/green.png";
images [36] = "images/black.png";
images [37] = "images/green.png";
images [38] = "images/black.png";
images [39] = "images/green.png";
images [40] = "images/black.png";
images [41] = "images/green.png";
images [42] = "images/black.png";
images [43] = "images/green.png";
images [44] = "images/black.png";
images [45] = "images/green.png";
images [46] = "images/black.png";
images [47] = "images/green.png";
images [48] = "images/black.png";
images [49] = "images/green.png";
images [50] = "images/black.png";
images [51] = "images/green.png";
images [52] = "images/black.png";
images [53] = "images/green.png";

document.getElementById("myimage").src = images[weekno];

</script>

window.location = 'week'+((new Date().getWeek()+1)%2)+'.png';

and the site is here: http://www.bedstoneandbucknell.org/

I anyone can give me an idea of it's doable I'd be most grateful. Also I am a bit of a numpty so if it's also possible a simple explanation would be wonderful.

Thanks

Graham

root

Firstly please use forum tags to wrap your code...

Secondly, you can cut down on the amount of code you need by doing the following, take this

var images = []
images [1] = "images/green.png";
images [2] = "images/black.png";
images [3] = "images/green.png";
images [4] = "images/black.png";
images [5] = "images/green.png";
images [6] = "images/black.png";
images [7] = "images/green.png";
images [8] = "images/black.png";
images [9] = "images/green.png";
images [10] = "images/black.png";
images [11] = "images/green.png";
images [12] = "images/black.png";
images [13] = "images/green.png";
images [14] = "images/black.png";
images [15] = "images/green.png";
images [16] = "images/black.png";
images [17] = "images/green.png";
images [18] = "images/black.png";
images [19] = "images/green.png";
images [20] = "images/black.png";
images [21] = "images/green.png";
images [22] = "images/black.png";
images [23] = "images/green.png";
images [24] = "images/black.png";
images [25] = "images/green.png";
images [26] = "images/black.png";
images [27] = "images/green.png";
images [28] = "images/black.png";
images [29] = "images/green.png";
images [30] = "images/black.png";
images [31] = "images/green.png";
images [32] = "images/black.png";
images [33] = "images/green.png";
images [34] = "images/black.png";
images [35] = "images/green.png";
images [36] = "images/black.png";
images [37] = "images/green.png";
images [38] = "images/black.png";
images [39] = "images/green.png";
images [40] = "images/black.png";
images [41] = "images/green.png";
images [42] = "images/black.png";
images [43] = "images/green.png";
images [44] = "images/black.png";
images [45] = "images/green.png";
images [46] = "images/black.png";
images [47] = "images/green.png";
images [48] = "images/black.png";
images [49] = "images/green.png";
images [50] = "images/black.png";
images [51] = "images/green.png";
images [52] = "images/black.png";
images [53] = "images/green.png";

and do this with it

var images = ["",
"green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png","black.png","green.png"];

by compressing everything you need in to the array, noting the "", to occupy array element 0, you can save yourself space making code more readable

Now this

Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1); // month 0 is January
addDays(2);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}

var today = new Date();
var weekno = today.getWeek();

in to

/* For a given date, get the ISO week number
 *
 * Based on information at:
 *
 *    http://www.merlyn.demon.co.uk/weekcalc.htm#WNR
 *
 * Algorithm is to find nearest thursday, it's year
 * is the year of the week number. Then get weeks
 * between that date and the first day of that year.
 *
 * Note that dates in one year can be weeks of previous
 * or next year, overlap is up to 3 days.
 *
 * e.g. 2014/12/29 is Monday in week  1 of 2015
 *      2012/1/1   is Sunday in week 52 of 2011
 */
function getWeekNumber(d) {
    // Copy date so don't modify original
    d = new Date(d);
    d.setHours(0,0,0);
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday's day number 7
    d.setDate(d.getDate() + 4 - (d.getDay()||7));
    // Get first day of year
    var yearStart = new Date(d.getFullYear(),0,1);
    // Calculate full weeks to nearest Thursday
    var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7)
    // Return array of year and week number
    return [d.getFullYear(), weekNo];
}

so modifying the above function c/o stackoverflow you get.

/* For a given date, get the ISO week number
 * Based on information at:
 *    http://www.merlyn.demon.co.uk/weekcalc.htm#WNR
 */
function getWeekNumber(d) {
    d = new Date(d);
    d.setHours(0,0,0);
    d.setDate(d.getDate() + 4 - (d.getDay()||7));
    var yearStart = new Date(d.getFullYear(),0,1);
    var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7)
    return weekNo;
}

weekno = getWeekNumber( new Date().toDateString() );
document.getElementById("myimage").src = "images/" + images[weekno];

I don't get what the purpose of window.location = 'week'+((new Date().getWeek()+1)%2)+'.png'; is for, so its left out.

grajay155

\\.\;1294161 wrote:
I don't get what the purpose of window.location = 'week'+((new Date().getWeek()+1)%2)+'.png'; is for, so its left out.

Thanks very much for such comprehensive reply and my apologies for not using the forum coding facility. I actually looked for it in my toolbar but couldn't make out which icon to use but now I see it.

window.location = 'week'+((new Date().getWeek()+1)%2)+'.png';

was the line given in the original Javascript to locate where the image appeared - I really should have provided all of the code I was using. In my case it is placed withing a table thus:

<table class="aside_recycle"><tr><td class="aside_header">THIS WEEK</td></tr><tr><td class="aside_content"><div id = "myimagediv"><img src = "images/green.png" alt=""></div>

<script type = "text/javascript">
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);  // month 0 is January
addDays(2);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
} 

var today = new Date();
var weekno = today.getWeek(); 

var images = []
images [1] = "images/green.png";
images [2] = "images/black.png";
images [3] = "images/green.png";
images [4] = "images/black.png";
images [5] = "images/green.png";
images [6] = "images/black.png";
images [7] = "images/green.png";
images [8] = "images/black.png";
images [9] = "images/green.png";
images [10] = "images/black.png";
images [11] = "images/green.png";
images [12] = "images/black.png";
images [13] = "images/green.png";
images [14] = "images/black.png";
images [15] = "images/green.png";
images [16] = "images/black.png";
images [17] = "images/green.png";
images [18] = "images/black.png";
images [19] = "images/green.png";
images [20] = "images/black.png";
images [21] = "images/green.png";
images [22] = "images/black.png";
images [23] = "images/green.png";
images [24] = "images/black.png";
images [25] = "images/green.png";
images [26] = "images/black.png";
images [27] = "images/green.png";
images [28] = "images/black.png";
images [29] = "images/green.png";
images [30] = "images/black.png";
images [31] = "images/green.png";
images [32] = "images/black.png";
images [33] = "images/green.png";
images [34] = "images/black.png";
images [35] = "images/green.png";
images [36] = "images/black.png";
images [37] = "images/green.png";
images [38] = "images/black.png";
images [39] = "images/green.png";
images [40] = "images/black.png";
images [41] = "images/green.png";
images [42] = "images/black.png";
images [43] = "images/green.png";
images [44] = "images/black.png";
images [45] = "images/green.png";
images [46] = "images/black.png";
images [47] = "images/green.png";
images [48] = "images/black.png";
images [49] = "images/green.png";
images [50] = "images/black.png";
images [51] = "images/green.png";
images [52] = "images/black.png";
images [53] = "images/green.png";
// and so on for 53 weeks


document.getElementById("myimage").src = images[weekno];

</script></td></tr><tr><td>
window.location = 'week'+((new Date().getWeek()+1)%2)+'.png';</td></tr></table>

You have given me much to work on and I'll see if I can make it work. Very many thanks again for such a speedy reply.

Graham

grajay155

Well I have substituted the code as suggested but the images don't change. In fact it just defaults to the green image.

This is my test page

http://www.bedstoneandbucknell.org/index_testing.php

Graham

root

You subbed the wrong function, you need the one noted as being modified that returns the week number, the one you put in is the unmodified version that returns an array.

so modifying the above function c/o stackoverflow you get.
... then the code listed below that above comment.

grajay155

\\.\;1294547 wrote:
You subbed the wrong function, you need the one noted as being modified that returns the week number, the one you put in is the unmodified version that returns an array.

Once again, thanks for the help. In fact I had tried both variations and left the unmodified version on my page. I've now substituted with the modified version as you advised but sadly I get the same result.

Graham

root

The function returns the ISO week number so you might not get the result you were expecting.

I will have another look at your site code.

grajay155

\\.\;1294599 wrote:
The function returns the ISO week number so you might not get the result you were expecting.

I will have another look at your site code.

That is most kind of you. The script as it is does not change the graphic at all but leaves it permanently at the green stage, whereas the one on the home page of the same site (http://www.bedstoneandbucknell.org/) does indeed change every week as I said before (but on a Thursday). There was me thinking that I could just add 3 days onto the 'calculation' and fix it that way. I am most grateful for your assistance.

Regards

Graham

tech_soul8

I'm not sure if this is what you're looking for...

var images = ["images/green.jpg","images/black.jpg"];
var date = new Date();
var date2 = new Date(date.getFullYear(),0,1) 
var elem = document.getElementById('myimages');

while (date2.getDay() != 1)
{
	date2.setDate(date2.getDate() + 1)
}

var weekNo = Math.floor((date - date2) /1000/60/60/24/7);

(weekNo % 2 == 0) ? elem.src = images[0] : elem.src = images[1];

I have not test it but the above code should find the first Monday at the start of the year and start counting weeks from that date. You divide weeks with number 2 to get an even or odd number. If the number is even you set your image to the green.png, otherwise you set it theblack.png. With this method your images should get changed on every Monday.

root

You are missing </body> and </html> from the end of your page, this should be the biggest part of your problem because as far as the browser is concerned, the page is still loading and can't complete the DOM tree because it is expecting more elements.

Try adding the HTML closures to see what happens.

In the meantime I am going to have a ferret around your page code to see what improvements can be made, it is to be honest a bit of a mixed bag, iframes are deader than corduroy and people only use them as a last resort.

I suspect some of your scripts can be applied dynamically to improve the code readability, the layout took me best part of an hour to turn in to something readable. Are you using a serverside to generate the code by any chance or did you push your HTNL through a tool that removes whitespaces that help with formatting? If you do then for debugging's and trouble shooting sake, I advise you don't.

root

OK, just found them buried in the mishmash of script at the end of the page. Never mind...

grajay155

\\.\;1294611 wrote:
I suspect some of your scripts can be applied dynamically to improve the code readability, the layout took me best part of an hour to turn in to something readable. Are you using a serverside to generate the code by any chance or did you push your HTNL through a tool that removes whitespaces that help with formatting? If you do then for debugging's and trouble shooting sake, I advise you don't.

Hi again

Most of the page was constructed with Dreamweaver. It is, as you might guess a work in progress and I've not put it through any tool to remove whitespaces as I most certainly need space to see where things are when they go wrong. Yes, the ifame came as part of the mini calendar and I know I can change it which is the next on my list of worries.

Sorry you've been put to so much trouble.

Graham

root

To simplify things, I wasn't sure until I knew what black.png and green.png were but now know its a reference to a bin collection.

So, to simplify matters, here is what I would use.

/* For a given date, get the ISO week number
		 * Based on information at:
		 *    http://www.merlyn.demon.co.uk/weekcalc.htm#WNR
		 */
		function getWeekNumber(d) {
			d = new Date(d);
			d.setHours(0,0,0);
			d.setDate(d.getDate() + 4 - (d.getDay()||7));
			var yearStart = new Date(d.getFullYear(),0,1);
			var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7)
			return weekNo+1;
		}
		var today = new Date();
		var weekno = getWeekNumber(today); 
		if(window.console && console.log) console.log("Week No:"+weekno);
		var imageRef = (weekno%2==1) ? "green.png":"black.png";
		document.getElementById("myimage").src = "images/" + imageRef;

This modulo approach will test if a weeknumber is odd or even, then apply the image reference as appropriate, this now means that you don't need a huge reference array.

I have +1 to the output because the ISO week calc is showing today as week 44 whereas mu Excel test sheet shows we are week 45, you will need to remove the +1 from the function return if the colour bin is not correct.

I have tested this in my local web browser.

root

grajay155;1294617 wrote:
Sorry you've been put to so much trouble.

Graham

No problem, glad to help out a fellow 'shire. I used to live in Worcestershire, not too far from Bedstone and Bucknell, if memory serves me its not far from Ludlow. Only thing I can say is ... A456!

007Julien

With daylight saving times all days are not 86400 seconds ! Then all scripts which use 86400 are wrong ! And there is many, many wrong scripts on the web...

Except better view, I propose this script (with a test here)

Date.prototype.getISOWeek = function() {var i,d,firstWeekMonday;
    var i=1;while (new Date(this.getFullYear(),0,i).getDay()!=4) ++i;// i the first Thursday;
    var firstWeekMonday = new Date(this.getFullYear(),0,i-3,0,0,0,-1);// one millisecond before 
    d=Math.ceil(((this-firstWeekMonday)/60000-this.getTimezoneOffset()+firstWeekMonday.getTimezoneOffset())/(1440*7));
        if (d==53 && new Date(this.getFullYear(),0,1).getDay()!=4 && new Date(this.getFullYear()+1,0,0).getDay()!=4) d=1;    

    return d?d:new Date(this.getFullYear(),0,0).getISOWeek();// the week of the 31 December before if d is null !
}
// Use
var tdy=new Date();
alert(tdy.getISOWeek())

Then there is not very difficult to choose an image with something like this :

var tdy=new Date();
var myImgSrc='images/'+['green.png','black.png'][tdy.getISOWeek()%2];
alert(myImgSrc)

root

The difference is minimal 007Julien, whats important is that on odd weeks one image shows and on even weeks another image shows.

root

And theirs that day light savings thing, something that you do not account for, that has been taken care of in the computer for those machines that observe daylight savings, so any script that "Accounts" for day light savings in calculations is only compounding the time shift further from the correct time.

I asked Microsoft about, short answer is the time that JavaScript uses is based on the system clock, the system clock bases its time on what the system time was set to and it only looks at the clock ticks not the BIOS time that delivers the time base to the system, any sync with external references like atomic clocks is purely operating system based.

grajay155

\\.\;1294621 wrote:
I have tested this in my local web browser.

What a dramatic change from the original script I had working (after a fashion). I wonder what it is I'm doing wrong as trying the new script still stubbornly refuses to change image colour.

tech_soul8 - Thanks for trying to help, but I can't get your suggestion to work either - but thanks for trying.

007Julien - My thanks to you as well but I'm not quite sure what I have to do to incorporate your idea. I have tried it and I got the alerts which changed when the date changed.

007Julien

What minimal difference ? The result may differ a week !
The computer should be an exact science. It would be better to give reliable results ...

root

we are talking about 0.25 of a day which is 6 hours.