So I have this code to hide certain div's, and I want to add to the html code the seconds that the div is closing in, ex: 5,4,3,2,1, (closed);

Here is the code:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                cvr.hide();
                dlg.hide();
            }, 5000);
        }
    });
</script>

Any sugestions?

So I have this code to hide certain div's, and I want to add to the html code the seconds that the div is closing in, ex: 5,4,3,2,1, (closed);

Here is the code:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                cvr.hide();
                dlg.hide();
            }, 5000);
        }
    });
</script>

Any sugestions?

• javascript
• jquery

Share Improve this question Follow asked Sep 9, 2013 at 14:06 NikatoNikato 10911 silver badge1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

A solution :

 jQuery(document).ready(function () {
    var cvr = $("#cover");
    var dlg = $("#dialog");
    var t = 5;
    isVisibleCvr = cvr.is(":visible");
    isVisibleDlg = dlg.is(":visible");
    if(isVisibleCvr && isVisibleDlg == true){
        (function countDown(){
            if (t--) {
               $('#t').text(t + ' s');
               setTimeout(countDown, 1000);
            } else {
               $('#t').text('gone!');
               cvr.add(dlg).hide();
            }
        })();
    }
});

I think the code is self explaining. If not, ask for clarification.

Demonstration

You can use the setInterval function, use the following script: (demo)

<script type="text/javascript">
 jQuery(document).ready(function () {

  var counter = 5;
  var interval = setInterval(function() {
      counter--;
      jQuery("#number").html(counter);
      if (counter == 0) {
        //Do something
        jQuery("#number").html("Countdown ended!");
        // Stop the counter
        clearInterval(interval);
      }
  }, 1000);

 });
 </script>

and the following div:

<div id="number">5</div>

Check out the live demo on jsFiddle: http://jsfiddle/RtFKr/

Assuming your javascript code is working you can use this:

    <script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var countdown = 5;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                if(--countdown == 0)
                {
                    cvr.hide();
                    dlg.hide();
                }
                else
                {
                    // set text in div
                }
            }, 1000);
        }
    });
</script>

Every second countdown is lowered and on 0 your divs are hidden.