On air now – Radio station image changer

@djcrispysaMay 22.2012

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

to post a comment

JavaScript

@rnd_meMay 23.2012 — #avoiding dom irregularities using dynamic css is my way, but there are millions...

[B]using html like [/B]

[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>[/CODE]

[B]and this exact script[/B]

[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);
 [/CODE]

[B]with expanded css along the lines of this [/B]

[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... */
 
 [/CODE]

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.

@xelawhoMay 23.2012 — #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>
 [/CODE]

@xelawhoMay 23.2012 — #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>[/CODE]

@rnd_meMay 24.2012 — #although IE doesn't play nice with the above [/QUOTE]

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

@djcrispysaauthorMay 26.2012 — #Thank you so much everybody ?

Appreciate it

On air now – Radio station image changer

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

On air now – Radio station image changer

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