1. 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

Discussion in 'Styling and Customization Questions' started by Andy.N, Sep 30, 2015.

  1. Andy.N

    Andy.N Well-Known Member

    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>
     
    Dinh Thanh likes this.
  2. EQnoble

    EQnoble Well-Known Member

    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>
     
    Andy.N likes this.
  3. Andy.N

    Andy.N Well-Known Member

    Awesome. Thanks a lot @EQnoble
    I saw what you did there ;)
     
  4. Skylined

    Skylined Active Member

    @Andy.N I noticed that your countdown has 2 digits for days instead of @EQnoble 3 digit.
    I have a countdown and the day displays 3 digits.

    Could you please tell me how you've done that?
     
  5. Andy.N

    Andy.N Well-Known Member

    The exact code is above.
     

Share This Page