Open Close using javascript
up vote
0
down vote
favorite
I would like to ad an open hours which would change everyday on my site and also having just the word "closed" when the opening hours is ended.
I have used a code that I found on this website but I am not good enough in Javascript to change it to look like what I want : having just the "closed" when my shop is closed without all the opening hours.
I am actually not a developer and I am struggling ..
This is my html:
<div id="open-display">
<div class="openclosed"/>
<div class="timerange" data-days="1,2,3,4" data-open="08:00" data-close="1:00">Open today: <span class="days">Mon - Thu</span> 8am - 6pm</div>
<div class="timerange" data-days="5" data-open="08:00" data-close="20:00">Open today: <span class="days">Fri</span> 8am - 8pm</div>
<div class="timerange" data-days="6" data-open="09:00" data-close="18:00">Open today: <span class="days">Sat</span> 8am - 6pm</div>
<div class="timerange" data-days="7" data-open="09:00" data-close="17:00">Open today: <span class="days">Sun</span> 8am - 5pm</div>
</div>
Javascript:
function isOpen(timeRangeEl, date) {
var day = '' + date.getDay();
var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
var days = timeRangeEl.getAttribute('data-days');
var openTime = timeRangeEl.getAttribute('data-open');
var closeTime = timeRangeEl.getAttribute('data-close');
return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}
function openClose() {
var date = new Date();
var display = document.getElementById('open-display');
var els = display.getElementsByClassName('timerange');
var anyActive = false;
for (var i = 0; i < els.length; i++) {
if (isOpen(els[i], date)) {
anyActive = true;
els[i].className = els[i].className.replace(/ *inactiveb/g, '');
}
else if (els[i].className.indexOf('inactive') < 0) {
els[i].className += ' inactive';
}
}
if (anyActive) {
display.className = 'closed';
} else {
display.className = 'closed';
}
}
setInterval(openClose, 5000);
openClose();
CSS:
#open-display.open > .timerange.inactive,
#open-display.open .days {
display: none;
}
#open-display.open > .openclosed::before {
content: "";
}
#open-display.closed > .openclosed::before {
content: 'Closed';
}
#open-display {
font-size: 14px;
float: left;
margin-left: 20px;
margin-top: 7px;
}
javascript html
New contributor
add a comment |
up vote
0
down vote
favorite
I would like to ad an open hours which would change everyday on my site and also having just the word "closed" when the opening hours is ended.
I have used a code that I found on this website but I am not good enough in Javascript to change it to look like what I want : having just the "closed" when my shop is closed without all the opening hours.
I am actually not a developer and I am struggling ..
This is my html:
<div id="open-display">
<div class="openclosed"/>
<div class="timerange" data-days="1,2,3,4" data-open="08:00" data-close="1:00">Open today: <span class="days">Mon - Thu</span> 8am - 6pm</div>
<div class="timerange" data-days="5" data-open="08:00" data-close="20:00">Open today: <span class="days">Fri</span> 8am - 8pm</div>
<div class="timerange" data-days="6" data-open="09:00" data-close="18:00">Open today: <span class="days">Sat</span> 8am - 6pm</div>
<div class="timerange" data-days="7" data-open="09:00" data-close="17:00">Open today: <span class="days">Sun</span> 8am - 5pm</div>
</div>
Javascript:
function isOpen(timeRangeEl, date) {
var day = '' + date.getDay();
var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
var days = timeRangeEl.getAttribute('data-days');
var openTime = timeRangeEl.getAttribute('data-open');
var closeTime = timeRangeEl.getAttribute('data-close');
return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}
function openClose() {
var date = new Date();
var display = document.getElementById('open-display');
var els = display.getElementsByClassName('timerange');
var anyActive = false;
for (var i = 0; i < els.length; i++) {
if (isOpen(els[i], date)) {
anyActive = true;
els[i].className = els[i].className.replace(/ *inactiveb/g, '');
}
else if (els[i].className.indexOf('inactive') < 0) {
els[i].className += ' inactive';
}
}
if (anyActive) {
display.className = 'closed';
} else {
display.className = 'closed';
}
}
setInterval(openClose, 5000);
openClose();
CSS:
#open-display.open > .timerange.inactive,
#open-display.open .days {
display: none;
}
#open-display.open > .openclosed::before {
content: "";
}
#open-display.closed > .openclosed::before {
content: 'Closed';
}
#open-display {
font-size: 14px;
float: left;
margin-left: 20px;
margin-top: 7px;
}
javascript html
New contributor
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I would like to ad an open hours which would change everyday on my site and also having just the word "closed" when the opening hours is ended.
I have used a code that I found on this website but I am not good enough in Javascript to change it to look like what I want : having just the "closed" when my shop is closed without all the opening hours.
I am actually not a developer and I am struggling ..
This is my html:
<div id="open-display">
<div class="openclosed"/>
<div class="timerange" data-days="1,2,3,4" data-open="08:00" data-close="1:00">Open today: <span class="days">Mon - Thu</span> 8am - 6pm</div>
<div class="timerange" data-days="5" data-open="08:00" data-close="20:00">Open today: <span class="days">Fri</span> 8am - 8pm</div>
<div class="timerange" data-days="6" data-open="09:00" data-close="18:00">Open today: <span class="days">Sat</span> 8am - 6pm</div>
<div class="timerange" data-days="7" data-open="09:00" data-close="17:00">Open today: <span class="days">Sun</span> 8am - 5pm</div>
</div>
Javascript:
function isOpen(timeRangeEl, date) {
var day = '' + date.getDay();
var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
var days = timeRangeEl.getAttribute('data-days');
var openTime = timeRangeEl.getAttribute('data-open');
var closeTime = timeRangeEl.getAttribute('data-close');
return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}
function openClose() {
var date = new Date();
var display = document.getElementById('open-display');
var els = display.getElementsByClassName('timerange');
var anyActive = false;
for (var i = 0; i < els.length; i++) {
if (isOpen(els[i], date)) {
anyActive = true;
els[i].className = els[i].className.replace(/ *inactiveb/g, '');
}
else if (els[i].className.indexOf('inactive') < 0) {
els[i].className += ' inactive';
}
}
if (anyActive) {
display.className = 'closed';
} else {
display.className = 'closed';
}
}
setInterval(openClose, 5000);
openClose();
CSS:
#open-display.open > .timerange.inactive,
#open-display.open .days {
display: none;
}
#open-display.open > .openclosed::before {
content: "";
}
#open-display.closed > .openclosed::before {
content: 'Closed';
}
#open-display {
font-size: 14px;
float: left;
margin-left: 20px;
margin-top: 7px;
}
javascript html
New contributor
I would like to ad an open hours which would change everyday on my site and also having just the word "closed" when the opening hours is ended.
I have used a code that I found on this website but I am not good enough in Javascript to change it to look like what I want : having just the "closed" when my shop is closed without all the opening hours.
I am actually not a developer and I am struggling ..
This is my html:
<div id="open-display">
<div class="openclosed"/>
<div class="timerange" data-days="1,2,3,4" data-open="08:00" data-close="1:00">Open today: <span class="days">Mon - Thu</span> 8am - 6pm</div>
<div class="timerange" data-days="5" data-open="08:00" data-close="20:00">Open today: <span class="days">Fri</span> 8am - 8pm</div>
<div class="timerange" data-days="6" data-open="09:00" data-close="18:00">Open today: <span class="days">Sat</span> 8am - 6pm</div>
<div class="timerange" data-days="7" data-open="09:00" data-close="17:00">Open today: <span class="days">Sun</span> 8am - 5pm</div>
</div>
Javascript:
function isOpen(timeRangeEl, date) {
var day = '' + date.getDay();
var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
var days = timeRangeEl.getAttribute('data-days');
var openTime = timeRangeEl.getAttribute('data-open');
var closeTime = timeRangeEl.getAttribute('data-close');
return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}
function openClose() {
var date = new Date();
var display = document.getElementById('open-display');
var els = display.getElementsByClassName('timerange');
var anyActive = false;
for (var i = 0; i < els.length; i++) {
if (isOpen(els[i], date)) {
anyActive = true;
els[i].className = els[i].className.replace(/ *inactiveb/g, '');
}
else if (els[i].className.indexOf('inactive') < 0) {
els[i].className += ' inactive';
}
}
if (anyActive) {
display.className = 'closed';
} else {
display.className = 'closed';
}
}
setInterval(openClose, 5000);
openClose();
CSS:
#open-display.open > .timerange.inactive,
#open-display.open .days {
display: none;
}
#open-display.open > .openclosed::before {
content: "";
}
#open-display.closed > .openclosed::before {
content: 'Closed';
}
#open-display {
font-size: 14px;
float: left;
margin-left: 20px;
margin-top: 7px;
}
javascript html
javascript html
New contributor
New contributor
edited yesterday
aduguid
2901317
2901317
New contributor
asked 2 days ago
FLora
1
1
New contributor
New contributor
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago
add a comment |
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
FLora is a new contributor. Be nice, and check out our Code of Conduct.
FLora is a new contributor. Be nice, and check out our Code of Conduct.
FLora is a new contributor. Be nice, and check out our Code of Conduct.
FLora is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f208065%2fopen-close-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Welcome to Code Review! Can you confirm that the code functions correctly? If so, I recommend that you edit to add a summary of the testing (ideally as reproducible unit-test code). If it's not working, it isn't ready for review (see help center) and the question may be deleted.
– Toby Speight
2 days ago
If you need help in getting your code to work correctly: please go and post it on Stack Overflow instead. Code Review is for code that already works but that you suspect can be rewritten to be smarter, better, nicer or cleaner.
– Peter B
2 days ago