Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


how can i make a jquery countdown


how can i make a jquery countdown  using -'jquery'

asked Sep 24, 2015 by sandeep bhadauria
0 votes
9 views



Related Hot Questions



Government Jobs Opening

HTML Part:

Page Will Redirect with in 10 seconds

Demo Link: http://demos.coolajax.net/php/redirect

I hope this code will be a helpful one for you.

answered Sep 24, 2015 by nikhilapatil
0 votes

Are you sure, you want to use Javascript for this? You might just go with plain HTML:


Put this in the header and the forward will even work on browsers without Javascript enabled.

answered Sep 24, 2015 by sachin wagh
0 votes

Here's my example based off of Jonathan Sampson's example. Here's the jsfiddle link. http://jsfiddle.net/njELV/1/

jQuery:

var countdown = {
    startInterval : function() {
        var count = 1800; // 30 minute timeout
        var currentId = setInterval(function(){
            $('#currentSeconds').html(count);
            if(count == 30) { // when there's thirty seconds...
                $('#expireDiv').slideDown().click(function() {
                        clearInterval(countdown.intervalId);
                        $('#expireDiv').slideUp();                      
                        window.location.reload();
                        //or whatever you'd like to do when someone clicks on the div (refresh your session etc).
                });
            }
            if (count == 0) {
                window.location.href = '/logout.php';
            }
            --count;
        }, 1000);
        countdown.intervalId = currentId;
    }
};
countdown.startInterval();

/*
Then each time an ajax call is made to fetch a page
*/
if(typeof countdown.oldIntervalId != 'undefined') {
        countdown.oldIntervalId = countdown.intervalId;
        clearInterval(countdown.oldIntervalId);
        countdown.startInterval();
        $('#expireDiv').slideUp();
    } else {
        countdown.oldIntervalId = 0;
    }

CSS:

#expireDiv {
    width: 100%;
    text-align: center;
    background-color: #63AFD0;
    padding: 10px;
    margin: 0;
    border: 1px solid #024A68;
    color: #024A68;
    font-weight: bold;
    font-size: 125%;
    box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    display:none;
    cursor: pointer;
}

HTML:

Your session is about to expire. You will be logged out in seconds. If you want to continue, please save your work and click here to refresh the page.
answered Sep 24, 2015 by ashish singh
0 votes

You can use the jQuery animate function

// Enter num from and to
$({countNum: 8000}).animate({countNum: 0}, {
  duration: 8000,
  easing:'linear',
  step: function() {
    // What todo on every count
    console.log(Math.floor(this.countNum));
  },
  complete: function() {
    console.log('finished');
  }
});

http://jsbin.com/upazas/1/edit

answered Sep 24, 2015 by sachin valanju
0 votes

In Himel Khan's code example posted above, I changed

if(updateTime == 0)

to

if(updateTime <= 0)

just in case somebody hits the back button after being redirected. Otherwise it will start into negative numbers and never re-redirect.

It is important to note that you should not have the code linked on the target page with this change or it will loop refresh. If you make this change, only include the script on the page with the countdown.

I assume there is a better way to accomplish this fix so maybe somebody else could add a better solution

Thank you for the code.

answered Sep 24, 2015 by jekbishnoi

...