Swap Div Visibility Based On Time / Schedule

On my page I have two divs... one div I'd like to be visible from 10am to 6pm ( server time ).... and the other div for the remaining hours. I tried a bunch of searches to find s

Solution 1:

EDIT

The case you mentioned in your comment is a thorny one. So here is my revised-revised answer:

<?php
    $t0 = 20;        // from hour (inclusive) -- int, 0-23
    $t1 = 4;         // till hour (excluding) -- int, 0-23
    $t  = date('G'); // current hour (derived from current time) -- int, 0-23
    if ($t0 == $t1) {
        $in_range = NULL;
    } elseif ($t0 < $t1) {
        $in_range = ($t0 <= $t && $t < $t1);
    } else {
        $in_range = ($t1 <= $t && $t < $t0) == false;
    }
    /*
    echo $in_range === NULL
        ? 'from and till dates must be different'
        : ($in_range ? 'just in time' : 'wait till the time is right');
    */
    if ($in_range === false) {
        $s0 = mktime($t0, 0, 0); // lunch time
        $s  = time();            // current time
        if ($s0 < $s) {
            $s0 += 60 * 60 * 24; // late for lunch! now wait till tomorrow
        }
        $d0 = $s0 - $s;
        $dh = floor($d0 / 60 / 60);
        $dm = $d0 - $dh * 60 * 60; $dm = floor($dm / 60);
        $ds = $d0 - $dh * 60 * 60 - $dm * 60;
        echo sprintf("
            Current date...: %s<br />
            Target date....: %s<br />
            Time to go.....: %d hours, %d minutes, %d seconds
            ",
            date("Y-m-d h:i:s A", $s),
            date("Y-m-d h:i:s A", $s0),
            $dh,
            $dm,
            $ds
        );
    }
?>

Solution 2:

If you need to set visibility based on server time, you should show and hide the divs from the server side. Because no JavaScript can get the server time but the client (possible remote located) browser.

If you have a script in your site that can return the server time, then you could achieve this, but I think it would be more sensible to mark the HTML (php, jsp, whatever) code conditionally from scratch.

Solution 3:

Just use $(document).ready() handler with Date() (eg. getHours() method) as I did with the following code: jsfiddle.net/c2TPZ. You can hide both blocks by default unless your JS sets CSS styles for them to be visible, eg. like this:

$('#box1').css({display: 'block'}); // sets display to 'block', eg. from 'none'

Solution 4:

I would generally recommend this be done on the server, but it would look something like this in Javascript:

var pHour = Date.getHours();
if ((pHour >= 10) && (pHour < 18))
{
  $('.scheduled-target').show();
}

This assumes that you'd make '.scheduled-target' display:none by default.

Also this is for the client's local time. If you want an absolute time, you'll want to start with Date.getUTCHours() and do offsets for your Timezone/Locale.

Solution 5:

$(document).ready(function() {
  var d = new Date();
  if (d.getHours() >= 10 && d.getHours() < 18) {
    $(#div1).show();
    $(#div2).hide();
  }
  else {
    $(#div1).hide();
    $(#div2).show();
  }
});

EDIT: Oops, I missed the part about server time. This won't be reliable. Instead you should set them with server-side scripting. Don't know what you're using on the server side, but for example in PHP:

$hour = strftime("%H");
if ($hour >= 10 && $hour < 18)
{
  $div1_class = "show";
  $div2_class = "hide";
}

In your css, class .hide is display: none;