Show and Hide div based on day and time

Question

I want to show and hide div based on day and time. I have not much experience with PHP, but I think I found a code for this. But I don't know how to sort and how the codes shall be set up.

I want it to show like this during opening hours: http://boxmedia.no (bottom of frontpage).

It's a form with one field and one button. It's in Norwegian and says: Fill in your number here. And press here, then we call you back in 10 mins

This is the code for the form:

<div class="container"> <div class="row-centered main-btn ring_me"> 
<?php 
echo do_shortcode('[contact-form-7 id="249" title="Untitled"]'); 

?> </div> <!--div class="row-centered sec-btn" style="display:none;">
<span><input max-size="30" type="text" id="contact_no" name="contact_no"/>
</span><span class="btn btn-success btn-lg">
<font><font class="goog-text-highlight">
<a href="<?php echo home_url(); 

?>/kontakt-oss">Send </a> </font></font> </span></div--> </div>

And this is the code I think will make it show during opening hours: 8am to 4pm. And not in weekends.

But where do I put this in the existing code above:

<?php date_default_timezone_set('Europe/Oslo');
$currentHour = date("H");
$openTime = 8;
$closeTime = 16;
if ($currentHour >= $openTime && $currentHour < $closeTime){
      $css = 'display:block;';
}else{
      $css = 'display:none;';
}

echo '<style type="text/css">.timeBasedLink {'.$css.'}</style>'; ?>


if (date("w") == 0 || date("w") == 6 || $currentHour < $openTime || 
$currentHour >= $closeTime)

{
    $css = 'display:none;';
}
else
{
    $css = 'display:block;';
}

--------------- Added February 2. 2015 ---------------

And is this the code to add to my css file? And is it placed correctly? Is the class .TimeOn ? How I can connect the TimeOn to ring_me or what the class is called?

.ring_me input[type="tel"] {
    width: 258px;
    margin-right: 20px;
.timeOn {
display:block;
}
.timeOff {
display:none;
}
}

And this is another place in the CSS:

.ring_me input[type="tel"] {
.timeOn {
display:block;
}
.timeOff {
display:none;
}
font-size: 20px;
line-height: 24px;

Answer 1

Okay. You have some problems with your code, let's start there. First:

date_default_timezone_set(‘Europe/Oslo');

These are the wrong quotes, it needs to be this:

date_default_timezone_set('Europe/Oslo');

PHP will only recognize single quote (') and double quote ("") for processing these kinds of things.

Second, when is your store open? You set the close time here:

$closeTime = 9;

To 9. But you're using $currentHour = date("H"); which is 24 hour code. That means your store will only be treated as open between 8 AM and 9 AM. Perhaps you meant 9 PM, which would be:

$closeTime = 21;

Third, Right here:

echo '<style type="text/css">.timeBasedLink {'.$css.'}</style>'; ?>

You prematurely end the PHP tag with ?>. This stops all the following PHP code from processing.

Fourth, You're also generating in-line CSS, which is bad, depending on if the store is open or closed. You can simply set up two CSS classes (outside the PHP code, none the less) and save yourself that additional processing, like so:

<style type="text/css">
    .timeOn {
        display:block;
    }
    .timeOff {
        display:none;
   }
</style>

Note that this is in-line CSS, and should really go in a normal CSS file.

Finally, to fix your actual problem, the send button is currently wrapped in comment tags:

<!-- // Comment Goes here -->

We're going to git rid of these tags, and simply echo our new PHP variable (as a class) inside the DIV to hide it or show it, like so:

<div class="row-centered sec-btn <?php echo $css; ?>">

This would be my implementation of the above code:

<?php 
    // Basic Variable Declaration
    date_default_timezone_set('Europe/Oslo');
    $currentHour = date("H");
    $openTime = 8;

    // This needs to be 21, if using "H" and the time is 9
    $closeTime = 21;

    // Here we check to see if we are open, and in a good week
    if ($currentHour >= $openTime && $currentHour < $closeTime && (date("w") != 0 || date("w") != 6)){
          // If we are, set our class to off.
          $css = 'timeOn';
    } else {
          // Otherwise, set our class to off.
          $css = 'timeOff;';
    }

    // This code should really go in a CSS file
    // And be inclunded in the header
    echo '<style type="text/css">';
        // This is our class for showing the block
        echo '.timeOn {
                display:block;
              }';
        // This is our class for hiding the block
        echo '.timeOff {
                display:none;
               }';      
        echo '</style>';

    // We're ending the PHP Tag here
?>

<div class="container"> 
    <div class="row-centered main-btn ring_me <?php echo $css; ?>"> 
        <?php 
            echo do_shortcode('[contact-form-7 id="249" title="Untitled"]'); 
        ?> 
    </div>
</div>

Note that you also had an extra set of <font> tags inside the final DIV that weren't doing anything.

This solution is not 100% correct (I left the CSS Generation in PHP so I could add comments to it, for example) but it uses defined classes and simply alters the class based on the PHP Hour variables we set up at the beginning of the script. This is a much cleaner approach that requires much less processing on the PHP side before generating the page.

Answer 2

A bit of theory first: PHP runs before the page loads and before the HTML is written. This means that you cannot simply "include" PHP in a HTML page. You have to include the HTML in a PHP page.

To do this, simply create a page with the .php extension (instead of .html), add your HTML, and then put the PHP code inside the proper tags.

<?php
  //Please see Mark's answer for a good example of the code.
?>

This does not differ in any other way from a regular html page. You'll have the normal structure of an HTML page and then simply add your PHP code between the <?php ?> tags. Like this:

<html>
<head>
  //This is where you link an external .css sheet
  <link href="Path-to-file/FILENAME.css" rel="stylesheet" type="text/css">
</head>
<body>

  <?php
    //Some PHP code
  ?>

  <!--Form Code goes here-->
  <form></form>

</body>
</html>

Essentially you are still writing an HTML page, but instead of manually writing it all out, you are using PHP to write different HTML depending on the time/day of the week.

See http://www.w3schools.com/css/css_howto.asp for information on CSS.

This can also be done using Javascript + PHP. First call a separate PHP page using AJAX, returning TRUE if it is within the correct time and displaying your form (see https://stackoverflow.com/a/7165616/4126804).

Answer 3

You should consider making it a function for convenience

<?php
function hide_show_from_date()
{
  date_default_timezone_set('Europe/Oslo');
  $currentHour = date("H");
  $openTime = 8;
  $closeTime = 9;
  $css = 'block';
  if ($currentHour >= $openTime && $currentHour < $closeTime)
  {
      $css = 'block';
  }
  else
  {
      $css = 'none';
  }
  if (date("w") == 0 || date("w") == 6 || $currentHour < $openTime || $currentHour >= $closeTime) {
      $css = 'display:none;';
  }
  else {
      $css = 'display:block;';
  }
  return $css;
}
?>

<div style="display:<?php hide_show_from_date();?>">
Your content here
</div>

Answer 4

You could add it to your header.php below the stylesheets. Looking at the echo section you'll need to change the class used "timeBasedLink" to the class your form ouput.

echo '<style type="text/css">.timeBasedLink {'.$css.'}</style>'; ?>