Expand|Select|Wrap|Line Numbers
- var img = new Image();
- var now = new Date();
- var weekday = new Array(7);
- weekday[0] = "Sunday"; //9:00 am - 11:00 pm
- weekday[1] = "Monday"; //11:00 am - 11:00 pm
- weekday[2] = "Tuesday"; //11:00 am - 11:00 pm
- weekday[3] = "Wednesday"; //11:00 am - 11:00 pm
- weekday[4] = "Thursday"; //11:00 am - 11:00 pm
- weekday[5] = "Friday"; //9:00 am - 12:00 am
- weekday[6] = "Saturday"; //9:00 am - 12:00 am
- var checkTime6 = function() {
- var today = weekday[now.getDay()];
- var timeDiv6 = document.getElementById('timeDiv6');
- var dayOfWeek = now.getDay();
- var hour = now.getHours();
- var minutes = now.getMinutes();
- //add AM or PM
- var suffix = hour >= 12 ? "PM" : "AM";
- // add 0 to one digit minutes
- if (minutes < 10) {
- minutes = "0" + minutes
- };
- if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) && hour >= 9 && hour <= 22) {
- hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
- timeDiv6.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />';
- timeDiv6.className = 'open';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
- }
- else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour >= 9 && hour <= 23) {
- hour = ((hour + 11) % 12 + 1);
- timeDiv6.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>';
- timeDiv6.className = 'open';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
- }
- else {
- if (hour == 0 || hour > 9) {
- hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
- }
- timeDiv6.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ;
- timeDiv6.className = 'closed';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';
- }
- };
- setInterval(checkTime6, 1000);
- checkTime6();
- var checkTime31 = function() {
- var today = weekday[now.getDay()];
- var timeDiv = document.getElementById('timeDiv31');
- var dayOfWeek = now.getDay();
- var hour = now.getHours();
- var minutes = now.getMinutes();
- //add AM or PM
- var suffix = hour >= 12 ? "PM" : "AM";
- // add 0 to one digit minutes
- if (minutes < 10) {
- minutes = "0" + minutes
- };
- if ((dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 || dayOfWeek == 5) && hour >= 9 && hour <= 23) {
- hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
- timeDiv31.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />';
- timeDiv31.className = 'open';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
- }
- else if ((dayOfWeek == 0 || dayOfWeek == 6) && hour >= 9 && hour <= 1) {
- hour = ((hour + 11) % 12 + 1);
- timeDiv31.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>';
- timeDiv31.className = 'open';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
- }
- else {
- if (hour == 0 || hour > 9) {
- hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
- }
- timeDiv31.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ;
- timeDiv31.className = 'closed';
- img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';
- }
- };
- setInterval(checkTime31, 1000);
- checkTime31();
- var currentDay = weekday[now.getDay()];
- var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
- $(currentDayID).toggleClass("today"); //hightlights today in the view hours modal popup
Expand|Select|Wrap|Line Numbers
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
- <div class="timebox1" >
- <div id="timeDiv6"></div>
- <label class="viewOpen6" for="modal-state6">View Hours <i class="fa fa-clock-o"></i></label>
- <input type="checkbox" name="modal-state6" id="modal-state6">
- <div class="modal-overlay6">
- <label for="modal-state6" class="modal-overlay-close6"></label>
- <div class="modaltime6">
- <label class="button-close6" for="modal-state6"><i class="fa fa-times"></i></label>
- <h2>We're Open At These Times</h2>
- <div id="Monday" class="dateTime">
- <div class="day">Monday</div>
- <div class="time">11am - 11pm</div>
- </div>
- <br>
- <div id="Tuesday" class="dateTime">
- <div class="day">Tuesday</div>
- <div class="time">11am - 11pm</div>
- </div>
- <br>
- <div id="Wednesday" class="dateTime">
- <div class="day">Wednesday</div>
- <div class="time">11am - 11pm</div>
- </div>
- <br>
- <div id="Thursday" class="dateTime">
- <div class="day">Thursday</div>
- <div class="time">11am - 11pm</div>
- </div>
- <br>
- <div id="Friday" class="dateTime">
- <div class="day">Friday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Saturday" class="dateTime">
- <div class="day">Saturday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Sunday" class="dateTime">
- <div class="day">Sunday</div>
- <div class="time">9am - 11pm</div>
- </div>
- </div>
- </div>
- </div>
- <div class="timebox2" >
- <div id="timeDiv31"></div>
- <label class="viewOpen31" for="modal-state31">View Hours <i class="fa fa-clock-o"></i></label>
- <input type="checkbox" name="modal-state31" id="modal-state31">
- <div class="modal-overlay31">
- <label for="modal-state31" class="modal-overlay-close31"></label>
- <div class="modaltime31">
- <label class="button-close31" for="modal-state31"><i class="fa fa-times"></i></label>
- <h2>We're Open At These Times</h2>
- <div id="Monday" class="dateTime">
- <div class="day">Monday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Tuesday" class="dateTime">
- <div class="day">Tuesday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Wednesday" class="dateTime">
- <div class="day">Wednesday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Thursday" class="dateTime">
- <div class="day">Thursday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Friday" class="dateTime">
- <div class="day">Friday</div>
- <div class="time">9am - 12am</div>
- </div>
- <br>
- <div id="Saturday" class="dateTime">
- <div class="day">Saturday</div>
- <div class="time">9am - 1am</div>
- </div>
- <br>
- <div id="Sunday" class="dateTime">
- <div class="day">Sunday</div>
- <div class="time">9am - 1am</div>
- </div>
- </div>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- /*timee*/
- .timebox1{
- position:fixed;
- display:block;
- padding:0px;
- top:10px;
- left:10px;
- }
- .timebox2{
- position:fixed;
- display:block;
- padding:0px;
- top:10px;
- right:10px;
- }
- .open {
- color: #27ae60;
- /*border: 2px solid #27ae60;*/
- }
- .closed {
- color: rgba(231, 76, 60, 0.85);
- /*border: 2px solid rgba(231, 76, 60, 0.8);*/
- }
- * {
- margin: 0;
- padding: 0;
- font-family: 'Lato', sans-serif;
- }
- #timeDiv6, #timeDiv31{
- font-size: 15px;
- text-transform: uppercase;
- text-align: center;
- position:static;
- width: 100%;
- background: transparent;
- margin: 0 auto;
- top: 10px;
- border-radius: 3px;
- /* -webkit-box-shadow: 0 8px 16px -8px #adadad;
- -moz-box-shadow: 0 8px 16px -8px #adadad;
- box-shadow: 0 8px 16px -8px #adadad;*/
- display:block;
- vertical-align: top;
- font-weight: 600;
- background-color: rgb(0,0,0); /* Fallback color */
- background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
- }
- .viewOpen6, .viewOpen31 {
- font-size: 15px;
- text-transform: uppercase;
- display:block;
- border: 2px solid rgba(70, 70, 70, 0.7);
- max-width: 100%;
- background: #fff;
- color: rgba(70, 70, 70, 0.8);
- margin: 0 auto;
- top:160px;
- padding: 10px;
- border-radius: 3px;
- -webkit-box-shadow: 0 8px 16px -8px #adadad;
- -moz-box-shadow: 0 8px 16px -8px #adadad;
- box-shadow: 0 8px 16px -8px #adadad;
- cursor: pointer;
- border:blue solid 1px;
- position:static;
- }
- .viewOpen6 i, .viewOpen31 i {
- color: rgba(70, 70, 70, 0.8);
- }
- @media all and (max-width: 600px) {
- #timeDiv6, #timeDiv31{
- margin-bottom: 20px;
- }
- }
- @media all and (min-width: 601px) {
- #timeDiv6, #timeDiv31 {
- margin-right: 15px;
- }
- }
- .dateTime {
- max-width: 320px;
- margin: 0 auto;
- }
- .day {
- display: inline-block;
- float: left;
- }
- .time {
- display: inline-block;
- float: right
- }
- .today {
- color: rgb(200, 85, 39);
- font-weight: 600;
- }
- @media all and (max-height: 420px) {
- #timeDiv6, .viewOpen6,
- #timeDiv31, .viewOpen31
- {
- top: 60%;
- }
- }
- /* view hours modal */
- @keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- .modal-overlay6, .modal-overlay31{
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(173, 173, 173, 0.5);
- display: none;
- z-index:999;
- }
- #modal-state6, #modal-state31 {
- display: none;
- }
- #modal-state6:checked + .modal-overlay6,
- #modal-state31:checked + .modal-overlay31
- {
- opacity: 1;
- animation: fade-in .4s;
- display: block;
- }
- .modaltime6, .modaltime31{
- position: absolute;
- margin: 0 auto;
- padding: 30px 25px;
- background: #fff;
- right: 0;
- left: 0;
- text-align: center;
- box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
- max-width: 400px;
- line-height: 1.8;
- border:red solid 1px;
- }
- .modaltime6 h2, .modaltime31 h2 {
- margin-top: 0;
- line-height: 25px;
- font-size: 22px;
- border-bottom: 1px solid #dce0d8;
- margin-bottom: 10px;
- padding-bottom: 10px;
- font-weight: 400;
- }
- @media all and (max-width: 470px) {
- .modaltime6 {
- width: 75%;
- }
- .modaltime6 h2{
- font-size: 20px;
- }
- .modaltime31 {
- width: 75%;
- }
- .modaltime31 h2{
- font-size: 20px;
- }
- }
- #modal-state6:checked + .modal-overlay6 .modaltime6,
- #modal-state31:checked + .modal-overlay31 .modaltime31
- {
- top: 20%;
- }
- .modal-overlay-close6, .modal-overlay-close31 {
- height: 100%;
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- }
- .button-close6, .button-close31 {
- text-decoration: none;
- position: absolute;
- color: #fff;
- background: #464646;
- padding: 0px 7px;
- font-weight: bold;
- top: 0px;
- right: 0;
- cursor: pointer
- }
- /*time end*/