Positioning

Although the counters do not have positioning styles implemented by default, there is a rather simple way of aligning them on a page. Inspect the .canvas_wrapper elements to see the secondary .align_left, .align_center, or .align_right classes. Do not forget that the canvas wrappers (.canvas_wrapper) must have a set width, otherwise the margins will not take effect.

.align_center {
	margin: 0 auto 0 auto;
}

.align_left {
	margin: 0 0 0 0;
}

.align_right {
	margin: 0 0 0 auto;
}
An example of how i've setup with widths of the counter wrappers.
<div id='canvas_wrapper' class='canvas_wrapper align_center' style='width: 200px'>
...
</div>

Center Alignment

Using .align_center class.

<div id='canvas_wrapper' class='canvas_wrapper align_center' style='width: 200px'>
	<canvas id='tutorial' width='200' height='200'></canvas>
	<div id='canvas_content'><span id='year'>2</span><span id='year_suffix'>yrs</span>
</div>

2 yrs

Left Alignment

Using .align_left class.

<div id='canvas_wrapper2' class='canvas_wrapper align_left' style='width: 200px'>
	<canvas id='tutorial2' width='200' height='200'></canvas>
	<div id='canvas_content'><span id='year'>2</span> <span id='year_suffix'>yrs</span></div>
</div>

2 yrs

Right Alignment

Using .align_right class.

<div id='canvas_wrapper3' class='canvas_wrapper align_right' style='width: 200px'>
	<canvas id='tutorial3' width='200' height='200'></canvas>
	<div id='canvas_content'><span id='year'>2</span> <span id='year_suffix'>yrs</span></div>
</div>

2 yrs

Customizations

Angles

The initial_angle and final_angle options allow for finite control over the angles at which the arc is drawn. The angles don't have to be determined by a clock. From index.js...

var angle_counter = new FHCounterClass( 'tutorial4' );
angle_counter.set_arc_properties({
	'stroke_color': 'red',
	'initial_angle': Math.PI / 2.0, // approx. 90 degrees
	'final_angle': Math.PI * ( 5/4 ), // approx. 135 degrees
	'bg_stroke_color': '#eee',
	'stroke_width': 20
});
angle_counter.draw_arc();

2 yrs

Background Arc

The background arc's color can be modified. Its stroke width is determined by the stroke_width option (used for the foreground arc as well).

var bg_color_counter = new FHCounterClass( 'tutorial5' );
bg_color_counter.set_arc_properties({
	'stroke_color': 'red',
	'initial_angle': Math.PI / 2.0,
	'final_angle': Math.PI * ( 5/4 ),
	'bg_stroke_color': '#444',
	'stroke_width': 20
});
bg_color_counter.draw_arc();

2 yrs

Of course, the background arc can be disabled instead.

var bg_disabled_counter = new FHCounterClass( 'tutorial6' );
bg_disabled_counter.set_arc_properties({
	'stroke_color': 'red',
	'initial_angle': Math.PI / 2.0,
	'final_angle': Math.PI * ( 5/4 ),
	'bg_stroke': false,
	'stroke_width': 20
});
bg_disabled_counter.draw_arc();

2 yrs

Text Manipulation

By default, the inner text of the counter is automatically updated by the counter's date settings. The year_text and year_suffix options can be modified to output any text into the counter. Just be careful when outputting large amounts of text into a small counter. Overflow will occur.

var text_counter = new FHCounterClass( 'tutorial7' );
text_counter.set_arc_properties({
	'stroke_color': 'grey',
	'initial_angle': Math.PI / 2.0,
	'final_angle': Math.PI * ( 5/4 ),
	'year_text': ':',
	'year_suffix': 'D',
	'bg_stroke_color': '#eee',
	'stroke_width': 20
});
text_counter.draw_arc();

2 yrs

Rotation and Speed

The counter can be customized to animate in the clockwise or the counter-clockwise direction using the anti_clockwise option. True indicates that counter-clockwise will the animation direction and false indicates clockwise. The speed of the animation can be determined by the anim_speed option. The higher the number, the longer the animation takes to complete.

var rot_and_speed_counter = new FHCounterClass( 'tutorial8' );
rot_and_speed_counter.set_arc_properties({
	'stroke_color': '#ff6700',
	'initial_angle': 0,
	'final_angle': 2 * Math.PI * ( 3/4 ),
	'year_text': 'slowmo',
	'year_suffix': '',
	'anim_speed': 1000,
	'anti_clockwise': false,
	'bg_stroke_color': '#eee',
	'stroke_width': 20
});
rot_and_speed_counter.draw_arc();

2 yrs

Option List


Property Name Purpose Default
stroke_width (int) the width of the arc 10 (px)
stroke_color (string) the color of the arc  "#fde244"
bg_stroke (bool) whether or not a background arc is drawn  true
bg_stroke_color (string) the color of the background arc  "#222222"
start_year (object) the reference year  Date object of 08/02/2012
year (object) the variable year (this changes)  Date object of 08/02/2012
year_text (string) part of the text displayed in the counter (i.e. the "2" in "2 yrs")  depends on start_year & year options
year_suffix (string) part of the text displayed in the counter (i.e. the "yrs" in " 2 yrs")  "yr"
x (int) the x-coordinate of the origin of the arc  half the width of the arc (px)
y (int) the y-coordinate of the origin of the arc  half the height of the arc (px)
radius (int) the radius of the arc  half the width of the arc minus 10 (px)
initial_angle (int) the angle that the arc starts drawing from; depends on the start_year & year options  0 (radians)
final_angle (int) the angle that the arc finishes drawing at; depends on the start_year & year options  2 * Math.PI (radians)
anti_clockwise (bool) whether or not the arc draws counter-clockwise  true
anim_speed (int) the speed of the animation, larger numbers take longer  30