0

I'm quite new at this, so I'm sorry if there is an obvious answer.

I'm trying to get a photo on my homepage to change depending on the time of day. I have found tons of information on changing the background of the website, but I want to change an image on my homepage, not the background of the body tag.

I tried following the information here: Changing background based on time of day (using javascript) and in one of the comments someone suggested changing the class instead of the image so that you could change other things besides just the background image.

I tried to follow that advice, but it's not working.

This is what my breakfast-lunch.js file says:

var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {
if (document.body) {
    document.body.className = "breakfast";
}
}
else {
if (document.body) {
    document.body.className = "lunch";
}
}

I have the following css:

.breakfast .home-photo { 
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

.lunch .home-photo { 
background-image: url('images/Miriam-Joy-Photo-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

Before I tried doing this with JS and having it change the class name, I had just this CSS and it worked great, put a photo in the div and looked fine:

.home-photo { 
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

In case it's relevant, my site is a WordPress site.

I'm at a loss. Any help would be greatly appreciated. You can find an example of my (not working properly) website at http://www.canvas.kgshultz.com

Thanks in advance!

Community
  • 1
  • 1
keller8899
  • 3
  • 1

2 Answers2

1

FIX will be CSS side, javascript is fine(just checked in console.log)

change this:

.breakfast .home-photo { 
}

to this: 

.breakfast, .home-photo { 
}

Comma (,) is missing between classes.

here is a FIDDLE

Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
  • @dippas: `,` is a comma; `;` is a semi-colon. If you're going to edit someone's answer please: be *very* sure that you're improving it. – David Thomas Oct 02 '14 at 00:07
  • @DavidThomas thank you very much for the warning, It is already 1AM, so sleepy now, I missed that, so unprofessional. my bad. Manjunath Siddappa, thanks for editing – dippas Oct 02 '14 at 00:10
0

After checking your website, I noticed that manually setting the classes breakfast or lunch on your body makes everything work as expected (the images appear respectively for each class name). This leads me to think that your CSS is actually just fine, bringing the problem onto the JS

Your JS may be fine too, but i couldn't find it anywhere on this website you mentionned and the body had no trace of either breakfast or lunch classes. When i tried running it manually, it worked fine too. So please check that this script is actually used.

You should however be careful with what you are doing with those lines:

document.body.className = "breakfast";

and

document.body.className = "lunch";

as they will completely overwrite any existing classes on your body. And since you are using a CMS, your body ends up having plenty of classes. Please consider using this line instead:

document.body.className += " breakfast";

It will concatenate the string breakfast (mind the leading space so two different classes don't end up sticked to each other) at the end of its current value.

Antoine Combes
  • 1,444
  • 8
  • 13
  • Thanks so much for letting me know about adding the class instead of changing it. I'll definitely do that! How do I figure out if my script is used or not? (Sorry for the total newbie question.) – keller8899 Oct 02 '14 at 23:45
  • OK, after going back and looking harder (since you were saying to make sure it was actually running) I realized I had misspelled something in the functions.php file of my child theme and once that was fixed... Eureka! It worked just fine! And thanks so much for the suggestion to add the class instead of changing it. The last thing I want to do is write over all the other classes. – keller8899 Oct 02 '14 at 23:51
  • You could try logging some messages in your script with `console.log('your message here')` and see if they at least appear in your browser console. If they don't, then your script is strictly not included in your page, and you'll have to find why, and if they do (appear), then you'll have to find how and why what your script does get canceled. Let me know which one it is ! – Antoine Combes Oct 02 '14 at 23:56
  • ahah, the typos will be the death of us all ! – Antoine Combes Oct 02 '14 at 23:57