python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions