www.webdeveloper.com
Results 1 to 6 of 6

Thread: On air now - Radio station image changer

  1. #1
    Join Date
    May 2012
    Posts
    2

    On air now - Radio station image changer

    HI
    I am in need of a script that will change an image displayed on my html website based on time of the day + day of the week
    I have searched for this on this site but might have used the incorrect search query
    So , basically , Monday 2pm until 3pm will show a picture and Monday 3pm until 4pm will show a different time , similarly any other day of the week will do the same

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    avoiding dom irregularities using dynamic css is my way, but there are millions...



    using html like
    Code:
    <div id="sched">
     <div class="mon">
       <span class="hour h8">all things considered</span>
       <span class="hour h9">all things considered</span>
       <span class="hour h10">news</span>
       <span class="hour h11">weekly outlook</span>
       <span class="hour h12">lunchbox concert</span>
      </div>
    </div>

    and this exact script
    Code:
    function setTimecode(){
       var weekday=new Date(+new Date -new Date().getTimezoneOffset()*60000).toGMTString().split(",")[0].toLowerCase();
       var hour= "h" +new Date().getHours();
       document.body.setAttribute("data-dt", hour+" "+weekday);
    }
    
    setTimecode();
    setInterval(setTimecode, 20000);

    with expanded css along the lines of this
    Code:
    /* turn off all days */
    [data-dt~=tue] #sched .mon,
    [data-dt~=tue] #sched .tue,
    [data-dt~=tue] #sched .wed,
    [data-dt~=tue] #sched .thu,
    [data-dt~=tue] #sched .fri,
    [data-dt~=tue] #sched .sat,
    [data-dt~=tue] #sched .sun{ display: none;}
    
    /*turn off all hours */
    #sched .hour { display:none; }
    
    
    
    /* now, opt-in for each known day */
    [data-dt~=mon] #sched .mon{ display: block; }
    [data-dt~=tue] #sched .tue { display: block; }
    [data-dt~=wed] #sched .wed{ display: block; }
    /* (do other days here...)  */
    
    
    /* now un-hide the proper hour */
    
    [data-dt~=h8] #sched .h8 ,
    [data-dt~=h8] #sched .h9 ,
    [data-dt~=h8] #sched .h10, 
    [data-dt~=h8] #sched .h11, 
    [data-dt~=h8] #sched .h12   {display: block !important;} /* do other hours as well... */
    the time is updated every 20 seconds automatically.

    while this can be repetitive, it avoids a lot of complex programming and x-browser bugs.
    it also lets you put the display logic in css, where it belongs.
    Last edited by rnd me; 05-22-2012 at 08:10 PM.

  3. #3
    Join Date
    Nov 2010
    Posts
    1,049
    If you can rename your images to coincide with the date & time you want them to be displayed (such as mon20.jpg for the one you want to show at 8pm on Monday) you can do this:

    Code:
    <body>
    <img id="thepic" src=""></img>
    <script type="text/javascript">
    function showPic(){
    d=new Date()
    document.getElementById("thepic").src=d.toString().substr(0,3).toLowerCase()+d.toString().substr(16,2)+".jpg"
    }
    
    showPic()
    setInterval(showPic, 20000);
    </script>
    
    </body>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,049
    although IE doesn't play nice with the above - better to use:

    Code:
    <body>
    <img id="thepic" src=""></img>
    <script type="text/javascript">
    function showPic(){
    d=new Date()
    document.getElementById("thepic").src=d.toString().substr(0,3).toLowerCase()+d.getHours()+".jpg"
    }
    
    showPic()
    setInterval(showPic, 20000);
    </script>
    
    </body>

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by xelawho View Post
    although IE doesn't play nice with the above
    ie is not the only one. the format of Date().toString() is up to the browser to determine, so it cannot be counted upon to be the same in all locales and browsers. use toUTCString and toISOString...

  6. #6
    Join Date
    May 2012
    Posts
    2
    Thank you so much everybody
    Appreciate it

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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