[Countdown Clock] Discussion

[Countdown Clock] Discussion

  
Forge Component
(5)
Published on 2014-06-02 by Paulo Ramos
5 votes
Published on 2014-06-02 by Paulo Ramos
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
Ricardo,

Change the script in the webblock like this .... See http://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>
"
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
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
Hello Ricardo,

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

Regards and enjoy
Hugo Pinheiro
Hi,

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

Best Regads,
Frederico Fernandes
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
Thanks Miguel.
morning how do edit date on my image on the countdown date