[Countdown Clock] Discussion

Ricardo Reis

Question

Hi Hugo Pinheiro,

I'm developing an application where this widget will be very useful.
However, it has a little big problem: the image has the words "Days", "Minutes", etc. in English, and one of my application's requirements states that all texts and expressions must be written in Portuguese. Besides, the picture's dimensions are not the ones that I need.

Is it possible for you to provide me with the Countdown image so I can edit it myself, in order to best adapt it to my application's layout (specially because of the picture's dimensions)?

Thanks in advance for any help,
Ricardo Reis

25 Feb 2011

Joop Stringer

Ricardo,

Change the script in the webblock like this .... See https://keith-wood.name/countdown.html (there are a lot of international JS files there)

"<script type='text/javascript'>
$(function () {
    "+If(UntilDate<>NullDate(),
        "var untilDate = new Date("+Year(UntilDate)+","+(Month(UntilDate)-1)+","+Day(UntilDate)+");
        $('#"+defaultCountdown.Id+"').countdown({
            until:untilDate
            ,labels: ['Anos', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos']
            ,labels1: ['Anos', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos']
            ,compactLabels: ['a', 'm', 's', 'd']
            ,whichLabels: null
            ,timeSeparator: ':'
            , isRTL: false });",
    "var untilText = '"+UntilText+"';
     if(untilText!=' ')
        $('#"+defaultCountdown.Id+"').countdown({
            until:untilText
            ,labels: ['Anos', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos']
            ,labels1: ['Anos', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos']
            ,compactLabels: ['a', 'm', 's', 'd']
            ,whichLabels: null
            ,timeSeparator: ':'
            ,isRTL: false});
     else
        Alert('You need to define a valid date!');
    ")+"
});

</script>"

26 Feb 2011

Hugo Pinheiro

Staff

Hello,

Thanks Joop for the help, the Countdown clock dont use images is all about CSS, so you can change width, height, background color whatever you want.

Regards
Hugo Pinheiro

26 Feb 2011

Ricardo Reis

Hi Hugo and Joop,

I really thought it was an image because I opened the eSpace and saw the countdown picture in the Images folder, so I thought I couldn't change it.
So, it's all about CSS, isn't it?

By the way, I've already checked that site out and it seems to be very useful. Thanks, Joop.

Best regards,
Ricardo Reis

26 Feb 2011

Hugo Pinheiro

Staff

Hello Ricardo,

Yes is all about CSS and jQuery, the image on the eSpace folder is only an example.

Regards and enjoy
Hugo Pinheiro

26 Feb 2011

Frederico Fernandes

Hi,

I want to know when the clock reach 0 to diplay an action, how can i do that?

Best Regads,
Frederico Fernandes

05 Jan 2012

2 replies

Last reply 05 Jan 2012

Show thread

Hide thread

Miguel Antunes

Hello Frederico,

with a bit of personalization is it possible to do that.

replace the script expression in the component with this one:

"<script type='text/javascript'>
$(function () {  
    "+If(UntilDate<>NullDate(),
        "var untilDate = new Date("+Year(UntilDate)+","+(Month(UntilDate)-1)+","+Day(UntilDate)+");
        $('#"+defaultCountdown.Id+"').countdown({until:untilDate, onExpiry: liftOff});",
    "var untilText = '"+UntilText+"';
     if(untilText!=' ') 
        $('#"+defaultCountdown.Id+"').countdown({until:untilText, onExpiry: liftOff});
     else 
        Alert('You need to define a valid date!');
     ")+"
});


function liftOff() { 
    osjs('#"+BUTTON_OR_LINK_TO_CLICK.Id+"').click(); 
} 

</script>"

my changes are marked as bold, so a little explanation, you need to add a link (make it hidden), give it a name and replace BUTTON_OR_LINK_TO_CLICK with that name, link the link to your action, and you're done.

regards,
Miguel

05 Jan 2012

Frederico Fernandes

Thanks Miguel.

05 Jan 2012

Brilliant Nyanise

morning how do edit date on my image on the countdown date

08 Sep 2015

Lia

Hi,

I also have a requirement to trigger an action once the clock is reaching 0. Reading the solution above, I have created 1 link in the CountDown web block, name it to NewLink. The link calls a screen action. Then I changed the script as adviced:

function liftOff() { 
    osjs('#"+NewLink.Id+"').click(); 
}

But it didn't trigger anything. Did I skip something on the implementation? Please kindly advice.

Thnx.

03 Jun 2018

Imelda Nugraha

It turned out I skipped some part of the script. It works.

Thank you.

04 Jun 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines