Joomla Templates Club 406,261 posts

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#185695

Hello,

we are trying to use countdown (very beautiful module) in a small module (see sreenshot in attachement).
But it is not working very well.

So my question is : how to resize manually the size of the 4 circles ?
We found the way to do this for the texte but not for the circles.

Thank in advance for any help.

---

Attachments:

1. 

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#485982

Hello dieudonne,

The circles are background images, so they’re fixed in width and height. You can’t change them.

Regards.

1 user says Thank You to Stork11 for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486056

Thank for your answer.

So maybe I can change the background image…
In which file these images are loaded ?

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#486132

Hello dieudonne,

You don’t only resize background but also need to customize javascript code a lot.

I am sorry to inform that we can’t support customization as it is beyond the support scope.

Regards.

1 user says Thank You to Stork11 for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#486379

Ok, thank for your explanation.

For other people who want a small countdown, try OSTimer :
http://extensions.joomla.org/extensions/calendars-a-events/events/countdown/11723

1 user says Thank You to dieudonne for this useful post

1. JA Developer

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#486868

Hello,

I also did need a smaller countdown.

Using Layout 1, I changed in tmpl/layout1/layout.php :
<canvas id=”canvas_days” width=”188″ height=”188″>
to
<canvas id=”canvas_days” width=”120″ height=”120″>

I also changed in tmpl/layout1/js/jacclock.js :
return (Math.PI/180)*deg – (Math.PI/180)*90
to
return (Math.PI/120)*deg – (Math.PI/120)*60

and :
var clock = {
set: {
days: function(){
var cdays = $jacd(“#canvas_days”).get(0);
var ctx = cdays.getContext(“2d”);
ctx.clearRect(0, 0, cdays.width, cdays.height);
ctx.beginPath();
ctx.strokeStyle = glob.daysColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.daysGlow;

ctx.arc(94,94,85, deg(0), deg((360/glob.total)*(glob.total – glob.days)));
ctx.lineWidth = 17;
ctx.stroke();
$jacd(“.clock_days .val”).text(glob.days);
},

hours: function(){
var cHr = $jacd(“#canvas_hours”).get(0);
var ctx = cHr.getContext(“2d”);
ctx.clearRect(0, 0, cHr.width, cHr.height);
ctx.beginPath();
ctx.strokeStyle = glob.hoursColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.hoursGlow;

ctx.arc(94,94,85, deg(0), deg(15*glob.hours));
ctx.lineWidth = 17;
ctx.stroke();
$jacd(“.clock_hours .val”).text(24 – glob.hours);
},

minutes : function(){
var cMin = $jacd(“#canvas_minutes”).get(0);
var ctx = cMin.getContext(“2d”);
ctx.clearRect(0, 0, cMin.width, cMin.height);
ctx.beginPath();
ctx.strokeStyle = glob.minutesColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.minutesGlow;

ctx.arc(94,94,85, deg(0), deg(6*glob.minutes));
ctx.lineWidth = 17;
ctx.stroke();
$jacd(“.clock_minutes .val”).text(60 – glob.minutes);
},
seconds: function(){
var cSec = $jacd(“#canvas_seconds”).get(0);
var ctx = cSec.getContext(“2d”);
ctx.clearRect(0, 0, cSec.width, cSec.height);
ctx.beginPath();
ctx.strokeStyle = glob.secondsColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.secondsGlow;

ctx.arc(94,94,85, deg(0), deg(6*glob.seconds));
ctx.lineWidth = 17;
ctx.stroke();

$jacd(“.clock_seconds .val”).text(60 – glob.seconds);
}
},

to :
var clock = {
set: {
days: function(){
var cdays = $jacd(“#canvas_days”).get(0);
var ctx = cdays.getContext(“2d”);
ctx.clearRect(0, 0, cdays.width, cdays.height);
ctx.beginPath();
ctx.strokeStyle = glob.daysColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.daysGlow;

ctx.arc(60,60,50, deg(0), deg((360/glob.total)*(glob.total – glob.days)));
ctx.lineWidth = 8;
ctx.stroke();
$jacd(“.clock_days .val”).text(glob.days);
},

hours: function(){
var cHr = $jacd(“#canvas_hours”).get(0);
var ctx = cHr.getContext(“2d”);
ctx.clearRect(0, 0, cHr.width, cHr.height);
ctx.beginPath();
ctx.strokeStyle = glob.hoursColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.hoursGlow;

ctx.arc(60,60,50, deg(0), deg(10*glob.hours));
ctx.lineWidth = 8;
ctx.stroke();
$jacd(“.clock_hours .val”).text(24 – glob.hours);
},

minutes : function(){
var cMin = $jacd(“#canvas_minutes”).get(0);
var ctx = cMin.getContext(“2d”);
ctx.clearRect(0, 0, cMin.width, cMin.height);
ctx.beginPath();
ctx.strokeStyle = glob.minutesColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.minutesGlow;

ctx.arc(60,60,50, deg(0), deg(4*glob.minutes));
ctx.lineWidth = 8;
ctx.stroke();
$jacd(“.clock_minutes .val”).text(60 – glob.minutes);
},
seconds: function(){
var cSec = $jacd(“#canvas_seconds”).get(0);
var ctx = cSec.getContext(“2d”);
ctx.clearRect(0, 0, cSec.width, cSec.height);
ctx.beginPath();
ctx.strokeStyle = glob.secondsColor;

ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = glob.secondsGlow;

ctx.arc(60,60,50, deg(0), deg(4*glob.seconds));
ctx.lineWidth = 8;
ctx.stroke();

$jacd(“.clock_seconds .val”).text(60 – glob.seconds);
}
},

The rest is just some CSS and images.

It seems to work fine, only bug I have, is that I have no circle around the days, but I allready had that bug before making those changes..

Hope this will help,
Best regards,
David aka Shapes

3 users say Thank You to David Porré for this useful post

1. JA Developer
2. tfosnom
3. dieudonne

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#487278

@david

I have been doing the same mods and finally got the ‘days’ to display etc., then at 2 am changed something and now it doesn’t display the circle again, did you ever figure it out and can point me to what’s wrong?

I have made mine into a module that can be installed if you want to PM me your email I’ll send it through to you for evaluation.

Cheers Shannon

[krautela Friend krautelaJoin date: February 2009Posts: 4Downloads:0Uploads:1]

#513808

There seems to be a few more bugs in the module code :
1) Layout 1 :
jnow is not declared at line 138
2) if the event start time and end time are different then countdown goes to event end time!! in fact event end time looks superflous for countdown.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#514303

Hi krautela,

<blockquote>jnow is not declared at line 138</blockquote>

It’s a bug of this module, you can open that jacclock.js file and change from:

now : jnow?jnow:jacdnow,

To

now : (typeof jnow != ‘undefined’ && jnow)?jnow:jacdnow,

Regards

[Author]

Posts