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

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 ;-)
 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote
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...
 
Upvote 0 Downvote
CritiKiL said:
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 ;-)
Click to expand...
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...
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

R
Close notices?!
Replies
6
Views
485
Mr Lucky
Mr Lucky
Monkeytime
  • Solved
XF 2.2 Is showing thread in list without forum possible?
Replies
3
Views
416
Monkeytime
Monkeytime
Ladegro
  • Suggestion Suggestion
Default filter: Hide or exclude posts with certain prefix
Replies
0
Views
263
Ladegro
Ladegro
ArtG
  • Question Question
XF 2.2 Search for most replied threads for a year?
Replies
2
Views
246
Kirby
K
jayhawku
  • Question Question
XF 2.2 What add-ons/options exist for showing news/linking content outside of the forum?
Replies
7
Views
296
jayhawku
jayhawku
Top Bottom