Better way to set width?

This site is best viewed in a modern browser with JavaScript enabled.

WayneISWayne

Is there a more efficient way of setting the width of DOM elements like this? The code is running at 60fps and the framerate is pretty much up and down. Should I use Canvas for this or is there a better way?

JavaScript code:

var value = 50,
     bar = document.getElementById('bar').style;

function loop() {
Math.random() < 0.5 ? value += 3 : value -= 7;
bar.width = value + "%"
setTimeout(loop,16); // run at 60 fps
}

loop();

HTML code:

<div id="bar"></div>

iBeZi

Using requestAnimationFrame might make things a little smoother

<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

var value = 50,
     bar = document.getElementById('bar').style;

function loop() {
    Math.random() < 0.5 ? value += 3 : value -= 7;
    bar.width = value + "%"
    window.requestAnimationFrame(loop);
}

loop();
</script>

WayneISWayne

I tried it, but the the same performance drop pretty much. Do you think making this in Canvas is better?

root

Word of note... You can not set a frames per second nor can you create a way of making it appear to run at a desired frames per second.

The reason is that each computer you run the script on will not run at the same speed. A 3 Ghz processor is faster than a 2 Ghz processor by a factor of 50% or a 1/3rd slower, either way you can not factor in a test for speed.

You could use the CSS3 transition methods, plenty of examples out on the net for that method.

WayneISWayne

But how can I use CSS3 transitions for this? It's only setting the width.

simar

With the help of properties of the page then we can change the width of any thing......