CODEWITHSUNDEEP
javascripthtml
GSaunders
GSaunders

Reputation: 548

Hide Div on Time of Day

I have a Javascript countdown timer, when it reaches 0, it shuts off and then resets the next day. Above it I have a 'We're Open' text. I want to hide that text and the rest of the div 'wereOpen' when the countdown reaches 0. The problem I am having trouble with is hiding the div 'wereOpen'.

Website

Javascript to hide div 'wereOpen'

!function ($) {
// get current time
// get current time
var d = new Date(), 
hours = d.getHours(),
mins = d.getMinutes();
day = d.getDay();   

// if day is mon-Fri and time is between 9am and 5:30pm
if(0 < dday < 7   
&& hours >= 21 
&& (hours < 24 || hours === 24 && mins <= 00)){

$('.wereOpen').hide(); 
};
}

Javascript for the countdown:

if (document.getElementById('countdown')) {
pad = function(n, len) { // leading 0's
    var s = n.toString();
    return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function countDown() {
    var now = new Date();
    if ( (now.getDay() >= 1) && (now.getDay() <= 7) ) { // Monday to Sunday
        var target = 21; // 21:00hrs is the cut-off point
        if (now.getHours() < target) { // don't do anything if we're past the cut-off point
            var hrs = (target - 1) - now.getHours();
            if (hrs < 0) hrs = 0;
            var mins = 59 - now.getMinutes();
            if (mins < 0) mins = 0;
            var secs = 59 - now.getSeconds();
            if (secs < 0) secs = 0;
            var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
            document.getElementById('countdown').innerHTML = str;
        }
    }
}
var timerRunning = setInterval('countDown()', 1000);
}

Upvotes: 0

Views: 1495

Answers (2)

Paul S.
Paul S.

Reputation: 66304

I was just playing around with a completely different way to solve "the problem" and I've ended up with the following, posting as it may be helpful for you

var open_times = {
        // day              hh  mm           hh  mm
        Monday:    { open: [ 9, 30], close: [17, 30]},
        Tuesday:   { open: [ 9, 30], close: [17, 30]},
        Wednesday: { open: [ 9, 30], close: [17, 30]},
        Thursday:  { open: [ 9, 30], close: [17, 30]},
        Friday:    { open: [ 9, 30], close: [17, 30]},
        Saturday:  { open: [ 0,  0], close: [ 0,  0]},
        Sunday:    { open: [ 0,  0], close: [ 0,  0]},
    },
    timezone = -(5*60 + 0);

function isOpen() {
    var d = new Date(),
        day, open, close;
    d.setUTCMinutes(d.getUTCMinutes() + timezone);
    day = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getUTCDay()];
    open = open_times[day].open[0] * 3600000 + open_times[day].open[1] * 60000,
    close = open_times[day].close[0] * 3600000 + open_times[day].close[1] * 60000;
    d = +d - (d.setUTCHours(0), d.setUTCMinutes(0), d.setUTCSeconds(0), d);
    if (open <= d && close > d)
        return {open: true, remain: close - d};
    else
        return {open: false, remain: 0};
}

function updateCountDown(ms) {
    var elm = document.getElementById('countdown'),
        ss = pad2(Math.floor(ms / 1000) % 60),
        mm = pad2(Math.floor(ms / 60000) % 60),
        hh = pad2(Math.floor(ms / 3600000) % 24);
    if (elm)
        elm.innerHTML = hh + ':' + mm + '.<small>' + ss + '</small>';
}

function pad2(x) {
    x = '' + x;
    if (x.length === 1) return '0' + x;
    if (x.length === 0) return '00';
    return x;
}

var timerRunning = setInterval(function () {
    var time = isOpen();
    if (time.open) {
        $('.wereOpen').show();
        updateCountDown(time.remain);
    } else
        $('.wereOpen').hide();
}, 1000);

Upvotes: 1

Somojojojo
Somojojojo

Reputation: 278

There are some incorrect variable names in your first piece of code, as well as some logic errors. According to your comment, I've adjusted the if statement:

if((day === 0 || day === 6)
   || (hours < 9 || (hours >= 17 && mins > 30)))
{
    $('.wereOpen').hide();
}

This statement will run if the day is saturday or sunday, or if the time is below 9am or above 5:30pm (local browser time).

Upvotes: 0

Related Questions