overflowstack9 overflowstack9 - 4 months ago 12
HTML Question

This code is working in snippet but not in blogger

This is my blog i have added the code like below in my blog. The below code is working correctly in snippet like in the example below but it is not working correctly in my blog which i use it in blogger platform should i use any jquery library to make it work. See the snippet below it is working fine in the snippet. my aim is to hide one widget if another widget displays but 2 widget displayed same time in my blog. example fiddle is working fine

<script type="text/javascript">
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.getSeconds() % 20 == 0) //I'd like to show control1 on even minutes
return true;
return false;
}

if (control1VisibleCheck())
document.getElementById('multi-search-groups').style.display = 'none';
else
document.getElementById('multi-search').style.display = 'none';
</script>



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

</select>
</div>

<div id="multi-search-groups">
<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="" />
<optgroup label="NFC EAST">
<option />Dallas Cowboys
<option />New York Giants
<option />Philadelphia Eagles
<option />Washington Redskins
</optgroup>
</select>
</div>

<!--div id="control1" style="width: 200px; height: 100px; background-color: red;">
</div>
<div id="control2" style="width: 200px; height: 100px; background-color: green;">
</div-->


The below code is working fine



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.getSeconds() % 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';
else
document.getElementById('multi-search').style.display = 'none';

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

</select>
</div>

<div id="multi-search-groups">
<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>
</optgroup>
</select>
</div>

<!--div id="control1" style="width: 200px; height: 100px; background-color: red;">
</div>
<div id="control2" style="width: 200px; height: 100px; background-color: green;">
</div-->




Answer

Seems your fiddle doesnt work correctly either, as suggested in the comments execute your JavaScript after the page (document) is ready:

JavaScript document ready function

(function() {
    // your code here
});

full JavaScript:

(function() {
    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';
    else
      document.getElementById('multi-search').style.display = 'none';
});

Working JSFiddle