• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Fancy tibia anniversary countdown

StreamSide

StreamSide

Joseluis Gonzalez
Staff member
Support Team
Joined
Aug 31, 2007
Messages
3,609
Solutions
51
Reaction score
1,224
Location
Arica - Chile
Hello there, I'm not even good at this but I tried and it worked (wasnt that hard)
If you dont know what I am talking about, here is a pic.

2hUJYYu


here is the code: [HTML] <script> $(document).ready(function() { // initialize anniversary count down - Pastebin.com
really easy to install so thats all, good bye.

HTML: 
<script>
$(document).ready(function() {
   // initialize anniversary count down
  var g_Now = Math.floor(new Date().getTime() / 1000);
  if (g_Now < 1483779600 && g_Now > 1482138000) {
   // do not display after 10:00:00 07.01.2017 (CET) (1483779600)
   // do not display before 10:00:00 19.12.2016 (CET) (1482138000)
   var g_AnniversaryDate = new Date(2017, 00, 07, 10, 00, 00); // careful! January hat the number "0"
   InitializeFancyAnniversaryCountDown(g_AnniversaryDate);
  }
});
/* ---------------------- */
/* anniversary count down */
/* ---------------------- */

//preload images
var g_ImageObject = new Object();
g_ImageObject[0] = new Image();
g_ImageObject[1] = new Image();
g_ImageObject[2] = new Image();
g_ImageObject[3] = new Image();
g_ImageObject[4] = new Image();
g_ImageObject[5] = new Image();
g_ImageObject[6] = new Image();
g_ImageObject[7] = new Image();
g_ImageObject[8] = new Image();
g_ImageObject[9] = new Image();
g_ImageObject[0].src = 'https://s29.postimg.org/9lwla0khz/number_0.png';
g_ImageObject[1].src = 'https://s29.postimg.org/4oj0owiiv/number_1.png';
g_ImageObject[2].src = 'https://s29.postimg.org/ijhb7dcxz/number_2.png';
g_ImageObject[3].src = 'https://s29.postimg.org/gsya5vvev/number_3.png';
g_ImageObject[4].src = 'https://s29.postimg.org/r4amyjn47/number_4.png';
g_ImageObject[5].src = 'https://s29.postimg.org/443zm7paf/number_5.png';
g_ImageObject[6].src = 'https://s29.postimg.org/es7ql1z9j/number_6.png';
g_ImageObject[7].src = 'https://s29.postimg.org/z0v46rykn/number_7.png';
g_ImageObject[8].src = 'https://s29.postimg.org/ayeabwhxj/number_8.png';
g_ImageObject[9].src = 'https://s29.postimg.org/6qo3gw5vr/number_9.png';

// calculate remaining time for the anniversary countdown
function getTimeRemaining(a_EndTime) {
  var l_TimeStamp = Date.parse(a_EndTime) - Date.parse(new Date());
  var l_Days = Math.floor(l_TimeStamp / (1000 * 60 * 60 * 24));
  var l_Hours = Math.floor((l_TimeStamp / (1000 * 60 * 60)) % 24);
  var l_Minutes = Math.floor((l_TimeStamp / 1000 / 60) % 60);
  var l_Seconds = Math.floor((l_TimeStamp / 1000) % 60);
  return {
   'total': l_TimeStamp,
   'days': l_Days,
   'hours': l_Hours,
   'minutes': l_Minutes,
   'seconds': l_Seconds
  };
}

//initialize the clock for the anniversary countdown
function InitializeFancyAnniversaryCountDown(a_EndTime)
{
  var l_DaysFirst = $('.FancyAnniversaryCountDown .DaysFirst');
  var l_DaysLast = $('.FancyAnniversaryCountDown .DaysLast');
  var l_HoursFirst = $('.FancyAnniversaryCountDown .HoursFirst');
  var l_HoursLast = $('.FancyAnniversaryCountDown .HoursLast');
  var l_MinutesFirst = $('.FancyAnniversaryCountDown .MinutesFirst');
  var l_MinutesLast = $('.FancyAnniversaryCountDown .MinutesLast');
  var l_SecondsFirst = $('.FancyAnniversaryCountDown .SecondsFirst');
  var l_SecondsLast = $('.FancyAnniversaryCountDown .SecondsLast');
 
  function UpdateFancyClock() {
   var l_TimeRemaining = getTimeRemaining(a_EndTime);
   l_DaysFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.days).slice(-2, -1)].src + ')');
   l_DaysLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.days).slice(-1)].src + ')');
   l_HoursFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.hours).slice(-2, -1)].src + ')');
   l_HoursLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.hours).slice(-1)].src + ')');
   l_MinutesFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.minutes).slice(-2, -1)].src + ')');
   l_MinutesLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.minutes).slice(-1)].src + ')');
   l_SecondsFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.seconds).slice(-2, -1)].src + ')');
   l_SecondsLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.seconds).slice(-1)].src + ')');
   if (l_TimeRemaining.total <= 0) {
    clearInterval(l_IntervalTime);
   }
  }

  UpdateFancyClock();
  var l_IntervalTime = setInterval(UpdateFancyClock, 1000);
}
</script>
<style>
#Themeboxes #AnniversaryCountDownBox {
   height: 120px;
}
.Themebox {
   position: relative;
   margin-bottom: 10px;
   width: 180px;
   height: 154px;
}
#Themeboxes div {
   font-size: 10pt;
   background-repeat: no-repeat;
}
#ThemeboxesColumn {
   position: absolute;
   width: 180px;
   filter: alpha(opacity=100);
}
/* ---------------------- */
/* anniversary count down */
/* ---------------------- */

