Swap div visibility based on time / schedule

Question

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 some sort of a javascript or jquery content swapper without any luck.. thanks for any suggestions?

<div id="day">content</div>

<div id="night">content</div>

I was able to get this working using only the following php:

<?php
$hour = strftime("%H");
if ($hour >= 02 && $hour < 05)
{
echo '<div id="div1">content block one </div>';
}
else
{
    echo '<div id="div2">content block two</div>';
}?>

However this solution doesn't seem to work if I want to show the div from 8pm until 4am... is this because it is spanning more than one day? Thanks for any suggestions.

Answer 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
        );
    }
?>

Answer 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.

Answer 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'

Answer 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.

Answer 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;

Answer 6

Theoritically it is as simple as this:

HTML

<div class="h h10-6">10-6</div>
<div class="h h-other">other time of day</div>

JavaScript

current_hour = <? some_server_side_code_to_get_the_hour ?>;
if(current_hour >= 10 && current_hour < 18) $('.h10-6').show();
else $('.h-other').show();

CSS

.h { display: none; }

Answer 7

I used this

<?php 
    date_default_timezone_set("America/Los_Angeles");
    $rightNow = date("m:d:h:i:sa");  
    //echo $rightNow ;
    //$startHide = date("6:11:02:30:00pm")
    $startHide = date("06:11:02:30:00pm");
    $endHide = date("06:12:05:00:00pm");
    ?>
<? if ($rightNow > $startHide && $rightNow < $endHide): ?>
    
    <style> .hideCertainTimes {
        display:none !important;
        } 
    </style>

<? else: ?>

<? endif; ?>