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

'Countdown block' to only show, in specific thread area?:

Discussion in 'Styling and Customization Questions' started by CritiKiL, Apr 29, 2012.

  1. CritiKiL

    CritiKiL Active Member

    Right now I'm using the EWRPortal addon to use it's 'countdown' block. It shows at the top of the main forum area but I would like for it NOT to show there but rather in a specific thread topic area:

    Where it is now:
    (click here)

    Where I'd like it to be:
    (click here)

    Thanks in Advance ;-)
     
  2. CritiKiL

    CritiKiL Active Member

    Ok, this is how far I've gotten. The countdown is there but the information is not. How can I get the info to show up? Here's my code that I've put into the Thread_List template (33 is the node location for the correct placement):
    Code:
    <xen:if is="{$forum.node_id} == 33">
    <div align="center"><xen:require css="EWRblock_CountDown.css" />
     
    <div class="section countDown">
     
        <xen:require js="js/8wayrun/EWRporta_lwtcd.js" />
     
        <script type="text/javascript">
        jQuery(document).ready(function() {
            $('#countdown').countDown({
                targetDate: {
                    'day':        {$option.day},
                    'month':    {$option.month},
                    'year':        {$option.year},
                    'hour':        {$option.hour},
                    'min':        {$option.minute},
                    'sec':        {$option.second},
                    'utc':        {$option.utc}
                }
            });
        });
        </script>
     
        <div class="secondaryContent">
            <h3>{$option.name}</h3>
            <div id="countdown">
                <div class="dash first weeks_dash">
                    <span class="dash_title">Weeks</span>
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                </div>
                <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>
    </div>
    <br><br>
    </xen:if>
    
     
  3. CritiKiL

    CritiKiL Active Member

    UPDATE: Ok, Now, I'm only looking to have a 'second countdown' timer just like the xenporta. I want two different timers because one is going to be for recruiting and I need the other one to go HERE for 'Clan Op' events. I think I need to ask this of Jaxel though but if anyone can help me setup a 'Second Countdown Timer for Xenforo' I'd be very greatful? Thanks in advance...
     
  4. CritiKiL

    CritiKiL Active Member

    Can someone PLZ help me with this? I would like a second countdown timer (exactly like how the one in XenPorta works but which works 'outside' of the portal area, into THIS location:

    CLICK HERE...
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Use this code:

    Code:
    <xen:set var="$countdown.day">13</xen:set>
    <xen:set var="$countdown.month">9</xen:set>
    <xen:set var="$countdown.year">2012</xen:set>
    <xen:set var="$countdown.hour">0</xen:set>
    <xen:set var="$countdown.minute">0</xen:set>
    <xen:set var="$countdown.second">0</xen:set>
    <xen:set var="$countdown.utc">1</xen:set>
    <xen:set var="$countdown.name">TITLE HERE</xen:set>
    
    <xen:include template="EWRblock_CountDown">
    	<xen:map from="$countdown" to="$option" />
    </xen:include>
    
    You can surround it with your condition if you want:

    Code:
    <xen:if is="{$forum.node_id} == 33">
    <xen:set var="$countdown.day">13</xen:set>
    <xen:set var="$countdown.month">9</xen:set>
    <xen:set var="$countdown.year">2012</xen:set>
    <xen:set var="$countdown.hour">0</xen:set>
    <xen:set var="$countdown.minute">0</xen:set>
    <xen:set var="$countdown.second">0</xen:set>
    <xen:set var="$countdown.utc">1</xen:set>
    <xen:set var="$countdown.name">TITLE HERE</xen:set>
    
    <xen:include template="EWRblock_CountDown">
    	<xen:map from="$countdown" to="$option" />
    </xen:include>
    </xen:if>
    
    This code allows you to define your countdown parameters.
     
    zagman76 likes this.
  6. CritiKiL

    CritiKiL Active Member

    Got it! Your a Lifesaver bro ;-)
     
  7. CritiKiL

    CritiKiL Active Member

  8. scottglax

    scottglax Member

    Not sure where else to put this, so I'm going to ask this question in this thread. I've created an html widget in XenPorta which spans below the entire slider. I've broken it into 4 sections, one of which is a 250px x 90px area for the countdown timer. I've installed the Clip the Apex timer. I've set a style for the timer area with a background image and then used the countdown timer HTML code. A countdown timer shows up, but it doesn't work. What do I need to write into the code for this widget in order to get a WORKING countdown timer to show up? Here is the code as it is currently written:

    HTML:
    <div class="section">
     
    <div style="width:100%;height:90px;">
    <div style="float:left;margin-right:5px;width:225px;height:90px;background-image:url(/ticketcitybutton.png);">
    <div style="padding:5px;width:90px;float:right;font-size:10px;">The <b>Official TerpsInsider</b> ticket provider. <a href="http://www.ticketcity.com/college-basketball-tickets/acc-basketball/maryland-terrapins-basketball-tickets.html">Click to buy Tickets</a> or buy/sell <a href="http://www.ticketcity.com/">other tickets</a>. </div>
    </div>
    <div style="float:left;margin-right:5px;height:90px;">
    <a href="http://www/"><img src="/placeholder.PNG"></a>
    </div>
    <div style="float:left;margin-right:5px;height:90px;">
    <a href="/account/upgrades"><img src="/placeholder.PNG"></a>
    </div>
    <div style="float:left; width: 250px; height: 90px; margin:0px auto;background-image:url(/CountdownFball.png)">
    <div class="<div id="countdown">
                <div class="dash first weeks_dash">
                    <span class="dash_title">Wks</span>
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                </div>
                <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>
    </div>
    
    So this gets the LOOK right, but I don't have a functioning countdown timer. What is the missing code I need to insert in order to get the timer to work with the setting in options?

    Thanks
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    The countdown timer itself would be powered by a load of javascript code.

    Looking at the add on you mentioned from ClipTheApex, that add on creates a template called cta_countdown_main and cta_countdown_timer. These are the two that contain incredibly important code. I guess, what you could do is just insert the code directly above the code you've supplied there...

    Try it:

    Code:
    <script type="text/javascript">
    /*!
     * jQuery Countdown plugin v1.0
     * http://www.littlewebthings.com/projects/countdown/
     *
     * Copyright 2010, Vassilis Dourdounis
     * 
     * Permission is hereby granted, free of charge, to any person obtaining a copy 
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     * 
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     * 
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
     
    (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':      {$xenOptions.cta_countdown_day},
                'month':    {$xenOptions.cta_countdown_month},
                'year':     {$xenOptions.cta_countdown_year},
                'hour':     {$xenOptions.cta_countdown_hour},
                'min':      {$xenOptions.cta_countdown_min},
                'sec':      {$xenOptions.cta_countdown_sec},
       'utc':true
            }
        });
    });
    </script>
     
  10. scottglax

    scottglax Member

    Thanks for the response. Here is the couple of things about doing that.

    1. It turns the div id "countdown" into a separate div class. What do I have to name this new div class?
    2. I still don't know what it is I have to do at that point to get the timer to function properly. Where do I insert the date I want the timer to countdown to?

    Thanks
     
  11. scottglax

    scottglax Member

    Ok, so the strangest thing happened.....I inserted the above code into the html widget and then deleted it, and the timer is now working. lol I have NO idea how that happened, but I'll take it! Thanks again.
     

Share This Page