FEST Countdown in Rockwall Template

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

1. Copy custom html module
2. Copy part of js file that makes it work (/templates/gk_fest/js/gk.scripts.js)
3. Copy styling from .css files.

Its just draft of what You need to do.

Hello Cyberek,
I was trying (I guess) to achieve the same result.
I'd need a countdown timer in one of the Intro slides (GK Image Show) of Creativity template.
Could you please address me to the right solution?
Do I have to download and install FEST quickstart to find out the HTML custom module or I can get it somehow differently?
Thank you very much

Matteo

Sorry but we don't provide support for this kind of customization. I have pointed necessary steps, but to do them right you need to have knowledge on html, css and jQuery or ask any freelancer frontend developer for help.

Hello Cyberek,
sorry...I did not mean to ask you for solving my problem, just to point me out where to find the custom HTML module and the .js of FEST template. Having installed the Creativity template, I was just wandering if there's a shorter way to find the module or if I have to download the whole template and find them out from there.

The easiest way would be to download FEST and find all the informations, but I can give you small kickstart:

Code: Select all

<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>


Probably you don't need all of that as it includes custom animations on showing, some custom graphics etc. The countdown line is this one:

Code: Select all

<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>


Now you need gkCounter class that goes into gk.scripts.js:

Code: Select all

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>');
   }
});


And finally it needs to be called on dom ready:

Code: Select all

window.addEvent('load', function() {
   setTimeout(function() {
      if(document.getElement('.gk-jscounter')) {
         document.getElements('.gk-jscounter').each(function(el, i) {
            new GKCounter(el);
         });
      }
   }, 250);
});


The code is taken from FEST theme, and might require some tweaking. Please write back if this helped you and was enough to make countdown work.

Great!
Thank you very much, this is what I was meaning.
Don't know if I'll do something good with that, but is what I was looking for.
I'll give my skills a test and I'll be back with my comments as soon as I can.


Matteo

Hello Cyberek,
the code and the working countdown went up as a piece of cake! Thank you very much!
Unfortunately I've not been able to set it as one of the intro slides of Creativity...
I tried to load the countdown module in an article, then use the "article" feature og GK Image Show.
What happened is the visualization of a "system error slide" telling me that only text slides are allowed...
...do you know if there is a workaround that I can use?

Thank you again

Matteo

Could you describe steb by step what you did (screenshots might be helpful).

Here's what I did:

1 - created the custom HTML module giving it a "countdown" position

1.jpg

2 - created the article named Countdown having as content {loadposition countdown}

2.jpg

3 - modified the Intro GK4 Image Show using for the second slide, the option "article" instead of "text"

3.jpg

4 - reloaded the homepage I got the "error" slide you can see in img 4.jpg (in the next post due to attachment limit)

Thank you for your help,

Matteo

4.jpg

Sadly, this will not work that way - IS will work correctly only with simple modules /

Sorry, but a bit too criptic for me
You mean there's no way to have the countdown on intro slides (IS powered) or that there is a way but not the one I used?

Thank you,

Matteo

No, Image Show is not able to render that complicated mockup .

I see.
Thank you anyway for your kind and precious support...I'll find a different way to use at best the countdown module!

Matteo

You might just put it under ImageShow module as a single custom_html module.

@cyberek: is what I did...but I would have liked to have it as part of the slideshow...

Thank you anyway!

M