Countdown timer

:sweat_smile: If you can explain how I can style it I with different background color, font e.t.c. I will send you a present all the way from Sweden!

It’s all regular ole CSS, so you can apply a CSS style to that entire document, or the digits, which would be: .flip-clock-wrapper

(No present needed :slight_smile:

Just because I promised to deliver something done natively in Hype. Not as far fetched as your Solution Daniel. But if someone searches this thread maybe it will be useful to them. Uses a reusabel symbol and could be tweaked to work with (m)any number or char.

MechanicalLetterSymbol.hype.zip (19,5 KB)

3 Likes

How could I not think of inspecting and adding :man_facepalming:

I am not a coder and as always you guys have the best support of any company I encountered in 16 years as a Graphic Designer. To take the time to make a video showing me what to do is just… I can’t thank you enough.

MaxZieb nicely done mate! I will save that document for future projects for sure.

Have a great night and thanks again guys!

1 Like

You can change the css in Hype, here is the full CSS, and much readable:

<style>
.flip-clock-wrapper * {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden
}
.flip-clock-wrapper a {
	cursor:pointer;
	text-decoration:none;
	color:#ccc
}
.flip-clock-wrapper a:hover {
	color:#fff
}
.flip-clock-wrapper ul {
	list-style:none
}
.flip-clock-wrapper.clearfix:before,.flip-clock-wrapper.clearfix:after {
	content:" ";
	display:table
}
.flip-clock-wrapper.clearfix:after {
	clear:both
}
.flip-clock-wrapper.clearfix {
	*zoom:1
}
.flip-clock-wrapper {
	font:normal 11px "Helvetica Neue",Helvetica,sans-serif;
	-webkit-user-select:none
}
.flip-clock-meridium {
	background:none !important;
	box-shadow:0 0 0 !important;
	font-size:36px !important
}
.flip-clock-meridium a {
	color:#313333
}
.flip-clock-wrapper {
	text-align:center;
	position:relative;
	width:100%;
	margin:1em
}
.flip-clock-wrapper:before,.flip-clock-wrapper:after {
	content:" ";
	display:table
}
.flip-clock-wrapper:after {
	clear:both
}
.flip-clock-wrapper ul {
	position:relative;
	float:left;
	margin:5px;
	width:60px;
	height:90px;
	font-size:80px;
	font-weight:bold;
	line-height:87px;
	border-radius:6px;
	background:#000
}
.flip-clock-wrapper ul li {
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	line-height:87px;
	text-decoration:none !important
}
.flip-clock-wrapper ul li:first-child {
	z-index:2
}
.flip-clock-wrapper ul li a {
	display:block;
	height:100%;
	-webkit-perspective:200px;
	-moz-perspective:200px;
	perspective:200px;
	margin:0 !important;
	overflow:visible !important;
	cursor:default !important
}
.flip-clock-wrapper ul li a div {
	z-index:1;
	position:absolute;
	left:0;
	width:100%;
	height:50%;
	font-size:80px;
	overflow:hidden;
	outline:1px solid transparent
}
.flip-clock-wrapper ul li a div .shadow {
	position:absolute;
	width:100%;
	height:100%;
	z-index:2
}
.flip-clock-wrapper ul li a div.up {
	-webkit-transform-origin:50% 100%;
	-moz-transform-origin:50% 100%;
	-ms-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
	transform-origin:50% 100%;
	top:0
}
.flip-clock-wrapper ul li a div.up:after {
	content:"";
	position:absolute;
	top:44px;
	left:0;
	z-index:5;
	width:100%;
	height:3px;
	background-color:#000;
	background-color:rgba(0,0,0,0.4)
}
.flip-clock-wrapper ul li a div.down {
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	-ms-transform-origin:50% 0;
	-o-transform-origin:50% 0;
	transform-origin:50% 0;
	bottom:0;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px
}
.flip-clock-wrapper ul li a div div.inn {
	position:absolute;
	left:0;
	z-index:1;
	width:100%;
	height:200%;
	color:#ccc;
	text-shadow:0 1px 2px #000;
	text-align:center;
	background-color:#333;
	border-radius:6px;
	font-size:70px
}
.flip-clock-wrapper ul li a div.up div.inn {
	top:0
}
.flip-clock-wrapper ul li a div.down div.inn {
	bottom:0
}
.flip-clock-wrapper ul.play li.flip-clock-before {
	z-index:3
}
.flip-clock-wrapper .flip {
	box-shadow:0 2px 5px rgba(0,0,0,0.7)
}
.flip-clock-wrapper ul.play li.flip-clock-active {
	-webkit-animation:asd .5s .5s linear both;
	-moz-animation:asd .5s .5s linear both;
	animation:asd .5s .5s linear both;
	z-index:5
}
.flip-clock-divider {
	float:left;
	display:inline-block;
	position:relative;
	width:20px;
	height:100px
}
.flip-clock-divider:first-child {
	width:0
}
.flip-clock-dot {
	display:block;
	background:#323434;
	width:10px;
	height:10px;
	position:absolute;
	border-radius:50%;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
	left:5px
}
.flip-clock-divider .flip-clock-label {
	position:absolute;
	top:-1.5em;
	right:-86px;
	color:black;
	text-shadow:none
}
.flip-clock-divider.minutes .flip-clock-label {
	right:-88px
}
.flip-clock-divider.seconds .flip-clock-label {
	right:-91px
}
.flip-clock-dot.top {
	top:30px
}
.flip-clock-dot.bottom {
	bottom:30px
}
@-webkit-keyframes asd {
	0{z-index:2
}
20% {
	z-index:4
}
100% {
	z-index:4
}
}@-moz-keyframes asd {
	0{z-index:2
}
20% {
	z-index:4
}
100% {
	z-index:4
}
}@-o-keyframes asd {
	0{z-index:2
}
20% {
	z-index:4
}
100% {
	z-index:4
}
}@keyframes asd {
	0{z-index:2
}
20% {
	z-index:4
}
100% {
	z-index:4
}
}.flip-clock-wrapper ul.play li.flip-clock-active .down {
	z-index:2;
	-webkit-animation:turn .5s .5s linear both;
	-moz-animation:turn .5s .5s linear both;
	animation:turn .5s .5s linear both
}
@-webkit-keyframes turn {
	0{-webkit-transform:rotateX(90deg)
}
100% {
	-webkit-transform:rotateX(0)
}
}@-moz-keyframes turn {
	0{-moz-transform:rotateX(90deg)
}
100% {
	-moz-transform:rotateX(0)
}
}@-o-keyframes turn {
	0{-o-transform:rotateX(90deg)
}
100% {
	-o-transform:rotateX(0)
}
}@keyframes turn {
	0{transform:rotateX(90deg)
}
100% {
	transform:rotateX(0)
}
}.flip-clock-wrapper ul.play li.flip-clock-before .up {
	z-index:2;
	-webkit-animation:turn2 .5s linear both;
	-moz-animation:turn2 .5s linear both;
	animation:turn2 .5s linear both
}
@-webkit-keyframes turn2 {
	0{-webkit-transform:rotateX(0)
}
100% {
	-webkit-transform:rotateX(-90deg)
}
}@-moz-keyframes turn2 {
	0{-moz-transform:rotateX(0)
}
100% {
	-moz-transform:rotateX(-90deg)
}
}@-o-keyframes turn2 {
	0{-o-transform:rotateX(0)
}
100% {
	-o-transform:rotateX(-90deg)
}
}@keyframes turn2 {
	0{transform:rotateX(0)
}
100% {
	transform:rotateX(-90deg)
}
}.flip-clock-wrapper ul li.flip-clock-active {
	z-index:3
}
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
	background:-moz-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0.1)),color-stop(100%,black));
	background:linear,top,rgba(0,0,0,0.1) 0,black 100%;
	background:-o-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:-ms-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:linear,to bottom,rgba(0,0,0,0.1) 0,black 100%;
	-webkit-animation:show .5s linear both;
	-moz-animation:show .5s linear both;
	animation:show .5s linear both
}
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
	background:-moz-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0.1)),color-stop(100%,black));
	background:linear,top,rgba(0,0,0,0.1) 0,black 100%;
	background:-o-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:-ms-linear-gradient(top,rgba(0,0,0,0.1) 0,black 100%);
	background:linear,to bottom,rgba(0,0,0,0.1) 0,black 100%;
	-webkit-animation:hide .5s .3s linear both;
	-moz-animation:hide .5s .3s linear both;
	animation:hide .5s .3s linear both
}
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
	background:-moz-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,black),color-stop(100%,rgba(0,0,0,0.1)));
	background:linear,top,black 0,rgba(0,0,0,0.1) 100%;
	background:-o-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:-ms-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:linear,to bottom,black 0,rgba(0,0,0,0.1) 100%;
	-webkit-animation:show .5s linear both;
	-moz-animation:show .5s linear both;
	animation:show .5s linear both
}
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
	background:-moz-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,black),color-stop(100%,rgba(0,0,0,0.1)));
	background:linear,top,black 0,rgba(0,0,0,0.1) 100%;
	background:-o-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:-ms-linear-gradient(top,black 0,rgba(0,0,0,0.1) 100%);
	background:linear,to bottom,black 0,rgba(0,0,0,0.1) 100%;
	-webkit-animation:hide .5s .3s linear both;
	-moz-animation:hide .5s .3s linear both;
	animation:hide .5s .2s linear both
}
@-webkit-keyframes show {
	0{opacity:0
}
100% {
	opacity:1
}
}@-moz-keyframes show {
	0{opacity:0
}
100% {
	opacity:1
}
}@-o-keyframes show {
	0{opacity:0
}
100% {
	opacity:1
}
}@keyframes show {
	0{opacity:0
}
100% {
	opacity:1
}
}@-webkit-keyframes hide {
	0{opacity:1
}
100% {
	opacity:0
}
}@-moz-keyframes hide {
	0{opacity:1
}
100% {
	opacity:0
}
}@-o-keyframes hide {
	0{opacity:1
}
100% {
	opacity:0
}
}@keyframes hide {
	0{opacity:1
}
100% {
	opacity:0
}
}
</style>

