vb.org Archive
Page 16 of 26 « First 61415 16 1718 Last »
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   vBulletin Forum Sideblocks - Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns) (https://vborg.vbsupport.ru/showthread.php?t=266689)

Gemma 11-10-2011 01:24 PM
Quote:
Originally Posted by psychobike (Post 2266254)
Gemma you were correct there were settings for the countdown in my headinclude template. However after entering the new countdown settings I'm only getting all 0's on the countdown. Any idea where I might look for a cure?
Try going to AdminCP > vBa CMPS > Diagnostics and Rebuild the module cache.

Quote:
Btw, what would the chances be of making this a plugin/product so settings can be made in acp?
Not something I'm looking at doing - however anyone else is free to take what I've done and expand on it.

matrixmark 12-08-2011 08:26 PM
Thanks for this, is working great

kylek 12-15-2011 09:47 PM
Quote:
Originally Posted by Gemma (Post 2265427)
The CMS and vBA CMPS give me a headache lol, what couldn't you get working Countdown or layout?) and I'll try and reproduce it.



The attached image is from the CMS page (needs a modified grid) not FORUMHOME, you can have it display on the forum index by creating a table and adding the countdown code within it.

On my own site I did it this way. In the FORUMHOME template find:
Code:
<!-- END content -->

              {vb:raw template_hook.forumhome_wgo_pos5}

        </div>
   
    <!-- end what's going on box -->
Above that add:

Code:
<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
        <center><h2 class="blockhead">TABLE TITLE</h2></center>
        <div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td>
<center>
<div><li>
    <div class="block smaller">
    <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
// onComplete function
        onComplete: function() {
$('#complete_info_message').slideDown();
}

    });
});

</script>
<div align="center">LINK TO IMAGE</div>
       
        <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 class="info_message" id="complete_info_message" style="display: none;">
                Countdown Complete
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown2').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
// onComplete function
        onComplete: function() {
$('#complete_info_message2').slideDown();
}

    });
});

</script>
<div align="center">LINK TO IMAGE</div>
       
        <div id="countdown2">
            <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 class="info_message" id="complete_info_message2" style="display: none;">
                Countdown Complete
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>

<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown3').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00,
          }
    });
});

</script>
<div align="center">LINK TO IMAGE</div>
       
        <div id="countdown3">
            <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>
    </div>
<div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown4').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00,
          }
    });
});

</script>
<div align="center">LINK TO IMAGE</div>
       
        <div id="countdown4">
            <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>
</li></center></td></tr></table></center></div>
I'm not supporting that though so you'd be best to try it out on a test site or using a test style.

Thanks Gemma!!

Been playing around with this and noticed if someone uses 1024 res it screws up the 4 countdowns in a row. And we do still get a lot of members that use 1024 x 768.

How would one break the layout so you would have 2 countdowns and then the next two countdown times below the first two? I have tried breaks, etc but still cant figure it out.

Something like this is what I am trying to achieve:

Countdown timer 1 - Countdown timer 2
Countdown timer 3 - Countdown timer 4

Gemma 12-15-2011 09:53 PM
Let me play around for a bit and I'll get back to you :)

kylek 12-15-2011 10:20 PM
Thank you again Gemma,

And actually I lied, we have 6 league games that I want to display so would like to have it break after the 3rd one if possible. So it would be 3 timers, then 3 below it (1 below for now). When we set up the last couple of tournament games I will figure out how to insert two more timers.

Gemma 12-15-2011 10:40 PM
1 Attachment(s)
Quote:
we have 6 league games
Ah ok, you can check out what I've done for 4 and see how it looks - I'll go and duplicate a couple of the countdowns now. I've attached a screen below and it is on the dark theme of my site if you want to check it out live.

Let me know if it looks ok

Edit: I can also omit the number of weeks for you if the countdowns are going to be less than 100 days - but might still need to play with the font sizes

kylek 12-15-2011 11:51 PM
That looks great on your new dark theme on your site. We do not need weeks as each game will be weekly but dont worry about it as you are going way out of your way to help us!

Gemma 12-15-2011 11:55 PM
Cool :)

This code should help you get started, any problems just shout and I'll look in the morning :)

Code:
<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.4.4.min.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
        <center><h2 class="blockhead">BLOCK TITLE</h2></center>
        <div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
    <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown1').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':      00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
       
        <div id="countdown1">
            <div class="dash first 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>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown2').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
       
        <div id="countdown2">
            <div class="dash first 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>
    </div>
    <div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown3').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
       
        <div id="countdown3">
            <div class="dash first 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>
    </div>
    <div class="underblock"></div>
</li>
</center>
</td>
</td></tr></td></table>
<table align="center">
<tr>
<td>
<center>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown4').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
       
        <div id="countdown4">
            <div class="dash first 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>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown5').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
       
        <div id="countdown5">
            <div class="dash first 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>
    </div>
    <div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown6').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':    0000,
            'hour':    00,
            'min':      00,
            'sec':    00
          },
        omitWeeks: true
                });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown6">
            <div class="dash first 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>
</li></center></td></tr></center></table></div></div>
All you should need to do is set up the 6 timers, and replace the instances of BLOCK TITLE, LINK TO YOUR IMAGE, IMAGE TITLE, OPTIONAL URL LINK and COUNTDOWN TITLE where applicable or remove them.

kylek 12-16-2011 08:24 AM
Looks great but have been playing with a default forumhome template and when I try to add it above or below the whats going on section our left sidebar disappears. It doesn't completely disappear but gets pushed down below the forum section.

Gemma 12-16-2011 09:53 AM
Quote:
Originally Posted by kylek (Post 2278254)
Looks great but have been playing with a default forumhome template and when I try to add it above or below the whats going on section our left sidebar disappears. It doesn't completely disappear but gets pushed down below the forum section.
Bugger, I missed a </div> tag to the end of the code; I've updated the code above :)


All times are GMT. The time now is 04:13 AM.
Page 16 of 26 « First 61415 16 1718 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01357 seconds
  • Memory Usage 1,867KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (5)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete