Show div every 5 minutes javascript

Question

I have a javascript code that is only showing the DIV one time after 5 minutes, but I want that script to execute/show the DIV id "off" again every 5 minutes...

How can I do that?

<div id="off">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>

<script>
var div = document.getElementById('off');
div.style.display = 'none';
setTimeout(function() {
    div.style.display = 'block';
}, 5 * 60000);
</script>

Answer 1

Using setInterval()

setInterval(function() {
    div.style.display = 'block';
}, 5 * 60000);

If at some point you want to stop your interval ticking, you should use it assigned to a function expression like:

var myIntv = setInterval(function() {
    div.style.display = 'block';
}, 5 * 60000);


// (let's say we're inside a button click event)
// clearInterval( myIntv ); // Stop it

jsBin demo

---

Using setTimeout()

function doSomething (){
    div.style.display = 'block';
    setTimeout(doSomething, 5 * 60000); // Recall
}

doSomething(); // Start

jsbin demo

Answer 2

Please remove "I am inside the Div" from the code and it will work for you as you need :

 <div id="off" style="display:none">I am inside the Div <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="test.js"></script> </div> <script> var div = document.getElementById('off'); setInterval(function(){ var style = div.offsetWidth > 0 || div.offsetHeight > 0; if(style){ document.getElementById('off').style.display="none"; }else{ document.getElementById('off').style.display="block"; } }, 300000); </script> 

Answer 3

probably not the most efficient way to approach this but it works. tweak as u see fit.

var myVar = setInterval(myTimer, 1000);
    var oncount=0;
    var offcount=0;
    var bool=true;
    function myTimer() {
      if (bool){
         oncount+=1
         document.getElementById("demo").style.display='block';
         if (oncount==300)
          {
            bool=false;
            oncount=0;
          }
       }

      if (bool==false){
          offcount+=1
          document.getElementById("demo").style.display='none';
          if (offcount==300){
            bool=true;
            offcount=0
          }
       }  
  }

Answer 4

use setInterval can do any time you want .Also used == to make sure none or block.

<script>
var div = document.getElementById('off');
setInterval(function(){
    changingDiv();
},5*6000);

function changingDiv(){
  if(div.style.display == 'none' || div.style.display == ""){
    div.style.display = 'block';
  }
  else{
    div.style.display = 'none';
  }
}
</script>

Answer 5

If I'm understanding you correctly, you want to show an element after 5 minutes and then hide it again after another 5 minutes (if this is not the case then please edit your question to clarify).

What's not clear is whether you just want to do this once or continuously so I've provided both options below, which use different classList . For the purposes of these examples, I have the changes triggering every 3 seconds (3000ms) so you can see it in action; just changes the occurrences of 3000 below to 300000 for 5 minutes.

To execute the sequence just once, nest a timeout within another timeout, removing and then adding .hide class:

 var div=document.querySelector("div"); setTimeout(function(){ div.classList.remove("hide"); setTimeout(function(){ div.classList.add("hide"); },3000);// change to 300000 for 5 minutes },3000);// change to 300000 for 5 minutes 

 div{font-family:sans-serif;} .hide{ display:none; } 

 <div class="hide">Lorem Ipsum ...</div> 

To execute the sequence continuously, use an interval to toggle the .hide class.

 var div=document.querySelector("div"); setInterval(function(){ div.classList.toggle("hide"); },3000);// change to 300000 for 5 minutes 

 div{font-family:sans-serif;} .hide{ display:none; } 

 <div class="hide">Lorem ipsum ...</div>