sitemap | terug naar het html5 referentie - tags - overzicht
Op moment van schrijven is het nog niet erg handig om de progress-tag "voluit" bij elke gelegenheid te gebruiken. Hierboven is niet veel méér gebeurd dan (een "magere" actie..) 66% op het scherm te zetten (check dit voorbeeld maar eens met een recente opera-browser). Tot het moment dat er een goede toepassing voor "progress" voorhanden is, zal ik de vervangende (cross browser) html(4) procedure op deze pagina plaatsen.
<div id="progress_bar">
<div id="progress_indicator"></div>
</div>
<div id="progress_">0</div>
<style>
#progress_bar{
width:250px;
border:1px solid #808080}
#progress_indicator{
width:0px;
background-image:url("progress.png");
height:20px;
margin:0}
#progress_{
text-align:center;
width:250px}
</style>
<script>
var max_progress = 250;
var huidige_progress = 0;
var _interval = 0;
function show_progress() {
if (huidige_progress >= max_progress) {
clearInterval(_interval);
return;
}
var progress_ = document.getElementById("progress_");
var progress_indicator = document.getElementById("progress_indicator");
huidige_progress += 1;
progress_indicator.style.width = huidige_progress+'px';
progress_.innerHTML = huidige_progress;
if (huidige_progress === max_progress) {clearInterval(_interval);}
}
function start() {
_interval = setInterval(function(){show_progress()},10);
}
window.onload = start;
</script>
Voor ik het vergeet is hier nog de progress.png die in het script gebruikt wordt.