How can I display a DIV message every time "X" minutes have passed?

Question

How can I display a DIV message every time "X" minutes have passed?

View my example on JSFiddle for a visual demonstration. My goal is to have a message appear in the top left corner every 5 minutes, flicker a few times, and then fade away gradually. I'm not very skilled in CSS and was thinking it may require some JavaScript as well. The message should be enclosed in a rounded-corner box. Below you'll find my CSS code.

Thank you in advance!

HTML:

  <div id="container">
    <div id="map_size" class="map_size">   
      <div id="msg">
        New records available.          
      </div>    
    </div>
  </div>

CSS:

/*body*/
body{
  margin:0px auto;
  width:80%;
  height:80%;
  font-family: Verdana,Geneva,sans-serif;
}

/*container for all divs inside*/
#container {
  width:1450px;   
}

/*map size*/
#map_size{
  width:1190px;
  height:1300px;
  background:#0099FF;
  border-style: solid;
  border-color: black;
  position: relative;
  float:left;
}

/*msg*/
.station_info_ {
  z-index: 100;
  position: absolute;
  background-color:white;
  border-radius: 5px;
  height: 200px;
  margin-left: 50px;
  width:  275px;
  border:4px solid black;
}

JS: I want the message to be hidden when the page loads, and only show every 5 minutes after that. How can this be achieved?

<script type="text/javascript">
     $('document').ready(function(){
      window.setInerval('test()',3000);
     });

    function test(){
     $('#msg').toggle();
    } 
 </script>

javascript jquery html css

Answer 1

Answer №1

To achieve this, you can use the setInterval() method after the completion of setTimeout().

Here is a sample of working code:

(I have set the timing to 3 seconds for quick testing, but you can adjust it to any desired time interval.)

$('document').ready(function(){
    
    $('#msg').hide();
    
    window.setTimeout(
        function(){
            $('#msg').show();
            setInterval(function(){ $('#msg').toggle(); }, 3000);
        }        
        ,3000);
});

body{
    margin:0px auto;
    width:80%;
    height:80%;
    font-family: Verdana,Geneva,sans-serif;
}

/*container for all divs inside*/
#container {
    width:1450px;   
}

/*map size*/
#map_size{
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
    float:left;
}

/*msg*/
.station_info_ {
    z-index: 100;
    position: absolute;
    background-color:white;
    border-radius: 5px;
    height: 200px;
    margin-left: 50px;
    width:  275px;
    border:4px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="map_size" class="map_size">   
        <div id="msg">
            new records available.          
        </div>    
    </div>
</div>

Check out the demo on jsFiddle

Answer 2

To achieve this, you can use the setInterval() method after the completion of setTimeout().

Here is a sample of working code:

(I have set the timing to 3 seconds for quick testing, but you can adjust it to any desired time interval.)

$('document').ready(function(){
    
    $('#msg').hide();
    
    window.setTimeout(
        function(){
            $('#msg').show();
            setInterval(function(){ $('#msg').toggle(); }, 3000);
        }        
        ,3000);
});

body{
    margin:0px auto;
    width:80%;
    height:80%;
    font-family: Verdana,Geneva,sans-serif;
}

/*container for all divs inside*/
#container {
    width:1450px;   
}

/*map size*/
#map_size{
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
    float:left;
}

/*msg*/
.station_info_ {
    z-index: 100;
    position: absolute;
    background-color:white;
    border-radius: 5px;
    height: 200px;
    margin-left: 50px;
    width:  275px;
    border:4px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="map_size" class="map_size">   
        <div id="msg">
            new records available.          
        </div>    
    </div>
</div>

Check out the demo on jsFiddle

Answer 3

Answer №2

To implement a countdown timer in JavaScript, you can use the

setInterval(function(){ alert("After 3000 milliseconds"); }, 3000);

For more information about the setInterval method, check out this resource from MDN:

The setInterval() function is used to call a specified function or execute a code snippet at fixed time intervals. It returns an intervalID.

Additional Notes:

Create a custom popup window (e.g., "Search Google") and show a message within it.
After displaying the message, you can use the .hide() method to hide the popup window.

Note that with JavaScript, you cannot programmatically close an alert box until the user interacts with it.

Answer 4

To implement a countdown timer in JavaScript, you can use the

setInterval(function(){ alert("After 3000 milliseconds"); }, 3000);

For more information about the setInterval method, check out this resource from MDN:

The setInterval() function is used to call a specified function or execute a code snippet at fixed time intervals. It returns an intervalID.

Additional Notes:

Create a custom popup window (e.g., "Search Google") and show a message within it.
After displaying the message, you can use the .hide() method to hide the popup window.

Note that with JavaScript, you cannot programmatically close an alert box until the user interacts with it.

Answer 5

Answer №3

If you're looking to incorporate some fun animations, consider using animate.css as shown in the demo below. While jQuery animations can also be used, animate.css is simpler and offers a wide variety of animation styles to experiment with.

All you need to do is switch out the animation names to customize your effects.

For a list of available animation styles, visit the animate.css website.

Hari Krishnan's tip mentioned here works like a charm (it's utilized in the demo).