.FancyAnniversaryCountDown {
  position: absolute;
  margin-left: 26px;
  margin-top: 50px;
  font-family: courier new;
  color: #5A2800;
  text-align: center;
}
.FancyAnniversaryCountDown .CountDownLabel {
  width: 28px;
  text-align: center;
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 8pt !important;
  margin-top: 2px;
}
.FancyAnniversaryCountDown .Number {
  float: left;
  width: 12px;
  text-align: right;
}
.FancyAnniversaryCountDown .NumberSecond {
  margin-left: 1px;
}
.FancyAnniversaryCountDown .Number > span {
  background-repeat: no-repeat;
  display: block;
  height: 21px;
  width: 14px;
}
.FancyAnniversaryCountDown .Separator {
  float: left;
  position: relative;
  display: inline-block;
  top: 2px;
  width: 3px;
  height: 21px;
  margin-left: 3px;
  margin-right: 2px;
}
</style>
<div id="ThemeboxesColumn">
<div id="Themeboxes">
<div id="AnniversaryCountDownBox" class="Themebox" style="background-image:url(https://a248.e.akamai.net/cipsoft.download.akamai.com/118500/tibia/static.tibia.com/images/global/themeboxes/anniversary/tibia-anniversary-countdown.png);">
       <div class="FancyAnniversaryCountDown">
         <div class="Number NumberFirst"><span class="DaysFirst"></span><div class="CountDownLabel">days</div></div>
         <div class="Number NumberSecond"><span class="DaysLast"></span></div>
         <div class="Separator"></div>
         <div class="Number NumberFirst"><span class="HoursFirst" ></span><div class="CountDownLabel">hrs</div></div>
         <div class="Number NumberSecond"><span class="HoursLast" ></span></div>
         <div class="Separator"></div>
         <div class="Number NumberFirst"><span class="MinutesFirst"></span><div class="CountDownLabel">mins</div></div>
         <div class="Number NumberSecond"><span class="MinutesLast"></span></div>
         <div class="Separator"></div>
         <div class="Number NumberFirst"><span class="SecondsFirst"></span><div class="CountDownLabel">secs</div></div>
         <div class="Number NumberSecond"><span class="SecondsLast"></span></div>
       </div>
       <div class="Bottom" style="background-image:url(https://a248.e.akamai.net/cipsoft.download.akamai.com/118500/tibia/static.tibia.com/images/global/general/box-bottom.gif);"></div>
     </div>
     </div>
</div>
 
Last edited by a moderator:
copy that file into your document, edit a few lines on the top and done.
 
i Can edit Date here?

var g_AnniversaryDate = new Date(2017, 00, 07, 10, 00, 00); // careful! January hat the number "0"

I need put to day 18/03/207 - 20:00 i can use it?
var g_AnniversaryDate = new Date(2017, 03, 18, 20, 00, 00); // careful! January hat the number "0"
 
exactly, but you should know that the 12 months start from 0 so march will be 2
 
it Dont show Countdonw :(

Maybe need edit it?
if (g_Now < 1483779600 && g_Now > 1482138000) {
// do not display after 10:00:00 07.01.2017 (CET) (1483779600)
// do not display before 10:00:00 19.12.2016 (CET) (1482138000)
 
that line is from tibia, it means that between those days the counter would work
 

Similar threads

J
  • Question
gallery stopped working -oldschool znoteacc
Replies
3
Views
309
Jeyci
J
V
  • Question
AAC reset system geisor
Replies
0
Views
288
vitorelias1
V
Hokku
  • Question
Featured article problem with db
Replies
2
Views
304
Hokku
Hokku
J
  • Question
PHP castle war widget
Replies
3
Views
512
jel
J
blokerzinha
  • Question
Problem with the wrong player appearing as top even though he is not. Znote
Replies
1
Views
332
blokerzinha
blokerzinha
Back
Top