Already put it into Hype as the screenshot:

but when I try to remove the referenced flipclock.min.js and jquery.min.js, and load them locally , it will not work:

1574306605756

Maybe someone could help here.

This is attached document.countdown.hype.zip (50.7 KB)

1 Like

Thank you!!

Hey Alex

I just noticed the clock is going twice the speed. It counts down 2 seconds instead of 1 and so on. Any idea of how to fix this?

Best,
Rasmus

Hey Daniel!

I will send you the same message I sent to Alex.

I just noticed the clock is going twice the speed. It counts down 2 seconds instead of 1 and so on. Any idea of how to fix this?

https://bit.ly/2XzjfE6

Best,
Rasmus

Hello,

Here is the full javascript content of flipclock.js, but I am not coding background, and maybe someone else will help you.

/*! flipclock 2014-12-12 */
var Base = function() {};
Base.extend = function(a, b) {
    "use strict";
    var c = Base.prototype.extend;
    Base._prototyping = !0;
    var d = new this;
    c.call(d, a), d.base = function() {}, delete Base._prototyping;
    var e = d.constructor,
        f = d.constructor = function() {
            if (!Base._prototyping)
                if (this._constructing || this.constructor == f) this._constructing = !0, e.apply(this, arguments), delete this._constructing;
                else if (null !== arguments[0]) return (arguments[0].extend || c).call(arguments[0], d)
        };
    return f.ancestor = this, f.extend = this.extend, f.forEach = this.forEach, f.implement = this.implement, f.prototype = d, f.toString = this.toString, f.valueOf = function(a) {
        return "object" == a ? f : e.valueOf()
    }, c.call(f, b), "function" == typeof f.init && f.init(), f
}, Base.prototype = {
    extend: function(a, b) {
        if (arguments.length > 1) {
            var c = this[a];
            if (c && "function" == typeof b && (!c.valueOf || c.valueOf() != b.valueOf()) && /\bbase\b/.test(b)) {
                var d = b.valueOf();
                b = function() {
                    var a = this.base || Base.prototype.base;
                    this.base = c;
                    var b = d.apply(this, arguments);
                    return this.base = a, b
                }, b.valueOf = function(a) {
                    return "object" == a ? b : d
                }, b.toString = Base.toString
            }
            this[a] = b
        } else if (a) {
            var e = Base.prototype.extend;
            Base._prototyping || "function" == typeof this || (e = this.extend || e);
            for (var f = {
                    toSource: null
                }, g = ["constructor", "toString", "valueOf"], h = Base._prototyping ? 0 : 1; i = g[h++];) a[i] != f[i] && e.call(this, i, a[i]);
            for (var i in a) f[i] || e.call(this, i, a[i])
        }
        return this
    }
}, Base = Base.extend({
    constructor: function() {
        this.extend(arguments[0])
    }
}, {
    ancestor: Object,
    version: "1.1",
    forEach: function(a, b, c) {
        for (var d in a) void 0 === this.prototype[d] && b.call(c, a[d], d, a)
    },
    implement: function() {
        for (var a = 0; a < arguments.length; a++) "function" == typeof arguments[a] ? arguments[a](this.prototype) : this.prototype.extend(arguments[a]);
        return this
    },
    toString: function() {
        return String(this.valueOf())
    }
});
var FlipClock;
! function(a) {
    "use strict";
    FlipClock = function(a, b, c) {
        return b instanceof Object && b instanceof Date == !1 && (c = b, b = 0), new FlipClock.Factory(a, b, c)
    }, FlipClock.Lang = {}, FlipClock.Base = Base.extend({
        buildDate: "2014-12-12",
        version: "0.7.7",
        constructor: function(b, c) {
            "object" != typeof b && (b = {}), "object" != typeof c && (c = {}), this.setOptions(a.extend(!0, {}, b, c))
        },
        callback: function(a) {
            if ("function" == typeof a) {
                for (var b = [], c = 1; c <= arguments.length; c++) arguments[c] && b.push(arguments[c]);
                a.apply(this, b)
            }
        },
        log: function(a) {
            window.console && console.log && console.log(a)
        },
        getOption: function(a) {
            return this[a] ? this[a] : !1
        },
        getOptions: function() {
            return this
        },
        setOption: function(a, b) {
            this[a] = b
        },
        setOptions: function(a) {
            for (var b in a) "undefined" != typeof a[b] && this.setOption(b, a[b])
        }
    })
}(jQuery),
function(a) {
    "use strict";
    FlipClock.Face = FlipClock.Base.extend({
        autoStart: !0,
        dividers: [],
        factory: !1,
        lists: [],
        constructor: function(a, b) {
            this.dividers = [], this.lists = [], this.base(b), this.factory = a
        },
        build: function() {
            this.autoStart && this.start()
        },
        createDivider: function(b, c, d) {
            "boolean" != typeof c && c || (d = c, c = b);
            var e = ['<span class="' + this.factory.classes.dot + ' top"></span>', '<span class="' + this.factory.classes.dot + ' bottom"></span>'].join("");
            d && (e = ""), b = this.factory.localize(b);
            var f = ['<span class="' + this.factory.classes.divider + " " + (c ? c : "").toLowerCase() + '">', '<span class="' + this.factory.classes.label + '">' + (b ? b : "") + "</span>", e, "</span>"],
                g = a(f.join(""));
            return this.dividers.push(g), g
        },
        createList: function(a, b) {
            "object" == typeof a && (b = a, a = 0);
            var c = new FlipClock.List(this.factory, a, b);
            return this.lists.push(c), c
        },
        reset: function() {
            this.factory.time = new FlipClock.Time(this.factory, this.factory.original ? Math.round(this.factory.original) : 0, {
                minimumDigits: this.factory.minimumDigits
            }), this.flip(this.factory.original, !1)
        },
        appendDigitToClock: function(a) {
            a.$el.append(!1)
        },
        addDigit: function(a) {
            var b = this.createList(a, {
                classes: {
                    active: this.factory.classes.active,
                    before: this.factory.classes.before,
                    flip: this.factory.classes.flip
                }
            });
            this.appendDigitToClock(b)
        },
        start: function() {},
        stop: function() {},
        autoIncrement: function() {
            this.factory.countdown ? this.decrement() : this.increment()
        },
        increment: function() {
            this.factory.time.addSecond()
        },
        decrement: function() {
            0 == this.factory.time.getTimeSeconds() ? this.factory.stop() : this.factory.time.subSecond()
        },
        flip: function(b, c) {
            var d = this;
            a.each(b, function(a, b) {
                var e = d.lists[a];
                e ? (c || b == e.digit || e.play(), e.select(b)) : d.addDigit(b)
            })
        }
    })
}(jQuery),
function(a) {
    "use strict";
    FlipClock.Factory = FlipClock.Base.extend({
        animationRate: 1e3,
        autoStart: !0,
        callbacks: {
            destroy: !1,
            create: !1,
            init: !1,
            interval: !1,
            start: !1,
            stop: !1,
            reset: !1
        },
        classes: {
            active: "flip-clock-active",
            before: "flip-clock-before",
            divider: "flip-clock-divider",
            dot: "flip-clock-dot",
            label: "flip-clock-label",
            flip: "flip",
            play: "play",
            wrapper: "flip-clock-wrapper"
        },
        clockFace: "HourlyCounter",
        countdown: !1,
        defaultClockFace: "HourlyCounter",
        defaultLanguage: "english",
        $el: !1,
        face: !0,
        lang: !1,
        language: "english",
        minimumDigits: 0,
        original: !1,
        running: !1,
        time: !1,
        timer: !1,
        $wrapper: !1,
        constructor: function(b, c, d) {
            d || (d = {}), this.lists = [], this.running = !1, this.base(d), this.$el = a(b).addClass(this.classes.wrapper), this.$wrapper = this.$el, this.original = c instanceof Date ? c : c ? Math.round(c) : 0, this.time = new FlipClock.Time(this, this.original, {
                minimumDigits: this.minimumDigits,
                animationRate: this.animationRate
            }), this.timer = new FlipClock.Timer(this, d), this.loadLanguage(this.language), this.loadClockFace(this.clockFace, d), this.autoStart && this.start()
        },
        loadClockFace: function(a, b) {
            var c, d = "Face",
                e = !1;
            return a = a.ucfirst() + d, this.face.stop && (this.stop(), e = !0), this.$el.html(""), this.time.minimumDigits = this.minimumDigits, c = FlipClock[a] ? new FlipClock[a](this, b) : new FlipClock[this.defaultClockFace + d](this, b), c.build(), this.face = c, e && this.start(), this.face
        },
        loadLanguage: function(a) {
            var b;
            return b = FlipClock.Lang[a.ucfirst()] ? FlipClock.Lang[a.ucfirst()] : FlipClock.Lang[a] ? FlipClock.Lang[a] : FlipClock.Lang[this.defaultLanguage], this.lang = b
        },
        localize: function(a, b) {
            var c = this.lang;
            if (!a) return null;
            var d = a.toLowerCase();
            return "object" == typeof b && (c = b), c && c[d] ? c[d] : a
        },
        start: function(a) {
            var b = this;
            b.running || b.countdown && !(b.countdown && b.time.time > 0) ? b.log("Trying to start timer when countdown already at 0") : (b.face.start(b.time), b.timer.start(function() {
                b.flip(), "function" == typeof a && a()
            }))
        },
        stop: function(a) {
            this.face.stop(), this.timer.stop(a);
            for (var b in this.lists) this.lists.hasOwnProperty(b) && this.lists[b].stop()
        },
        reset: function(a) {
            this.timer.reset(a), this.face.reset()
        },
        setTime: function(a) {
            this.time.time = a, this.flip(!0)
        },
        getTime: function() {
            return this.time
        },
        setCountdown: function(a) {
            var b = this.running;
            this.countdown = a ? !0 : !1, b && (this.stop(), this.start())
        },
        flip: function(a) {
            this.face.flip(!1, a)
        }
    })
}(jQuery),
function(a) {
    "use strict";
    FlipClock.List = FlipClock.Base.extend({
        digit: 0,
        classes: {
            active: "flip-clock-active",
            before: "flip-clock-before",
            flip: "flip"
        },
        factory: !1,
        $el: !1,
        $obj: !1,
        items: [],
        lastDigit: 0,
        constructor: function(a, b) {
            this.factory = a, this.digit = b, this.lastDigit = b, this.$el = this.createList(), this.$obj = this.$el, b > 0 && this.select(b), this.factory.$el.append(this.$el)
        },
        select: function(a) {
            if ("undefined" == typeof a ? a = this.digit : this.digit = a, this.digit != this.lastDigit) {
                var b = this.$el.find("." + this.classes.before).removeClass(this.classes.before);
                this.$el.find("." + this.classes.active).removeClass(this.classes.active).addClass(this.classes.before), this.appendListItem(this.classes.active, this.digit), b.remove(), this.lastDigit = this.digit
            }
        },
        play: function() {
            this.$el.addClass(this.factory.classes.play)
        },
        stop: function() {
            var a = this;
            setTimeout(function() {
                a.$el.removeClass(a.factory.classes.play)
            }, this.factory.timer.interval)
        },
        createListItem: function(a, b) {
            return ['<li class="' + (a ? a : "") + '">', '<a href="#">', '<div class="up">', '<div class="shadow"></div>', '<div class="inn">' + (b ? b : "") + "</div>", "</div>", '<div class="down">', '<div class="shadow"></div>', '<div class="inn">' + (b ? b : "") + "</div>", "</div>", "</a>", "</li>"].join("")
        },
        appendListItem: function(a, b) {
            var c = this.createListItem(a, b);
            this.$el.append(c)
        },
        createList: function() {
            var b = this.getPrevDigit() ? this.getPrevDigit() : this.digit,
                c = a(['<ul class="' + this.classes.flip + " " + (this.factory.running ? this.factory.classes.play : "") + '">', this.createListItem(this.classes.before, b), this.createListItem(this.classes.active, this.digit), "</ul>"].join(""));
            return c
        },
        getNextDigit: function() {
            return 9 == this.digit ? 0 : this.digit + 1
        },
        getPrevDigit: function() {
            return 0 == this.digit ? 9 : this.digit - 1
        }
    })
}(jQuery),
function(a) {
    "use strict";
    String.prototype.ucfirst = function() {
        return this.substr(0, 1).toUpperCase() + this.substr(1)
    }, a.fn.FlipClock = function(b, c) {
        return new FlipClock(a(this), b, c)
    }, a.fn.flipClock = function(b, c) {
        return a.fn.FlipClock(b, c)
    }
}(jQuery),
function(a) {
    "use strict";
    FlipClock.Time = FlipClock.Base.extend({
        time: 0,
        factory: !1,
        minimumDigits: 0,
        constructor: function(a, b, c) {
            "object" != typeof c && (c = {}), c.minimumDigits || (c.minimumDigits = a.minimumDigits), this.base(c), this.factory = a, b && (this.time = b)
        },
        convertDigitsToArray: function(a) {
            var b = [];
            a = a.toString();
            for (var c = 0; c < a.length; c++) a[c].match(/^\d*$/g) && b.push(a[c]);
            return b
        },
        digit: function(a) {
            var b = this.toString(),
                c = b.length;
            return b[c - a] ? b[c - a] : !1
        },
        digitize: function(b) {
            var c = [];
            if (a.each(b, function(a, b) {
                    b = b.toString(), 1 == b.length && (b = "0" + b);
                    for (var d = 0; d < b.length; d++) c.push(b.charAt(d))
                }), c.length > this.minimumDigits && (this.minimumDigits = c.length), this.minimumDigits > c.length)
                for (var d = c.length; d < this.minimumDigits; d++) c.unshift("0");
            return c
        },
        getDateObject: function() {
            return this.time instanceof Date ? this.time : new Date((new Date).getTime() + 1e3 * this.getTimeSeconds())
        },
        getDayCounter: function(a) {
            var b = [this.getDays(), this.getHours(!0), this.getMinutes(!0)];
            return a && b.push(this.getSeconds(!0)), this.digitize(b)
        },
        getDays: function(a) {
            var b = this.getTimeSeconds() / 60 / 60 / 24;
            return a && (b %= 7), Math.floor(b)
        },
        getHourCounter: function() {
            var a = this.digitize([this.getHours(), this.getMinutes(!0), this.getSeconds(!0)]);
            return a
        },
        getHourly: function() {
            return this.getHourCounter()
        },
        getHours: function(a) {
            var b = this.getTimeSeconds() / 60 / 60;
            return a && (b %= 24), Math.floor(b)
        },
        getMilitaryTime: function(a, b) {
            "undefined" == typeof b && (b = !0), a || (a = this.getDateObject());
            var c = [a.getHours(), a.getMinutes()];
            return b === !0 && c.push(a.getSeconds()), this.digitize(c)
        },
        getMinutes: function(a) {
            var b = this.getTimeSeconds() / 60;
            return a && (b %= 60), Math.floor(b)
        },
        getMinuteCounter: function() {
            var a = this.digitize([this.getMinutes(), this.getSeconds(!0)]);
            return a
        },
        getTimeSeconds: function(a) {
            return a || (a = new Date), this.time instanceof Date ? this.factory.countdown ? Math.max(this.time.getTime() / 1e3 - a.getTime() / 1e3, 0) : a.getTime() / 1e3 - this.time.getTime() / 1e3 : this.time
        },
        getTime: function(a, b) {
            "undefined" == typeof b && (b = !0), a || (a = this.getDateObject()), console.log(a);
            var c = a.getHours(),
                d = [c > 12 ? c - 12 : 0 === c ? 12 : c, a.getMinutes()];
            return b === !0 && d.push(a.getSeconds()), this.digitize(d)
        },
        getSeconds: function(a) {
            var b = this.getTimeSeconds();
            return a && (60 == b ? b = 0 : b %= 60), Math.ceil(b)
        },
        getWeeks: function(a) {
            var b = this.getTimeSeconds() / 60 / 60 / 24 / 7;
            return a && (b %= 52), Math.floor(b)
        },
        removeLeadingZeros: function(b, c) {
            var d = 0,
                e = [];
            return a.each(c, function(a) {
                b > a ? d += parseInt(c[a], 10) : e.push(c[a])
            }), 0 === d ? e : c
        },
        addSeconds: function(a) {
            this.time instanceof Date ? this.time.setSeconds(this.time.getSeconds() + a) : this.time += a
        },
        addSecond: function() {
            this.addSeconds(1)
        },
        subSeconds: function(a) {
            this.time instanceof Date ? this.time.setSeconds(this.time.getSeconds() - a) : this.time -= a
        },
        subSecond: function() {
            this.subSeconds(1)
        },
        toString: function() {
            return this.getTimeSeconds().toString()
        }
    })
}(jQuery),
function() {
    "use strict";
    FlipClock.Timer = FlipClock.Base.extend({
        callbacks: {
            destroy: !1,
            create: !1,
            init: !1,
            interval: !1,
            start: !1,
            stop: !1,
            reset: !1
        },
        count: 0,
        factory: !1,
        interval: 1e3,
        animationRate: 1e3,
        constructor: function(a, b) {
            this.base(b), this.factory = a, this.callback(this.callbacks.init), this.callback(this.callbacks.create)
        },
        getElapsed: function() {
            return this.count * this.interval
        },
        getElapsedTime: function() {
            return new Date(this.time + this.getElapsed())
        },
        reset: function(a) {
            clearInterval(this.timer), this.count = 0, this._setInterval(a), this.callback(this.callbacks.reset)
        },
        start: function(a) {
            this.factory.running = !0, this._createTimer(a), this.callback(this.callbacks.start)
        },
        stop: function(a) {
            this.factory.running = !1, this._clearInterval(a), this.callback(this.callbacks.stop), this.callback(a)
        },
        _clearInterval: function() {
            clearInterval(this.timer)
        },
        _createTimer: function(a) {
            this._setInterval(a)
        },
        _destroyTimer: function(a) {
            this._clearInterval(), this.timer = !1, this.callback(a), this.callback(this.callbacks.destroy)
        },
        _interval: function(a) {
            this.callback(this.callbacks.interval), this.callback(a), this.count++
        },
        _setInterval: function(a) {
            var b = this;
            b._interval(a), b.timer = setInterval(function() {
                b._interval(a)
            }, this.interval)
        }
    })
}(jQuery),
function(a) {
    FlipClock.TwentyFourHourClockFace = FlipClock.Face.extend({
        constructor: function(a, b) {
            this.base(a, b)
        },
        build: function(b) {
            var c = this,
                d = this.factory.$el.find("ul");
            this.factory.time.time || (this.factory.original = new Date, this.factory.time = new

It is too long, so divide into two parts, see below

It is too long, so divide into two parts,
flipclock.js.zip (6.4 KB)
and the flipclock.js attached:

FlipClock.Time(this.factory, this.factory.original));
                var b = b ? b : this.factory.time.getMilitaryTime(!1, this.showSeconds);
                b.length > d.length && a.each(b, function(a, b) {
                    c.createList(b)
                }), this.createDivider(), this.createDivider(), a(this.dividers[0]).insertBefore(this.lists[this.lists.length - 2].$el), a(this.dividers[1]).insertBefore(this.lists[this.lists.length - 4].$el), this.base()
            },
            flip: function(a, b) {
                this.autoIncrement(), a = a ? a : this.factory.time.getMilitaryTime(!1, this.showSeconds), this.base(a, b)
            }
        })
    }(jQuery),
    function(a) {
        FlipClock.CounterFace = FlipClock.Face.extend({
            shouldAutoIncrement: !1,
            constructor: function(a, b) {
                "object" != typeof b && (b = {}), a.autoStart = b.autoStart ? !0 : !1, b.autoStart && (this.shouldAutoIncrement = !0), a.increment = function() {
                    a.countdown = !1, a.setTime(a.getTime().getTimeSeconds() + 1)
                }, a.decrement = function() {
                    a.countdown = !0;
                    var b = a.getTime().getTimeSeconds();
                    b > 0 && a.setTime(b - 1)
                }, a.setValue = function(b) {
                    a.setTime(b)
                }, a.setCounter = function(b) {
                    a.setTime(b)
                }, this.base(a, b)
            },
            build: function() {
                var b = this,
                    c = this.factory.$el.find("ul"),
                    d = this.factory.getTime().digitize([this.factory.getTime().time]);
                d.length > c.length && a.each(d, function(a, c) {
                    var d = b.createList(c);
                    d.select(c)
                }), a.each(this.lists, function(a, b) {
                    b.play()
                }), this.base()
            },
            flip: function(a, b) {
                this.shouldAutoIncrement && this.autoIncrement(), a || (a = this.factory.getTime().digitize([this.factory.getTime().time])), this.base(a, b)
            },
            reset: function() {
                this.factory.time = new FlipClock.Time(this.factory, this.factory.original ? Math.round(this.factory.original) : 0), this.flip()
            }
        })
    }(jQuery),
    function(a) {
        FlipClock.DailyCounterFace = FlipClock.Face.extend({
            showSeconds: !0,
            constructor: function(a, b) {
                this.base(a, b)
            },
            build: function(b) {
                var c = this,
                    d = this.factory.$el.find("ul"),
                    e = 0;
                b = b ? b : this.factory.time.getDayCounter(this.showSeconds), b.length > d.length && a.each(b, function(a, b) {
                    c.createList(b)
                }), this.showSeconds ? a(this.createDivider("Seconds")).insertBefore(this.lists[this.lists.length - 2].$el) : e = 2, a(this.createDivider("Minutes")).insertBefore(this.lists[this.lists.length - 4 + e].$el), a(this.createDivider("Hours")).insertBefore(this.lists[this.lists.length - 6 + e].$el), a(this.createDivider("Days", !0)).insertBefore(this.lists[0].$el), this.base()
            },
            flip: function(a, b) {
                a || (a = this.factory.time.getDayCounter(this.showSeconds)), this.autoIncrement(), this.base(a, b)
            }
        })
    }(jQuery),
    function(a) {
        FlipClock.HourlyCounterFace = FlipClock.Face.extend({
            constructor: function(a, b) {
                this.base(a, b)
            },
            build: function(b, c) {
                var d = this,
                    e = this.factory.$el.find("ul");
                c = c ? c : this.factory.time.getHourCounter(), c.length > e.length && a.each(c, function(a, b) {
                    d.createList(b)
                }), a(this.createDivider("Seconds")).insertBefore(this.lists[this.lists.length - 2].$el), a(this.createDivider("Minutes")).insertBefore(this.lists[this.lists.length - 4].$el), b || a(this.createDivider("Hours", !0)).insertBefore(this.lists[0].$el), this.base()
            },
            flip: function(a, b) {
                a || (a = this.factory.time.getHourCounter()), this.autoIncrement(), this.base(a, b)
            },
            appendDigitToClock: function(a) {
                this.base(a), this.dividers[0].insertAfter(this.dividers[0].next())
            }
        })
    }(jQuery),
    function() {
        FlipClock.MinuteCounterFace = FlipClock.HourlyCounterFace.extend({
            clearExcessDigits: !1,
            constructor: function(a, b) {
                this.base(a, b)
            },
            build: function() {
                this.base(!0, this.factory.time.getMinuteCounter())
            },
            flip: function(a, b) {
                a || (a = this.factory.time.getMinuteCounter()), this.base(a, b)
            }
        })
    }(jQuery),
    function(a) {
        FlipClock.TwelveHourClockFace = FlipClock.TwentyFourHourClockFace.extend({
            meridium: !1,
            meridiumText: "AM",
            build: function() {
                var b = this.factory.time.getTime(!1, this.showSeconds);
                this.base(b), this.meridiumText = this.getMeridium(), this.meridium = a(['<ul class="flip-clock-meridium">', "<li>", '<a href="#">' + this.meridiumText + "</a>", "</li>", "</ul>"].join("")), this.meridium.insertAfter(this.lists[this.lists.length - 1].$el)
            },
            flip: function(a, b) {
                this.meridiumText != this.getMeridium() && (this.meridiumText = this.getMeridium(), this.meridium.find("a").html(this.meridiumText)), this.base(this.factory.time.getTime(!1, this.showSeconds), b)
            },
            getMeridium: function() {
                return (new Date).getHours() >= 12 ? "PM" : "AM"
            },
            isPM: function() {
                return "PM" == this.getMeridium() ? !0 : !1
            },
            isAM: function() {
                return "AM" == this.getMeridium() ? !0 : !1
            }
        })
    }(jQuery),
    function() {
        FlipClock.Lang.Arabic = {
            years: "سنوات",
            months: "شهور",
            days: "أيام",
            hours: "ساعات",
            minutes: "دقائق",
            seconds: "ثواني"
        }, FlipClock.Lang.ar = FlipClock.Lang.Arabic, FlipClock.Lang["ar-ar"] = FlipClock.Lang.Arabic, FlipClock.Lang.arabic = FlipClock.Lang.Arabic
    }(jQuery),
    function() {
        FlipClock.Lang.Danish = {
            years: "År",
            months: "Måneder",
            days: "Dage",
            hours: "Timer",
            minutes: "Minutter",
            seconds: "Sekunder"
        }, FlipClock.Lang.da = FlipClock.Lang.Danish, FlipClock.Lang["da-dk"] = FlipClock.Lang.Danish, FlipClock.Lang.danish = FlipClock.Lang.Danish
    }(jQuery),
    function() {
        FlipClock.Lang.German = {
            years: "Jahre",
            months: "Monate",
            days: "Tage",
            hours: "Stunden",
            minutes: "Minuten",
            seconds: "Sekunden"
        }, FlipClock.Lang.de = FlipClock.Lang.German, FlipClock.Lang["de-de"] = FlipClock.Lang.German, FlipClock.Lang.german = FlipClock.Lang.German
    }(jQuery),
    function() {
        FlipClock.Lang.English = {
            years: "Years",
            months: "Months",
            days: "Days",
            hours: "Hours",
            minutes: "Minutes",
            seconds: "Seconds"
        }, FlipClock.Lang.en = FlipClock.Lang.English, FlipClock.Lang["en-us"] = FlipClock.Lang.English, FlipClock.Lang.english = FlipClock.Lang.English
    }(jQuery),
    function() {
        FlipClock.Lang.Spanish = {
            years: "A&#241;os",
            months: "Meses",
            days: "D&#205;as",
            hours: "Horas",
            minutes: "Minutos",
            seconds: "Segundo"
        }, FlipClock.Lang.es = FlipClock.Lang.Spanish, FlipClock.Lang["es-es"] = FlipClock.Lang.Spanish, FlipClock.Lang.spanish = FlipClock.Lang.Spanish
    }(jQuery),
    function() {
        FlipClock.Lang.Finnish = {
            years: "Vuotta",
            months: "Kuukautta",
            days: "Päivää",
            hours: "Tuntia",
            minutes: "Minuuttia",
            seconds: "Sekuntia"
        }, FlipClock.Lang.fi = FlipClock.Lang.Finnish, FlipClock.Lang["fi-fi"] = FlipClock.Lang.Finnish, FlipClock.Lang.finnish = FlipClock.Lang.Finnish
    }(jQuery),
    function() {
        FlipClock.Lang.French = {
            years: "Ans",
            months: "Mois",
            days: "Jours",
            hours: "Heures",
            minutes: "Minutes",
            seconds: "Secondes"
        }, FlipClock.Lang.fr = FlipClock.Lang.French, FlipClock.Lang["fr-ca"] = FlipClock.Lang.French, FlipClock.Lang.french = FlipClock.Lang.French
    }(jQuery),
    function() {
        FlipClock.Lang.Italian = {
            years: "Anni",
            months: "Mesi",
            days: "Giorni",
            hours: "Ore",
            minutes: "Minuti",
            seconds: "Secondi"
        }, FlipClock.Lang.it = FlipClock.Lang.Italian, FlipClock.Lang["it-it"] = FlipClock.Lang.Italian, FlipClock.Lang.italian = FlipClock.Lang.Italian
    }(jQuery),
    function() {
        FlipClock.Lang.Latvian = {
            years: "Gadi",
            months: "Mēneši",
            days: "Dienas",
            hours: "Stundas",
            minutes: "Minūtes",
            seconds: "Sekundes"
        }, FlipClock.Lang.lv = FlipClock.Lang.Latvian, FlipClock.Lang["lv-lv"] = FlipClock.Lang.Latvian, FlipClock.Lang.latvian = FlipClock.Lang.Latvian
    }(jQuery),
    function() {
        FlipClock.Lang.Dutch = {
            years: "Jaren",
            months: "Maanden",
            days: "Dagen",
            hours: "Uren",
            minutes: "Minuten",
            seconds: "Seconden"
        }, FlipClock.Lang.nl = FlipClock.Lang.Dutch, FlipClock.Lang["nl-be"] = FlipClock.Lang.Dutch, FlipClock.Lang.dutch = FlipClock.Lang.Dutch
    }(jQuery),
    function() {
        FlipClock.Lang.Norwegian = {
            years: "År",
            months: "Måneder",
            days: "Dager",
            hours: "Timer",
            minutes: "Minutter",
            seconds: "Sekunder"
        }, FlipClock.Lang.no = FlipClock.Lang.Norwegian, FlipClock.Lang.nb = FlipClock.Lang.Norwegian, FlipClock.Lang["no-nb"] = FlipClock.Lang.Norwegian, FlipClock.Lang.norwegian = FlipClock.Lang.Norwegian
    }(jQuery),
    function() {
        FlipClock.Lang.Portuguese = {
            years: "Anos",
            months: "Meses",
            days: "Dias",
            hours: "Horas",
            minutes: "Minutos",
            seconds: "Segundos"
        }, FlipClock.Lang.pt = FlipClock.Lang.Portuguese, FlipClock.Lang["pt-br"] = FlipClock.Lang.Portuguese, FlipClock.Lang.portuguese = FlipClock.Lang.Portuguese
    }(jQuery),
    function() {
        FlipClock.Lang.Russian = {
            years: "лет",
            months: "месяцев",
            days: "дней",
            hours: "часов",
            minutes: "минут",
            seconds: "секунд"
        }, FlipClock.Lang.ru = FlipClock.Lang.Russian, FlipClock.Lang["ru-ru"] = FlipClock.Lang.Russian, FlipClock.Lang.russian = FlipClock.Lang.Russian
    }(jQuery),
    function() {
        FlipClock.Lang.Swedish = {
            years: "År",
            months: "Månader",
            days: "Dagar",
            hours: "Timmar",
            minutes: "Minuter",
            seconds: "Sekunder"
        }, FlipClock.Lang.sv = FlipClock.Lang.Swedish, FlipClock.Lang["sv-se"] = FlipClock.Lang.Swedish, FlipClock.Lang.swedish = FlipClock.Lang.Swedish
    }(jQuery);

