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.
here is the code: [HTML] <script> $(document).ready(function() { // initialize anniversary count down - Pastebin.com
really easy to install so thats all, good bye.
If you dont know what I am talking about, here is a pic.
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: