Hi Admins,
what do I need to do to have the Countdown of the FEST Template in the Rockwall Template.
I would like to have it on the Search Module Position.
Thank in advance.
Regards,
Koko
<div class="gk-animation" data-height="530">
<div class="gk-animation-wrap">
<div class="gka-bg">Background</div>
<h2 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="200" data-time="500">Festival 21 Feb. - 27 Feb. 2012</h2>
<h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Festival Musico</h1>
<div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
<div class="gk-jscounter gk-scale-up" data-dateend="21-06-2013" data-timeend="19:42" data-timezone="+2" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="900" data-time="500">Counting finished!</div>
<div class="gk-guitar" data-start="{opacity: 0, right: '-200px'}" data-end="{opacity: 1, right: 0}" data-delay="900" data-time="450">Guitar</div>
<a class="gk-ticket" href="#" data-start="{opacity:0, top: '45px'}" data-end="{opacity:1, top: 0}" data-delay="1300" data-time="450"> <strong>Get a ticket</strong> <small>Authentic Tickets on Time or Your Money Back!</small> </a></div>
</div>
<div class="gk-jscounter gk-scale-up" data-dateend="21-06-2013" data-timeend="19:42" data-timezone="+2" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="900" data-time="500">Counting finished!</div>
var GKCounter = new Class({
final: null,
element: null,
finalText: '',
dcount: null,
hcount: null,
mcount: null,
scount: null,
tempDays: 0,
tempHours: 0,
tempMins: 0,
tempSecs: 0,
initialize: function(el) {
// set the element handler
this.element = el;
// get the date and time
var dateEnd = this.element.get('data-dateend');
var timeEnd = this.element.get('data-timeend');
// parse the date and time
dateEnd = dateEnd.split('-');
timeEnd = timeEnd.split(':');
// get the timezone of the date
var dateTimezone = -1 * parseInt(this.element.get('data-timezone'), 10) * 60;
// calculate the final date timestamp
this.final = Date.UTC(dateEnd[2], (dateEnd[1] * 1) - 1, dateEnd[0], timeEnd[0], timeEnd[1]);
//
// calculate the final date according to user timezone
//
// - get the user timezone
var tempd = new Date();
var userTimezone = tempd.getTimezoneOffset();
var newTimezoneOffset = 0;
// if the timezones are equal - do nothing, in the other case we need calculations:
if(dateTimezone !== userTimezone) {
newTimezoneOffset = userTimezone - dateTimezone;
// calculate new timezone offset to miliseconds
newTimezoneOffset = newTimezoneOffset * 60 * 1000;
}
// calculate the new final time according to time offset
this.final = this.final + newTimezoneOffset;
//
// So now we know the final time - let's calculate the base time for the counter:
//
// create the new date object
var d = new Date();
// calculate the current date timestamp
var current = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
//
// calculate the difference between the dates
//
var star_value = 750000;
var end_value = 1000000;
var my_money_diffrence = end_value - star_value;
var start_pointer = 1369166957000;
var end_pointer = this.final;
var my_date_difference = this.final - start_pointer;
var my_divided = my_date_difference / my_money_diffrence;
var my_number = star_value + ((current - start_pointer) / my_divided);
my_number = Math.round(my_number);
console.log(my_number);
var diff = this.final - current;
// if the difference is smaller than 3 seconds - then the counting was ended
if(diff < 30 * 1000) {
this.finalText = this.element.innerHTML;
this.element.innerHTML = '';
this.countingEnded();
} else {
// in other case - let's calculate the difference in the days, hours, minutes and seconds
var leftDays = 0;
var leftHours = 0;
var leftMinutes = 0;
var leftSeconds = 0;
leftDays = Math.floor((1.0 * diff) / (24 * 60 * 60 * 1000));
var tempDiff = diff - (leftDays * 24 * 60 * 60 * 1000);
leftHours = Math.floor(tempDiff / (60 * 60 * 1000));
tempDiff = tempDiff - (leftHours * 60 * 60 * 1000);
leftMinutes = Math.floor(tempDiff / (60 * 1000));
tempDiff = tempDiff - (leftMinutes * 60 * 1000);
leftSeconds = Math.floor(tempDiff / 1000);
// initialize the structure
this.initCounter();
// set the counter handlers
this.dcount = this.element.getElement('.gk-jscounter-days strong');
this.hcount = this.element.getElement('.gk-jscounter-hours strong');
this.mcount = this.element.getElement('.gk-jscounter-min strong');
this.scount = this.element.getElement('.gk-jscounter-sec strong');
// run the initial animation
this.tick();
}
},
// function used to create the counter structure
initCounter: function() {
// init the structure
this.finalText = this.element.innerHTML;
// get the texts translations (if available)
var dtext = this.element.get('data-daystext') || "days";
var htext = this.element.get('data-hourstext') || "hours";
var mtext = this.element.get('data-mintext') || "min.";
var stext = this.element.get('data-sectext') || "sec.";
//
this.element.set('html', '<div class="gk-jscounter-days"><strong>00</strong><small>' + dtext + '</small></div><div class="gk-jscounter-hours"><strong>00</strong><small>' + htext + '</small></div><div class="gk-jscounter-min"><strong>00</strong><small>' + mtext + '</small></div><div class="gk-jscounter-sec"><strong>00</strong><small>' + stext + '</small></div>');
},
// function used to tick the counter ;-)
tick: function() {
// create the new date object
var d = new Date();
// calculate the current date timestamp
var current = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
//
// calculate the difference between the dates
//
var diff = this.final - current;
// if the difference is smaller than 1 second - then the counting was ended
if(diff < 1 * 1000) {
this.countingEnded();
} else {
// in other case - let's calculate the difference in the days, hours, minutes and seconds
var leftDays = 0;
var leftHours = 0;
var leftMinutes = 0;
var leftSeconds = 0;
leftDays = Math.floor((1.0 * diff) / (24 * 60 * 60 * 1000));
var tempDiff = diff - (leftDays * 24 * 60 * 60 * 1000);
leftHours = Math.floor(tempDiff / (60 * 60 * 1000));
tempDiff = tempDiff - (leftHours * 60 * 60 * 1000);
leftMinutes = Math.floor(tempDiff / (60 * 1000));
tempDiff = tempDiff - (leftMinutes * 60 * 1000);
leftSeconds = Math.floor(tempDiff / 1000);
this.dcount.set('text', ((leftDays < 10) ? '0' : '') + leftDays);
this.hcount.set('text', ((leftHours < 10) ? '0' : '') + leftHours)
this.mcount.set('text', ((leftMinutes < 10) ? '0' : '') + leftMinutes)
this.scount.set('text', ((leftSeconds < 10) ? '0' : '') + leftSeconds);
var $this = this;
setTimeout(function() {
$this.tick();
}, 1000);
}
},
// function used when the time is up ;-)
countingEnded: function() {
// set the H3 element with the final text
this.element.set('html', '<h3>' + this.finalText + '</h3>');
}
});
window.addEvent('load', function() {
setTimeout(function() {
if(document.getElement('.gk-jscounter')) {
document.getElements('.gk-jscounter').each(function(el, i) {
new GKCounter(el);
});
}
}, 250);
});