Weird – since this is Flipclock (not Hype), you can contact one of the authors: https://twitter.com/justin_kimbrell

I solved it. Changed the script a bit. It now looks like this.

Again thank you all! I’ll show you the final banner when I’m done it so you know what you helped me with :slight_smile: Have a great evening!

If anyone wants to use this countdown timer, here is the hype file.

The css is implemented in the HTML Widget. You can add the css file directly to the resource library as well but I found it much faster to style it directly in hype.

flipclock.zip (84.9 KB)

3 Likes

Just to show the potential of a full Hype version of this and the above mechanical letter symbol, I put together this version (based on the longstanding flexible counter by @jonathan)

3 Likes

In Safari the gap between the top and bottom collapse when it “flips”. Firefox has the same problem as well as the alignment of the numbers. Is there anyway to fix this?

56

This has nothing todo with script or symbols. It seams related to the font “Helvetica”. As we are using a “System-Font” Firefox seams to substitute it with another font. I editited the source to use “Helevetica Neue”. If you want to be very sure it works use an embeded font

3 Likes

Thank you Max :slight_smile:

Hey again Max!

How can I change the boxes from 8 to 4. One box for days, one for hours and so on. This i what I want to achieve. Thank you!!

counter

  1. Edit the boxes in the symbol so two numbers can fit
  2. Then adjust the script… it doesn’t need to split anymore, so we get rid of the loop.
  3. Then we rename the classes without indices

MechanicalLetterCountdownTimerInPairs.hype.zip (65,4 KB)

I am not such a fan of this as the original mechanical letters couldn’t really work like that without having a massive spindle. The clever idea was them being individual numbers from 0-9.

2 Likes

Again Max. Thank you so much for your help, the work file and also your super quick reply!!

1 Like