<script type="text/javascript">
function changeBarAWidth(){
var bar = document.getElementById('firstbar');
bar.style.width = lengthA+"px";
}
function increaseBarA(){
if(lengthA < fullBarA){
changeBarAWidth();
lengthA = (lengthA + 2);
setTimeout("increaseBarA()",10);
}
}
function resetLengthA(){
lengthA = 0;
changeBarAWidth();
}
</script>
<style type="text/css">
ul{
list-style-type:none;
}
.bar{
width:50px;
height:5px;
background-color:red;
}
.back{
background-color:black;
height:5px;
width:200px;
}
</style>
</head>
<body onload="increaseBarA()">
<ul>
<li class="back">
<p class="bar" id="firstbar">
</p>
</li>
</ul>
<script type"text/javascript">
var barA = 'firstbar';
var percentA = 80;
var fullBarA = (percentA*2);
var lengthA = 0;
</script>
<button onClick="increaseBarA()">Test Change</button>
<button onClick="resetLengthA()">Reset</button>
views:
32answers:
1
Q:
How can i make these functions use variables for the id? I cant the setTimeout to work when I do.
A:
GOT IT!
had to use a setTimeout(**function(){**YourFuncwith(*params*)},10)** here is the script if anybody would like copy please do.
// functions to show poll reults, div width increase every tenth of a second, // looks like poll is sliding.
// length is name of global length variable you declare, mine are at bottom of script
// I will use php to dynaimcally give variable values based on poll results.
function changeBarWidth(id,length){
var bar = document.getElementById(id);
bar.style.width = length+"px";
}
/* max is how long you want the poll to slide to, my background is 200px
* so I set to (percent*2);
*/
function increaseBar(id,max,length){
var full = max;
if (length < full) {
changeBarWidth(id,length);
length = (length+2);
// setTimeout("increaseBarA()",10);
setTimeout(function(){increaseBar(id,max,length)},10) ;
}
}
var barA = 'firstbar';
var percentA = 80;
var fullBarA = (percentA*2);
var lengthA = 0;
var lengthB = 0;
</script>
<style type="text/css">
ul{
list-style-type:none;
}
.bar{
width:50px;
height:5px;
background-color:red;
}
.back{
background-color:black;
height:5px;
width:200px;
}
</style>
</head>
<body onload="increaseBar(barA,percentA,lengthA)">
<div id="pollresults">
<ul>
<li class="back">
<p class="bar" id="firstbar" > </p>
</li>
<li class="back">
<p class="bar" id="secondbar" > </p>
</li>
</ul>
</div>
<button onClick="increaseBar('secondbar',fullBarA,lengthB)">Test Change</button>
Alex J
2009-12-24 11:17:16