I have a local web server on a raspberry pi that I am using as a kiosk for rotating photos. I am also trying to include the coolclock.js script on the page which I do have working, but I would like the canvas that the clock lives in to move when the photo changes so it doesn't get burned in on the TV that the pi is hooked up to. I cannot get the clock to move on the page though...
function rotateImages() {
var canvas = document.getElementById('clockid');
alert(canvas.style.top);
alert(canvas.style.left);
if(last==1){
document.body.style.backgroundImage='url('+preloads2.src+')';
num=Math.floor(Math.random()*preloads.length);
preloads1.src=preloads[num];
last=2;
canvas.style.top = '0px';
canvas.style.left = '0px';
}
else{
document.body.style.backgroundImage='url('+preloads1.src+')';
num=Math.floor(Math.random()*preloads.length);
preloads2.src=preloads[num];
last=1;
canvas.style.top = '500px';
canvas.style.left = '500px';
}
}
var myVar=setInterval(function(){rotateImages()}, speed);
</script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="coolclock.js" type="text/javascript"></script>
<script src="moreskins.js" type="text/javascript"></script>
</head>
<body onload="CoolClock.findAndCreateClocks()">
<canvas id="clockid" class="CoolClock::50::-4"></canvas>
</body>
</html>
The clock works, the images rotate, and the alerts show that the style.left and top are changing the way I would expect, but the clock doesn't budge. Do I have to update or refresh something in order to activate the new position? I've found lots of things that explain how to move elements around that are coded (i think) the same as I have, but no examples of canvases specifically - so maybe a canvas doesn't work this way?
Thanks!
You have to make sure that you canvas has style position, and its value should be fixed, absolute or relative, so the style.left/right/top/bottom would work. If you don't assign any position value to the canvas's style, it's default is static. And the top, right, bottom, left and z-index properties do not apply on elements whose position is static.
I've created a snippet to show how that works. You can find more from MDN-style-position
var i;
var cv, ctx, grd;
for (i = 1; i <= 3; ++i) {
cv = document.getElementById('move' + i);
ctx = cv.getContext('2d');
grd = ctx.createRadialGradient(75, 75, 10, 75, 75, 75);
grd.addColorStop(0, 'red');
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'yellow');
grd.addColorStop(0.6, 'green');
grd.addColorStop(0.8, 'blue');
grd.addColorStop(1, 'purple');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 150, 150);
}
var last = false;
// Alter each canvas' top style to change its position.
setInterval(function(){
var cv, ctx, grd;
var top = last ? '300px': '';
last = !last;
for (i = 1; i <= 3; ++i) {
cv = document.getElementById('move' + i);
cv.style.top = top;
}
}, 1000);#move1 {}
#move2 {
position: relative;
}
#move3 {
position: absolute;
}<canvas id="move1" width="150" height="150"></canvas><!-- position is default: static -->
<canvas id="move2" width="150" height="150"></canvas><!-- position is relative-->
<canvas id="move3" width="150" height="150"></canvas><!-- position is absolute -->Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments