overflowstack9 overflowstack9 - 1 year ago 55
HTML Question

How to hide or show the widget by setting time

This is my blog and i have implemented 2 widgets which i have included in the below code snippet. My aim is to achieve like the below image. i mean just like blink but not exactly blink but show/hide particular widget for some days like 2 days or for 1 week. I mean the 2 widgets should be replaced by time .


I mean if 1st widget is shown for some time and 2nd widget should be hided and if the 2nd widget is shown the first widget should be hide i mean is there any way to set time for hiding or showing the widget.

<link rel="stylesheet" href="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" />

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>

<div id="multi-search">
<select id="cmbColumn" name="cmbColumn">
<option value="" />Columns
<option value="apple+" />apple
<option value="grapes+" />grapes
<select id="cmbSidebar" name="cmbSidebar">
<option value="" />Sidebars
<option value="mango+" />mango
<option value="berry+" />berry



<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<em>Multiple Select with Groups</em><br>
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>


Answer Source

Finally found an answer to this (together with "overflowstack9"):

The differnet controls are shown using the Date() object for validating show/hide onload. Be sure that this is only an example and read the comments to make sure you understand why we didn't use events or timeouts here:

var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getMinutes() % 2 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
  document.getElementById('multi-search').style.display = 'none';

fiddle: https://jsfiddle.net/uunzq61e/2/