RazaHuss RazaHuss - 7 months ago 13
Javascript Question

How do I move the javascript from the body element into a specific div element?

I'm having issues with a javascript countdown I am using. I've placed the code within a certain div in my .html file, however the countdown is showing within the bottom of the body element, when I need it to show in a div inside of a certain section. I've tried everything I possibly could but I am just getting started in javascript. Any input would be great.

<section id="information">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Countdown to our Wedding Date!</h2>
<div id="countdown">

<script type="text/javascript">
var ringer = {
countdown_to: "11/24/2016",
rings: {
'DAYS': {
s: 86400000, // mseconds in a day,
max: 365
},
'HOURS': {
s: 3600000, // mseconds per hour,
max: 24
},
'MINUTES': {
s: 60000, // mseconds per minute
max: 60
},
'SECONDS': {
s: 1000,
max: 60
},
},
r_count: 4,
r_spacing: 10, // px
r_size: 100, // px
r_thickness: 2, // px
update_interval: 11, // ms

init: function(){

$r = ringer;
$r.cvs = document.createElement('canvas');

$r.size = {
w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)),
h: ($r.r_size + $r.r_thickness)
};

$r.cvs.setAttribute('width',$r.size.w);
$r.cvs.setAttribute('height',$r.size.h);
$r.ctx = $r.cvs.getContext('2d');
$("#countdown").append($r.cvs);
$r.cvs = $($r.cvs);
$r.ctx.textAlign = 'center';
$r.actual_size = $r.r_size + $r.r_thickness;
$r.countdown_to_time = new Date($r.countdown_to).getTime();
$r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
$r.go();
},
ctx: null,
go: function(){
var idx=0;

$r.time = (new Date().getTime()) - $r.countdown_to_time;


for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);

setTimeout($r.go,$r.update_interval);
},
unit: function(idx,label,ring) {
var x,y, value, ring_secs = ring.s;
value = parseFloat($r.time/ring_secs);
$r.time-=Math.round(parseInt(value)) * ring_secs;
value = Math.abs(value);

x = ($r.r_size*.5 + $r.r_thickness*.5);
x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
y = $r.r_size*.5;
y += $r.r_thickness*.5;

// calculate arc end angle
var degrees = 270-(value / ring.max) * 360.0;
var endAngle = degrees * (Math.PI / 180);

$r.ctx.save();

$r.ctx.translate(x,y);
$r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

// first circle
$r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
$r.ctx.beginPath();
$r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
$r.ctx.lineWidth =$r.r_thickness;
$r.ctx.stroke();

// second circle
$r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)";
$r.ctx.beginPath();
$r.ctx.arc(0,0,$r.r_size/2,3*Math.PI/2,0,endAngle, 1);
$r.ctx.lineWidth =$r.r_thickness;
$r.ctx.stroke();

// label
$r.ctx.fillStyle = "#ffffff";

$r.ctx.font = '12px Helvetica';
$r.ctx.fillText(label, 0, 23);
$r.ctx.fillText(label, 0, 23);

$r.ctx.font = 'bold 40px Helvetica';
$r.ctx.fillText(Math.floor(value), 0, 10);

$r.ctx.restore();
}
}

ringer.init();
</script>
</div>

</div>
</div>
</div>
</section>


p.s. The javascript code is from http://codepen.io/lawrencealan/pen/cdwhm

my codepen: http://codepen.io/razahuss/pen/qZKBKQ

Answer

change this line:

$("#countdown").append($r.cvs);

to this:

$("#countdown").html($r.cvs);

Also, you should add a height value to your countdown div to make sure it doesn't collapse, replacing the opening tag with this:

<div id="countdown" style="height: 450px">