0

I have a code that changes the background color based on the time of the day, hourly. Now I'm trying to do the same replacing an image source but seems to be not working, Code is also based on computer timezone, but I would like to make it based only on Barcelona city, Spain.

JAVASCRIPT

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

//1-2am
if (n > 23 || n < 2) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#2e3348','color':'#FFF'});
 }

//2-3am
else if (n > 24 || n < 3) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4am
else if (n > 1 || n < 4) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5am
else if (n > 2 || n < 5) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6am
else if (n > 3 || n < 6) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7am
else if (n > 4 || n < 7) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8am
else if (n > 5 || n < 8) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9am
else if (n > 6 || n < 9) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10am
else if (n > 7 || n < 10) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11am
else if (n > 8 || n < 11) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12am
else if (n > 9 || n < 12) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//12-1pm
else if (n > 10 || n < 13) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//1-2pm
else if (n > 11 || n < 14) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//2-3pm
else if (n > 12 || n < 15) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4pm
else if (n > 13 || n < 16) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5pm
else if (n > 14 || n < 17) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6pm
else if (n > 15 || n < 18) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7pm 
else if (n > 16 || n < 19) {
 $("img#photo1").attr("src","images/head.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8pm 
else if (n > 17 || n < 20) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9pm 
else if (n > 18 || n < 21) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10pm 
else if (n > 19 || n < 22) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11pm 
else if (n > 20 || n < 23) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12pm 
else {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }
});

And my HTML for the is

<img src="" id="photo1" />

Any suggestion to understand it better and make it work? thanks in advance!

user2875178
  • 91
  • 1
  • 7
  • Code seems to valid to me... Maybe problems with caching? – GreyRoofPigeon Jul 28 '15 at 07:37
  • the line that changes the img src should work, are you getting errors? check your network tab, it might be that your images are returning 404 – atmd Jul 28 '15 at 07:37
  • Get the user's timezone: `var now = new Date(); var offset = now.getTimezoneOffset()`, subtract it from the current time, add the offset for barcelona: `var barcelona = new Date(now + (offset + 2*60)*60*1000)` As for the changing image, see other comments. This may help you debugging: https://developer.mozilla.org/en/docs/Debugging_JavaScript – lordvlad Jul 28 '15 at 07:42
  • @lordvlad thank you very much, but what I want is instead getting user's timezone, I want to force the code to get only the timezone from Barcelona City in Spain. actual time is 10:24 am, so if the user is in Australia, their time now should be something like 4 or 5 pm but I want to force them to see the design based on time in Barcelona now, any resource for that? – user2875178 Jul 28 '15 at 08:25
  • yup, thats what the code does. just have another look at it. get user's time, get users's offset, calculate barcelona time using difference between user's offset and barcelona's offset. Of course that requires the user's time to be somewhat accurate. If you can't rely on that you need to query another server for the time: http://stackoverflow.com/questions/9486293/does-anyone-know-of-a-good-json-time-server – lordvlad Jul 28 '15 at 08:30
  • @lordvlad thanks again, but now that I'm inserting that code is not rendering the background nor the image. is becouse the name of the variables? should be also for the conditions now barcelona instead of n? else if (barcelona > 1 || barcelona < 4) { $("img#photo1").prop("src","images/head4.png"); $('body').css({'background-color':'#3ff6bf','color':'#FFF'}); } – user2875178 Jul 28 '15 at 08:45
  • `var n = barcelona.getHours()`, the rest should stay the same – lordvlad Jul 28 '15 at 09:03
  • @lordvlad I think I'm doing something wrong: var now = new Date(); var offset = now.getTimezoneOffset(); var barcelona = new Date(now + (offset + 2*60)*60*1000); var n = barcelona.getHours(); //1-2am if (n > 23 || n < 2) { $("img#photo1").attr("src","images/head6.png"); $('body').css({'background-color':'#2e3348','color':'#FFF'}); } //2-3am else if (n > 24 || n < 3) { $("img#photo1").attr("src","images/head6.png"); $('body').css({'background-color':'#4f495a','color':'#FFF'}); } – user2875178 Jul 28 '15 at 18:19

2 Answers2

2

Change the .attr to .prop:

 $("img#photo1").prop("src","images/head6.png");

Another option is to define the background images in css classes, and then just switch classes.

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • 1
    this answer explains why: http://stackoverflow.com/questions/5874652/prop-vs-attr – lordvlad Jul 28 '15 at 08:24
  • Ok now I saw that I dont have a head6.png image on folder, that's why it wasn't showing the propper image. But keep being a problem there @Ori Drori , and it's that is not showing the correct background based on the code, for example, here's 10:26 am of the morning and the code is showing me the background from //3-4am else if (n > 1 || n < 4) { $("img#photo1").prop("src","images/head4.png"); $('body').css({'background-color':'#565656','color':'#FFF'}); }' – user2875178 Jul 28 '15 at 08:26
-1

This is very creative idea to change background based on the time. But are you setting all src attribute to the same picture?

Jose Mar
  • 634
  • 6
  • 8
  • sorry I didn't replaced the image with different ones, I'm still figuring out some problems and then I'll proceed to replace the image for each hour, thank you very much – user2875178 Jul 28 '15 at 08:28