auto refresh div in setTimeout jQuery

Auto Refresh div using setTimeout() jQuery

Hello Everyone, I am going to share the how to auto refresh a particular div using jQuery. 

In jQuery, we are using setTimeout() function for auto refresh a div without reloading your page each and every 5 seconds. 

Click for live demo

The HTML code sample as given below.
1
2
3
4
5
6
7
8
//The HTML code sample
 <div>
    <input type="button" id="btnShow" value="Click for Show div" />
  </div>
  <div class="fonts" id="divShow">
    <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
  </div>
//The HTML code sample 
 <div>
    <input type="button" id="btnShow" value="Click for Show div" />
  </div>

  <div class="fonts" id="divShow">
    <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
  </div>
The jQuery code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
//The jQuery code sample
    $(function() {
      //This setTimeout function execute or call automatically when 5 second completed.
      setTimeout(function() {
        $("#divShow").fadeOut(1500);
      }, 5000);
      $('#btnShow').click(function() {
        //This is used for show the div.
        $('#divShow').show();
        //This setTimeout function execute when click on show div buton and hide automatically.
        setTimeout(function() {
          $("#divShow").fadeOut(1500);
        }, 5000);
      });
    });
//The jQuery code sample 

    $(function() {

      //This setTimeout function execute or call automatically when 5 second completed.
      setTimeout(function() {
        $("#divShow").fadeOut(1500);
      }, 5000);

      $('#btnShow').click(function() {
        //This is used for show the div.
        $('#divShow').show();

        //This setTimeout function execute when click on show div buton and hide automatically.
        setTimeout(function() {
          $("#divShow").fadeOut(1500);
        }, 5000);

      });
    });
The live full code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//The full live code sample
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <style>
    .fonts {
      border: 2px solid green;
      color: green;
    }
  </style>
  <script type="text/javascript">
    $(function() {
      //This setTimeout function execute or call automatically when 5 second completed.
      setTimeout(function() {
        $("#divShow").fadeOut(1500);
      }, 5000);
      $('#btnShow').click(function() {
        //This is used for show the div.
        $('#divShow').show();
        //This setTimeout function execute when click on show div buton and hide automatically.
        setTimeout(function() {
          $("#divShow").fadeOut(1500);
        }, 5000);
      });
    });
  </script>
</head>
<body>
  <div>
    <input type="button" id="btnShow" value="Click for Show div" />
  </div>
  <div class="fonts" id="divShow">
    <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
  </div>
</body>
</html>
//The full live code sample 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <style>
    .fonts {
      border: 2px solid green;
      color: green;
    }
  </style>
  <script type="text/javascript">
    $(function() {

      //This setTimeout function execute or call automatically when 5 second completed.
      setTimeout(function() {
        $("#divShow").fadeOut(1500);
      }, 5000);

      $('#btnShow').click(function() {
        //This is used for show the div.
        $('#divShow').show();

        //This setTimeout function execute when click on show div buton and hide automatically.
        setTimeout(function() {
          $("#divShow").fadeOut(1500);
        }, 5000);

      });
    });
  </script>
</head>

<body>
  <div>
    <input type="button" id="btnShow" value="Click for Show div" />
  </div>

  <div class="fonts" id="divShow">
    <h2>Hi, Welcome you to code-sample.com.</h2> It will disappear in 5 seconds!
  </div>
</body>

</html>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book