CODEWITHSUNDEEP
javascriptjquery
Lucas Abade
Lucas Abade

Reputation: 43

Show div every 5 minutes javascript

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>

Upvotes: 3

Views: 2160

Answers (5)

Shaggy
Shaggy

Reputation: 6796

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>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

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>

Upvotes: 0

Hevon Gordon
Hevon Gordon

Reputation: 32

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
          }
       }  
  }

Upvotes: 0

Mohammed Elhag
Mohammed Elhag

Reputation: 4302

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>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206068

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

Upvotes: 3

Related Questions