I don't know if this is possible, so I figured I'd ask a few gurus. I know it is possible to have an image change at a certain time of day, and it's also possible to have an image change by day, but is there a script to do both?
What I want to do is have the first image show from 8am cst to 6pm cst mon-fri, it's our open sign for live chat. The the rest of the time have the second image.
Is this possible with any type of script? Any help you can give is greatly appreciated!
<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">
var logos = [
'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'
];
onload = function () {
var now = new Date();
var DOW = now.getDay();
var HH = now.getHours();
if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW <= 6)) ) {
document.getElementById('logo').src = logos[0];
} else {
document.getElementById('logo').src = logos[1];
}
}
</script>
</head>
<body>
<img id="logo" src="" alt="">
</body>
</html>
I hate saying it, but I'm still learning java, and I need to ask a few dumb questions. What is the breakdown of this script? I understand about half of what it is doing, but not all of it.
I know 11.jpg and 21.jpg are the two images, the HH >= are the hours of 8-6, but will they be set to the server time or local time of the customer? We have several users on pacific time and we are central, and need it to always be on central time. The DOW >= is day of the week? That's where I get confused lol, what does DOW do and what are appropriate changes to be made to it? Such as holidays, I would go and change the script for a few days absence. And I think the 'logos' part of the script is for the images. logos [0] is the main image to display during the times set and logos [1] is for the rest of the time?
I hate saying it, but I'm still learning java, and I need to ask a few dumb questions. What is the breakdown of this script? I understand about half of what it is doing, but not all of it.
If you are trying to learn 'java', then you are on the wrong forum... This is the 'javascript' forum.
That being said, the following are for the script in post #2
I know 11.jpg and 21.jpg are the two images, the HH >= are the hours of 8-6, but will they be set to the server time or local time of the customer? We have several users on pacific time and we are central, and need it to always be on central time.
AFAIK, it is the server time setting. There are correction functions for GMT time zones.
Do a google search with: "javascript Date()" for a description of these functions.
The DOW >= is day of the week? That's where I get confused lol, what does DOW do and what are appropriate changes to be made to it? Such as holidays, I would go and change the script for a few days absence.
DOW is formed from the Date() function to give you the Day_of_Week for the date specified, which is 'now' in the script.
Values returned are 0..6 which represent 'Sunday'..'Saturday'.
In you original post, you made no mention of holidays, absence, etc. so the script above does not account for such. I can expand on the script, but I would need to know ALL information to code for special cases. You could also search this forum for a ton of ideas on how this has been accomplished by others. Sort of depends on how interested you are in learning javascript (not java).
And I think the 'logos' part of the script is for the images. logos [0] is the main image to display during the times set and logos [1] is for the rest of the time?
Correct.
In you original post, you made no mention of holidays, absence, etc. so the script above does not account for such. I can expand on the script, but I would need to know ALL information to code for special cases. You could also search this forum for a ton of ideas on how this has been accomplished by others. Sort of depends on how interested you are in learning javascript (not java).
I ment javascript, I apologize for that. I forget that java exists lol.
As for the other dates, they aren't nessicary for the script, that was more of an afterthought. We are closed most major holidays, but not always, like we may be open one year on labor day and not the next. My boss can be fickle. If it comes to the point where it seems like it would be needed, I will search through the forums and see what others have done, like you suggested. I was mainly asking for times we would be closed for 2 or 3 days extra, I would just change the script for those few days, then change it back.
Thank you very much for your help, I'm sorry I came in sounding like a dolt.
I do have one final question, for the Date, you mentioned that 0-6 represent sun-sat, yet the script has 6 as the final day. Why is that? I am probably wrong, but I figured it would end on 5 for Friday.
You were right about the test for Saturday. My lightening fast fingers got away from me.
You could add some test for the holidays of the year if you want and know them ahead of time.
You could always modify the 'holidays' array for last minute changes.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
var logos = [
'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg', // on-air image
'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg', // off-air image
'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg' // holidays image
];
var holidays = ['1/1', '2/14', '3/17', '6/6', '6/14',
'7/4','10/31','11/24','11/25','12/24','12/25'];
onload = function () {
var now = new Date();
var DOW = now.getDay();
var HH = now.getHours();
if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
document.getElementById('logo').src = logos[0];
} else {
document.getElementById('logo').src = logos[1];
}
var tmp;
for (var i=0; i<holidays.length; i++) {
tmp = new Date(holidays[i]+'/'+now.getFullYear());
// alert(tmp.toDateString()+'\n'+now.toDateString()); // for testing
if (tmp.toDateString() == now.toDateString()) {
document.getElementById('logo').src = logos[2];
}
}
}
</script>
</head>
<body>
<img id="logo" src="" alt="">
</body>
</html>
You were right about the test for Saturday. My lightening fast fingers got away from me.
You could add some test for the holidays of the year if you want and know them ahead of time.
You could always modify the 'holidays' array for last minute changes.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
var logos = [
'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg', // on-air image
'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg', // off-air image
'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg' // holidays image
];
var holidays = ['1/1', '2/14', '3/17', '6/6', '6/14',
'7/4','10/31','11/24','11/25','12/24','12/25'];
onload = function () {
var now = new Date();
var DOW = now.getDay();
var HH = now.getHours();
if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
document.getElementById('logo').src = logos[0];
} else {
document.getElementById('logo').src = logos[1];
}
var tmp;
for (var i=0; i<holidays.length; i++) {
tmp = new Date(holidays[i]+'/'+now.getFullYear());
// alert(tmp.toDateString()+'\n'+now.toDateString()); // for testing
if (tmp.toDateString() == now.toDateString()) {
document.getElementById('logo').src = logos[2];
}
}
}
</script>
</head>
<body>
<img id="logo" src="" alt="">
</body>
</html>
Good Luck!
That sounds great, thank you! This is exactly what I needed, and thank you for my lesson, I feel a little more comfortable dealing with javascript
I have one last question and I'll get out of your hair; would it be possible to make the image a link as well? If so, how would I do that? Lol
HI this is pretty much exactly what I am looking for... excellent.. Trouble is I am very new to coding, I am currently using a wordpress based site that I want to add an image to that changes in the London GMT. Basically an image says "call now we are open" then when we are closed I want the image to say "we are closed".. Can I paste this code into Wordpress, or do I have to change other parts of the code, your help is much appreciated..
HI this is pretty much exactly what I am looking for... excellent.. Trouble is I am very new to coding, I am currently using a wordpress based site that I want to add an image to that changes in the London GMT. Basically an image says "call now we are open" then when we are closed I want the image to say "we are closed".. Can I paste this code into Wordpress, or do I have to change other parts of the code, your help is much appreciated..
J.
Unclear to me from your questions:
1. What code are you using at the moment? Do you have a link?
2. Where are the images suppose to be found and where do you want them displayed?
3. I don't use Wordpress, so I'm not sure how to answer that part of your question.
Let's get some working code and see if it can be inserted into your Wordpress file.
You should start a fresh thread with your question and reference this link or your code to view in the new thread.
The image of he woman at the top will say 'We are open, please call now' I want this to appear in our opening hours 830am - 830pm and then when we are closed I want another picture to appear saying 'We are now closed'.
You are a superstar for helping definately worth a coffee or a beer on me : )
The image of he woman at the top will say 'We are open, please call now' I want this to appear in our opening hours 830am - 830pm and then when we are closed I want another picture to appear saying 'We are now closed'.
You are a superstar for helping definately worth a coffee or a beer on me : )
J.
I could find the 'Open' banner, but not the 'Closed' one, so you will need to change the reference.
You did not make reference to holiday hours should they occur, so this version leaves them out for simplicity. Easy enough to add them back into the logic.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
var logos = [
'http://www.briantcomms.co.uk/wp-content/uploads/2012/08/Briant_Open_Banner1.jpg', // Open image
'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg' // Closed image
];
onload = function () {
var now = new Date();
var DOW = now.getUTCDay();
var HH = now.getUTCHours(); if (HH < 10) { HH = '0'+HH; }
var MM = now.getUTCMinutes(); if (MM < 10) { MM = '0'+MM; }
var HHMM = ''+HH+''+MM;
if ( ((HHMM >= '0830') && (HHMM < '2030')) ) { // 08:30am to 8:30pm in military time
document.getElementById('logo').src = logos[0];
} else {
document.getElementById('logo').src = logos[1];
}
}
</script>
</head>
<body>
<img id="logo" src="" alt="">
</body>
</html>
The biggest change was going from getDay(), getHours(), and getMinutes()
to getUTCDay(), getUTCHours() and getUTCMinutes() functions.
Since the UTC functions use GMT and it appears that your post is from the UK,
I don't think further adjustments are required. If you needed for different time zones
then you would need to add logic for this with a getTimeZoneOffset() function
See: http://www.quackit.com/javascript/ja..._functions.cfm
The only problem I have now is I do NOT want the Banner to appear on the homepage, is there some code I can add for the image to appear on every page except the home page?
Place the relevant code only on the pages you wish the image to appear. The Javascript should be an external file.
UTC time is not the same as London Time when daylight saving is in operation.
It would help if you indicated your country. You refer to "Labor Day" (USA) but also London GMT.
Here is another shop open/closed script:-
Code:
<html>
<head>
<style type="text/css">
#openSign.OPEN {
color: green;
background-color: yellow;
font-size: x-large;
width:350px;
}
#openSign.CLOSED {
color : red;
background-color: pink;
font-size: large;
width:350px;
}
</style>
<script type="text/javascript">
var OPENAT = 7.5; // 7:30 AM ... change as appropriate - can be fractions of an hour e.g. 7.5 = 7:30am
var CLOSEAT = 21; // 9:00 PM ... change as appropriate
var OPENATSAT = 8.75; // 8.45 AM .. change as appropriate
var CLOSEATSAT = 13; // 1.00 PM ... change as appropriate
function areWeOpen( ) {
var sign = document.getElementById("openSign");
var day = new Date().getDay();
var hour = new Date().getHours();
var mins = new Date().getMinutes();
hour = hour + mins/60;
if ( day >=1 && day <=5 && hour >= OPENAT && hour < CLOSEAT ) { // Monday - Friday
sign.innerHTML = "We are now OPEN";
sign.className = "OPEN";
}
else if ( day == 6 && hour >= OPENATSAT && hour < CLOSEATSAT ) { // day 6 = Saturday
sign.innerHTML = "We are now OPEN";
sign.className = "OPEN";
}
else {
sign.innerHTML = "Sorry, we are now CLOSED";
sign.className = "CLOSED";
}
}
</script>
</head>
<body onload = "areWeOpen()">
<center>
<h2>Welcome to our Store</h2>
<br/>
<h3 id="openSign"></h3>
<br/>
</center>
... rest of page ...
</body>
</html>
Obviously you can replace the text by an image.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Before you post, read our: 
Script to change image at time and day
Something to try ...
