javascript progress indicator 2

[Cheech]

I am trying to build a progress indicator that I can dynamically change with javascript.
Currently I have the following in the document.

<div id="ind_head">10%</div>
<div id="ind_10"></div>
<div id="ind_head">20%</div>
<div id="ind_20"></div>

And the css

div#ind_10, div#ind_20{
width:200px;
height:10px;
}
div#ind_10 {
background:url(indicator.gif) no-repeat;
background-position:-180px;
}
div#ind_20 {
background:url(indicator.gif) no-repeat;
background-position:-160px;
}

indicator.gif is 400px x 10px and is half white and half grey, so all I am doing is using css to offset the image.
However in order to reuse this I don't want to have to create styles for 100 options. I would like to be able to just use a function to pass in what % I want displayed.

Any one got any ideas on how to achieve this?

Cheech

[Peace][Pipe]

 

[feherke]

Hi

This is invalid. The [tt]id[/tt] must be unique per document.

<div id="[red]ind_head[/red]">10%</div>
<div id="ind_10"></div>
<div id="[red]ind_head[/red]">20%</div>
<div id="ind_20"></div>

I would use [tt]id[/tt] only to identify it and [tt]class[/tt] to set its look :

<div id="ind_1" class="progress">0%</div>

div.progress {
  width: 200px;
  height: 10px;
  background: url(indicator.gif) no-repeat;
  background-position:-200px;
}

function progress(which,where)
{
  var prog=document.getElementById(which)
  prog.style.backgroundPosition=(where*2-200)+'px'
  prog.innerHTML=where+'%'
}

progress('ind_1',25)

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

lol I came up with the following quickly off the top of my head...

function Prog_Check(myid){
  var bgp = document.getElementById(myid).style.backgroundPosition;
  bgp = bgp.replace(/[^0-9]/g, '');
  bgp = bgp - 10;
  document.getElementById(myid).style.backgroundPosition=bgp+"px";  
}

Then when ever you want to change the poition call the Prog_Check function passing it the ID of the element which has the background image.

of course you can change the incriment yourself from 10 and use + rather than - , what ever suits your needs

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!