www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: Swap image on site every Monday

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    Swap image on site every Monday

    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:

    <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";


    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

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    /* 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.
    Code:
    /* 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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Oct 2013
    Posts
    9
    Quote Originally Posted by \\.\ View Post

    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.

    Code:
    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:

    Code:
    <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

  4. #4
    Join Date
    Oct 2013
    Posts
    9
    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

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Oct 2013
    Posts
    9
    Quote Originally Posted by \\.\ View Post
    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

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Oct 2013
    Posts
    9
    Quote Originally Posted by \\.\ View Post
    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

  9. #9
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    247
    I'm not sure if this is what you're looking for...

    Code:
    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.
    Last edited by tech_soul8; 11-03-2013 at 06:31 AM.

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    OK, just found them buried in the mishmash of script at the end of the page. Never mind...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  12. #12
    Join Date
    Oct 2013
    Posts
    9
    Quote Originally Posted by \\.\ View Post
    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

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    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.
    Code:
    /* 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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  14. #14
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    Quote Originally Posted by grajay155 View Post
    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!
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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)
    HTML Code:
    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 :
    HTML Code:
    var tdy=new Date();
    var myImgSrc='images/'+['green.png','black.png'][tdy.getISOWeek()%2];
    alert(myImgSrc)
    Last edited by 007Julien; 11-03-2013 at 11:29 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles