• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Centering countdown block

Andy.N

Well-known member
#1
Trying different ways to center the countdown block to no avail. Would appreciate any help. The link to see the countdown is here

Here is the code
Code:
<style type="text/css">
#countdown {
    height: 46px;
    background-color: @contentBackground;
        padding: 4px 0 20px 0;
}

.dash {
    width: 30px;
    height:44px;
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid @primaryLighterStill;
    position: relative;
}

    .first {
        margin-left: 12px;
        padding-left: 0;
        border-left: 0;
    }

.dash .digit {
    font-size: 26px;
    font-weight: bold;
    float: left;
    font-family: Arial, sans-serif;
    color: red;
    position: relative;
}

.dash_title {
    position: absolute;
    display: block;
    bottom: 0px;
    right: 2px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    color: @mutedTextColor;
    text-transform: uppercase;
    letter-spacing: 0px;
}
</style>

<script type="text/javascript">
(function($){

    $.fn.countDown = function (options) {

        config = {};

        $.extend(config, options);

        diffSecs = this.setCountDown(config);
   
        if (config.onComplete)
        {
            $.data($(this)[0], 'callback', config.onComplete);
        }
        if (config.omitWeeks)
        {
            $.data($(this)[0], 'omitWeeks', config.omitWeeks);
        }

        $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
        $(this).doCountDown($(this).attr('id'), diffSecs, 500);

        return this;

    };

    $.fn.stopCountDown = function () {
        clearTimeout($.data(this[0], 'timer'));
    };

    $.fn.startCountDown = function () {
        this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
    };

    $.fn.setCountDown = function (options) {
        var targetTime = new Date();

        if (options.targetDate)
        {
            targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
        }
        else if (options.targetOffset)
        {
            targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
            targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
            targetTime.setDate(options.targetOffset.day + targetTime.getDate());
            targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
            targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
            targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
        }

        var nowTime = new Date();

        diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);

        $.data(this[0], 'diffSecs', diffSecs);

        return diffSecs;
    };

    $.fn.doCountDown = function (id, diffSecs, duration) {
        $this = $('#' + id);
        if (diffSecs <= 0)
        {
            diffSecs = 0;
            if ($.data($this[0], 'timer'))
            {
                clearTimeout($.data($this[0], 'timer'));
            }
        }

        secs = diffSecs % 60;
        mins = Math.floor(diffSecs/60)%60;
        hours = Math.floor(diffSecs/60/60)%24;
        if ($.data($this[0], 'omitWeeks') == true)
        {
            days = Math.floor(diffSecs/60/60/24);
            weeks = Math.floor(diffSecs/60/60/24/7);
        }
        else 
        {
            days = Math.floor(diffSecs/60/60/24)%7;
            weeks = Math.floor(diffSecs/60/60/24/7);
        }

        $this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
        $this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
        $this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
        $this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
        $this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);

        $.data($this[0], 'diffSecs', diffSecs);
        if (diffSecs > 0)
        {
            e = $this;
            t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
            $.data(e[0], 'timer', t);
        } 
        else if (cb = $.data($this[0], 'callback')) 
        {
            $.data($this[0], 'callback')();
        }

    };

    $.fn.dashChangeTo = function(id, dash, n, duration) {
         $this = $('#' + id);
         
         for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
         {
                var d = n%10;
                n = (n - d) / 10;
                $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
         }
    };

    $.fn.digitChangeTo = function (digit, n, duration) {
        if (!duration)
        {
            duration = 800;
        }
        if ($(digit + ' div.top').html() != n + '')
        {

            $(digit + ' div.top').css({'display': 'none'});
            $(digit + ' div.top').html((n ? n : '0')).slideDown(duration);

            $(digit + ' div.bottom').animate({'height': ''}, duration, function() {
                $(digit + ' div.bottom').html($(digit + ' div.top').html());
                $(digit + ' div.bottom').css({'display': 'block', 'height': ''});
                $(digit + ' div.top').hide().slideUp(10);

           
            });
        }
    };

})(jQuery);
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#countdown').countDown({
        targetDate: {
            'day':      6,
            'month':    10,
            'year':     2015,
            'hour':     9,
            'min':      0,
            'sec':      0
        }
    });
});
</script>
<div class="section">
    <div class="secondaryContent">
        <div id="countdown" style="text-align: center; border:1px solid red;">
<h3><b>The 2015 QuantNet ranking of best MFE programs will be released on Tues, Oct 6th at 9AM EST</b></h3>
            <div class="dash days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
    </div>
</div>
 

EQnoble

Well-known member
#2
Replace above with this...
Code:
<style type="text/css">
#countdown {
    height: 46px;
    background-color: @contentBackground;
        padding: 4px 0 20px 0;
}

.dash {
    width: 30px;
    height:44px;
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid @primaryLighterStill;
    position: relative;
}

    .first {
        margin-left: 12px;
        padding-left: 0;
        border-left: 0;
    }

.dash .digit {
    font-size: 26px;
    font-weight: bold;
    float: left;
    font-family: Arial, sans-serif;
    color: red;
    position: relative;
}

.dash_title {
    position: absolute;
    display: block;
    bottom: 0px;
    right: 2px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    color: @mutedTextColor;
    text-transform: uppercase;
    letter-spacing: 0px;
}
.counterWrap {
    display: block;
    overflow: hidden;
    width: 220px;
    margin: 0 auto;
}
</style>

<script type="text/javascript">
(function($){

    $.fn.countDown = function (options) {

        config = {};

        $.extend(config, options);

        diffSecs = this.setCountDown(config);
  
        if (config.onComplete)
        {
            $.data($(this)[0], 'callback', config.onComplete);
        }
        if (config.omitWeeks)
        {
            $.data($(this)[0], 'omitWeeks', config.omitWeeks);
        }

        $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
        $(this).doCountDown($(this).attr('id'), diffSecs, 500);

        return this;

    };

    $.fn.stopCountDown = function () {
        clearTimeout($.data(this[0], 'timer'));
    };

    $.fn.startCountDown = function () {
        this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
    };

    $.fn.setCountDown = function (options) {
        var targetTime = new Date();

        if (options.targetDate)
        {
            targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
        }
        else if (options.targetOffset)
        {
            targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
            targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
            targetTime.setDate(options.targetOffset.day + targetTime.getDate());
            targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
            targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
            targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
        }

        var nowTime = new Date();

        diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);

        $.data(this[0], 'diffSecs', diffSecs);

        return diffSecs;
    };

    $.fn.doCountDown = function (id, diffSecs, duration) {
        $this = $('#' + id);
        if (diffSecs <= 0)
        {
            diffSecs = 0;
            if ($.data($this[0], 'timer'))
            {
                clearTimeout($.data($this[0], 'timer'));
            }
        }

        secs = diffSecs % 60;
        mins = Math.floor(diffSecs/60)%60;
        hours = Math.floor(diffSecs/60/60)%24;
        if ($.data($this[0], 'omitWeeks') == true)
        {
            days = Math.floor(diffSecs/60/60/24);
            weeks = Math.floor(diffSecs/60/60/24/7);
        }
        else
        {
            days = Math.floor(diffSecs/60/60/24)%7;
            weeks = Math.floor(diffSecs/60/60/24/7);
        }

        $this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
        $this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
        $this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
        $this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
        $this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);

        $.data($this[0], 'diffSecs', diffSecs);
        if (diffSecs > 0)
        {
            e = $this;
            t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
            $.data(e[0], 'timer', t);
        }
        else if (cb = $.data($this[0], 'callback'))
        {
            $.data($this[0], 'callback')();
        }

    };

    $.fn.dashChangeTo = function(id, dash, n, duration) {
         $this = $('#' + id);
        
         for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
         {
                var d = n%10;
                n = (n - d) / 10;
                $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
         }
    };

    $.fn.digitChangeTo = function (digit, n, duration) {
        if (!duration)
        {
            duration = 800;
        }
        if ($(digit + ' div.top').html() != n + '')
        {

            $(digit + ' div.top').css({'display': 'none'});
            $(digit + ' div.top').html((n ? n : '0')).slideDown(duration);

            $(digit + ' div.bottom').animate({'height': ''}, duration, function() {
                $(digit + ' div.bottom').html($(digit + ' div.top').html());
                $(digit + ' div.bottom').css({'display': 'block', 'height': ''});
                $(digit + ' div.top').hide().slideUp(10);

          
            });
        }
    };

})(jQuery);
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#countdown').countDown({
        targetDate: {
            'day':      6,
            'month':    10,
            'year':     2015,
            'hour':     9,
            'min':      0,
            'sec':      0
        }
    });
});
</script>
<div class="section">
    <div class="secondaryContent">
        <div id="countdown" style="text-align: center; border:1px solid red;">
            <h3><b>The 2015 QuantNet ranking of best MFE programs will be released on Tues, Oct 6th at 9AM EST</b></h3>
            <div class="counterWrap">
                <div class="dash days_dash">
                    <span class="dash_title">Days</span>
                    <div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>
                    <div class="digit"><div class="top" style="display: none;">5</div><div class="bottom" style="display: block;">5</div></div>
                </div>
                <div class="dash hours_dash">
                    <span class="dash_title">Hrs</span>
                    <div class="digit"><div class="top" style="display: none;">1</div><div class="bottom" style="display: block;">1</div></div>
                    <div class="digit"><div class="top" style="display: none;">7</div><div class="bottom" style="display: block;">7</div></div>
                </div>
                <div class="dash minutes_dash">
                    <span class="dash_title">Mins</span>
                    <div class="digit"><div class="top" style="display: none;">1</div><div class="bottom" style="display: block;">1</div></div>
                    <div class="digit"><div class="top" style="display: none;">4</div><div class="bottom" style="display: block;">4</div></div>
                </div>
                <div class="dash seconds_dash">
                    <span class="dash_title">Secs</span>
                    <div class="digit"><div class="top" style="display: none;">3</div><div class="bottom" style="display: block;">3</div></div>
                    <div class="digit"><div class="top" style="display: block; overflow: hidden; height: 15.7716px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">8</div><div class="bottom" style="display: block; overflow: hidden; height: 17.7668px;">9</div></div>
                </div>
            </div>
        </div>
    </div>
</div>