I am trying to make a webpage that will change a picture based on the time. I would like one picture (image2) to display between 8:23 and 2:43 Monday-Friday and another(image1) to display the rest of the time.
I found this custom code online but I’m not sure how to get it to work within Webflow. Any help will be great, thanks.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
You need javascript code to do this. I have similar code If you provide me ready-only link i can customize code and give it you.
Here is my read-only link. I changed the image names to “circle-red” and “circle-yellow”. I want the "circle-yellow to show during business hours and then hide and show the “circle-red” image in it’s place. the “share” button isn’t on my interface for some reason so I went into the project settings and shared the link that way. Thanks for your help!
Here is the code put in end of page body tag. And let me if you have any problem.
var timeTable = [
{'time':['8 am', '3 pm'], dayNumber:1}, // monday timimg
{'time':['8 am', '3 pm'], dayNumber:2}, // tuesday
{'time':['8 am', '3 pm'], dayNumber:3}, // wendesday
{'time':['8 am', '3 pm'], dayNumber:4}, // thursday
{'time':['8 am', '3 pm'], dayNumber:5}, // friday
{'time':['0 am', '0 pm'], dayNumber:6}, // saturday
{'time':['0 am', '0 am'], dayNumber:0}, // sunday timing
]
function changeImage(){
let date = new Date();
let currentNumber = date.getHours();
var currentDay = timeTable.filter(function(elt) {
return elt.dayNumber == date.getDay() ;
});
let startNumber = convertTime12to24(currentDay[0]['time'][0])
let endNumber = convertTime12to24(currentDay[0]['time'][1])
if( (currentNumber>=startNumber) && (currentNumber<endNumber) ){
document.getElementsByClassName('circle-yellow').style.display = "block";
document.getElementsByClassName('circle-red').style.display = "none";
}
else{
document.getElementsByClassName('circle-yellow').style.display = "none";
document.getElementsByClassName('circle-red').style.display = "block";
}
}
var convertTime12to24 = (time12h) => {
let [hours, modifier] = time12h.split(' ');
modifier = modifier.toLowerCase();
hours = parseInt(hours, 10)
if (modifier == 'pm' && hours < 12){
hours += 12
}
else if (modifier == 'am' && hours == 12){
hours -= 12;
}
return hours;
}
changeImage();
</script>
Hey thanks for the code. I’ve added it to the webpage in the before body tag section but it doesn’t seem to be working. I adjust the times in the code to see if I could get the "circle-yellow to hide but it didn’t work. Did I do something wrong? I’m not sure if you can see in on the read-only view or not. Thanks for your help!
Please put this code between tag.
Here is code.
var timeTable = [
{'time':['8 am', '3 pm'], dayNumber:1}, // monday timimg
{'time':['8 am', '3 pm'], dayNumber:2}, // tuesday
{'time':['8 am', '3 pm'], dayNumber:3}, // wendesday
{'time':['8 am', '3 pm'], dayNumber:4}, // thursday
{'time':['8 am', '3 pm'], dayNumber:5}, // friday
{'time':['0 am', '0 pm'], dayNumber:6}, // saturday
{'time':['0 am', '0 am'], dayNumber:0}, // sunday timing
]
function changeImage(){
let date = new Date();
let currentNumber = date.getHours();
var currentDay = timeTable.filter(function(elt) {
return elt.dayNumber == date.getDay() ;
});
let startNumber = convertTime12to24(currentDay[0]['time'][0])
let endNumber = convertTime12to24(currentDay[0]['time'][1])
if( (currentNumber>=startNumber) && (currentNumber<endNumber) ){
let yellowImages = document.getElementsByClassName('circle-yellow')
yellowImages.forEach(yellowImage => {
yellowImage.style.display = "block";
});
let redImages = document.getElementsByClassName('circle-red')
redImages.forEach(redImage => {
redImage.style.display = "none";
});
}
else{
let yellowImages = document.getElementsByClassName('circle-yellow')
yellowImages.forEach(yellowImage => {
yellowImage.style.display = "none";
});
let redImages = document.getElementsByClassName('circle-red')
redImages.forEach(redImage => {
redImage.style.display = "block";
});
}
}
var convertTime12to24 = (time12h) => {
let [hours, modifier] = time12h.split(' ');
modifier = modifier.toLowerCase();
hours = parseInt(hours, 10)
if (modifier == 'pm' && hours < 12){
hours += 12
}
else if (modifier == 'am' && hours == 12){
hours -= 12;
}
return hours;
}
changeImage();
If does not work then just make copy of project and transfer to me i will do this and send back project to you.
Ya I’m either doing something wrong or it’s still not working. how do I send you a copy of the project? Thanks again!
dilshadkhaliq786@gmail.com this is webflow account transfer to this id.
I check webfolw forum once a day so that why i reply late, for instant replay contact me at whatapps +923066381084.
I’ve transferred a copy of the project to you. Thanks again for your help. my webflow account is webmaster@joshuaonenine.media
Its done now just change time according to your need.
Thank you so so much! It’s working perfectly!!!
Hey Muhammad_Dilshad, I have been trying to use the code you made for me on my website and the demo site you worked on is working fine but when I tried to duplicate it and use in on another site, I can’t get the code to work. I have 4 separate image that need to show or hide based on time of day just like I had in the demo site you worked on. If you can, can you take a look and tell me what I’m doing wrong. Thanks!
When on the page that has the code, click the button that says “Is flingers open right now”. that brings up a pop up with the images that show if parts of the restaurant is open.
the actual page in question:
https://flingers.webflow.io/homepage