CODEWITHSUNDEEP
javascripthtml
user5989914
user5989914

Reputation:

Javascript Countdown Timer redirect after End

I have a JavaScript Countdown and I want it to redirect to another site when the countdown ends.

How can I do that?

Code:

(function ( $ ) {

"use strict";

$.fn.countdownTimer = function( options ) {


    // This is the easiest way to have default options.
    var settings = $.extend({
        endTime: new Date()
    }, options );

    var $this = $(this);

    var $seconds = $this.find(".time.seconds");
    var $minutes = $this.find(".time.minutes");
    var $hours = $this.find(".time.hours");
    var $days = $this.find(".time.days");

    var seconds = 0;
    var minutes = 0;
    var days = 0;
    var hours = 0;

    var switchCountdownValue = function ($obj, val) {
        // Add leading zero
        var s = val+"";
        while (s.length < 2) s = "0" + s;

        if(Modernizr.cssanimations) {
            // Fade out previous
            var prev = $obj.find(".value").addClass("fadeOutDown").addClass("animated");

            // Add next value
            var next = $("<div class='value'>" + s + "</div>");
            $obj.prepend(next);
            // Fade in next value
            next.addClass("fadeInDown").addClass("animated");
            // Remove from DOM on animation end
            // Fix for Safari (if window is not active, then webkitAnimationEnd doesn't fire, so delete it on timeout)
            var to = setTimeout(function(){ prev.remove() }, 200);
            prev.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                prev.remove();
                clearTimeout(to);
            });

        } else {
            // Remove previous value
            var prev = $obj.find(".value").remove();
            // Add next value
            var next = $("<div class='value'>" + s + "</div>");
            $obj.prepend(next);
        }
    }

    var timerId = countdown(settings.endTime,
        function(ts) {
            if(seconds != ts.seconds) {
                switchCountdownValue($seconds, ts.seconds);
                seconds = ts.seconds;
            }
            if(minutes != ts.minutes) {
                switchCountdownValue($minutes, ts.minutes);
                minutes = ts.minutes;
            }
            if(hours != ts.hours) {
                switchCountdownValue($hours, ts.hours);
                hours = ts.hours;
            }

            if(days != ts.days) {
                switchCountdownValue($days, ts.days);
                days = ts.days;
            }
        },
        countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);


    return this;

};}( jQuery ));

HTML:

<script type="text/javascript">
$().ready(function(){
    $(".countdown").countdownTimer({
        endTime: new Date("May 13, 2016 20:00:00")
    });


    $("#notifyMe").notifyMe();


    $("#bg-canvas").bezierCanvas({
        maxStyles: 1,
        maxLines: 50,
        lineSpacing: .07,
        spacingVariation: .07,
        colorBase: {r: 120,g: 100,b: 220},
        colorVariation: {r: 50, g: 50, b: 30},
        moveCenterX: 0,
        moveCenterY: 0,
        delayVariation: 3,
        globalAlpha: 0.4,
        globalSpeed:30,
    });



    $().ready(function(){
        $(".overlap .more").click(function(e){
            e.preventDefault();
            $("body,html").animate({scrollTop: $(window).height()});
        });
    });     


});
</script>

C&P Code from internet:

http://pastebin.com/CvYNBSED

The Countdown is working perfectly, but I want a redirect when the Countdown ends.

Edit:

Thanks for helping but my problem is, how can I make the if question or how can I check when the countdown has finished?

I know how to make a redirect but I dont know how to check if the countdown is finished.

Upvotes: 2

Views: 2628

Answers (2)

nonsensei
nonsensei

Reputation: 480

How to redirect to another webpage in JavaScript/jQuery?

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

as long as your countdown is working, as you said.

Edit.

try the check here:

var timerId = countdown(settings.endTime,
    function(ts) {
        if(seconds != ts.seconds) {
            switchCountdownValue($seconds, ts.seconds);
            seconds = ts.seconds;
        }
        if(minutes != ts.minutes) {
            switchCountdownValue($minutes, ts.minutes);
            minutes = ts.minutes;
        }
        if(hours != ts.hours) {
            switchCountdownValue($hours, ts.hours);
            hours = ts.hours;
        }

        if(days != ts.days) {
            switchCountdownValue($days, ts.days);
            days = ts.days;
        }

        // maybe this will work.
        // I didn't check your countdown library because it's minified / uglified
        if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
            //redirect here 
        }
    },
    countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);

Upvotes: 1

timsavery
timsavery

Reputation: 183

How about extending your countdownTimer class to add a onDone function to be executed upon completion of the countdown?

...
var settings = $.extend({
  endTime: new Date(),
  onDone: function () { 
    window.location.href('http://www.google.com') 
  }
}, options );
...

Then have your component execute that method when the countdown finishes:

...
prev.one('webkitAnimationEnd ...', function(){
  if (settings.onDone) {
    settings.onDone();
  }
});
...

Just a thought, but to simply answer the question of redirect, then @nonsensei's should suffice.

Upvotes: 0

Related Questions