The line

$msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation);

may seem complex. It essentially displays the div and applies the CSS class stored in inAnimation. As the flag turns false in the next loop, the CSS class from outAnimation is triggered. The removeClass() ensures that no extra styles interfere with the animation CSS. (There isn't a hide() function since the CSS fadeOut feature automatically hides the element).

You can run the demo on this jsFiddle link.

$('document').ready(function () {
    var $msg = $('#msg');
    var displayTime = 0.1; // in minutes 0.1 = 6 seconds / 1 = 1 min.
    var flag = true;
    
    $msg.hide();

    setInterval(

    function () {
        var inAnimation = 'fadeIn animated';
        var outAnimation = 'fadeOut animated';
        //console.log(flag);
        $msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation);
        flag ^= true;
    }, displayTime * 1000 * 60);
});

body {
    margin:0px auto;
    width:80%;
    height:80%;
    font-family: Verdana, Geneva, sans-serif;
}
/*container for all divs inside*/
 #container {
    width:1450px;
}
/*map size*/
 #map_size {
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
    float:left;
}
/*msg*/
 .station_info_ {
    z-index: 100;
    position: absolute;
    background-color:white;
    border-radius: 5px;
    height: 200px;
    margin-left: 50px;
    width: 275px;
    border:4px solid black;
}

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="map_size" class="map_size">
        <div id="msg">new records available.</div>
    </div>
</div>

Answer 6

If you're looking to incorporate some fun animations, consider using animate.css as shown in the demo below. While jQuery animations can also be used, animate.css is simpler and offers a wide variety of animation styles to experiment with.

All you need to do is switch out the animation names to customize your effects.

For a list of available animation styles, visit the animate.css website.

Hari Krishnan's tip mentioned here works like a charm (it's utilized in the demo).

The line

$msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation);

may seem complex. It essentially displays the div and applies the CSS class stored in inAnimation. As the flag turns false in the next loop, the CSS class from outAnimation is triggered. The removeClass() ensures that no extra styles interfere with the animation CSS. (There isn't a hide() function since the CSS fadeOut feature automatically hides the element).

You can run the demo on this jsFiddle link.

$('document').ready(function () {
    var $msg = $('#msg');
    var displayTime = 0.1; // in minutes 0.1 = 6 seconds / 1 = 1 min.
    var flag = true;
    
    $msg.hide();

    setInterval(

    function () {
        var inAnimation = 'fadeIn animated';
        var outAnimation = 'fadeOut animated';
        //console.log(flag);
        $msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation);
        flag ^= true;
    }, displayTime * 1000 * 60);
});

body {
    margin:0px auto;
    width:80%;
    height:80%;
    font-family: Verdana, Geneva, sans-serif;
}
/*container for all divs inside*/
 #container {
    width:1450px;
}
/*map size*/
 #map_size {
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
    float:left;
}
/*msg*/
 .station_info_ {
    z-index: 100;
    position: absolute;
    background-color:white;
    border-radius: 5px;
    height: 200px;
    margin-left: 50px;
    width: 275px;
    border:4px solid black;
}

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="map_size" class="map_size">
        <div id="msg">new records available.</div>
    </div>
</div>

How can I display a DIV message every time "X" minutes have passed?

Answer №1

Answer №2

Answer №3

Similar questions

Send a file using ajax with the help of JavaScript and PHP

What are the steps to showcase StreetViewPanorama within a React application?

How can I modify the ngx-datatable pager component to display text instead of icons and include a totalVisible property?

What is the proper method for utilizing $http and $q in an Angular service?

The token endpoint in Nuxtjs auth module's configuration for auth strategies is not being triggered

Is it possible to update only the necessary data using the Update Controller?

How can I place a new ThreeJS child element at the front and center of a scene?

What steps should I take to ensure my Bootstrap CSS3 code is error-free and W3C validated?

Stacked text appearance in pseudo CSS/HTML5 styling

Display subcomponents from an array when the state is updated

JavaScript Function for Dropdown Select Box

The default file type for a new file in Sublime Text 2

Automatically bookmark webpages using JavaScript in your browser

Encountering an issue with the node.js express server when fetching data

executing tasks on a sql database with php

Unlocking the Power of Django: Transforming Your Created Topics into Publicly Accessible Content in the Learning Log Project

Animating path "d" with ReactJS and SVG upon clicking in FireFox

How can I utilize jQuery to create a remove button that deletes individual div elements one at a time?

Displaying various results using a range slider

Is there a more concise method to locate an object key within an array of objects?