PDA

View Full Version : java script bar help?



Rdogg
01-26-2009, 11:47 PM
i made a javascript progressbar
and it moves and stuff heres my .js code not my html

function initialize() {
divId = 'sample';
thedivId = document.getElementById(divId);
var percentage = thedivId.innerHTML;
//Set the Progress Bar color
thedivId.style.backgroundColor="#00FF00";
brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));
}
function brim(Id,start,percentage) {
if (document.getElementById) {
o = document.getElementById(Id);
if (start <= percentage) {
setWidth(o, start);
start += 1;
//Show progression percentage near the progress bar
document.getElementById('percentage').innerHTML = (start -1) + "%";
window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);
}
}
}

function setWidth(o, start) {
o.style.width = start+"%";
}


how can i make it rederict when it reaches 100%

Master_script_maker
01-27-2009, 01:46 AM
function brim(Id,start,percentage) {
if (document.getElementById) {
o = document.getElementById(Id);
if (start <= percentage) {
setWidth(o, start);
start += 1;
//Show progression percentage near the progress bar
document.getElementById('percentage').innerHTML = (start -1) + "%";
window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);
} else {
window.location.href="http://www.site.com";
}
}
}

Rdogg
01-27-2009, 08:25 AM
for some reason it affected my html and css

heres my full code
HTML + CSS

<HTML>
<HEAD>
<style>
/*Container*/
.progress-bar {
border: 1px solid #56577A;
/*width of the progress bar container*/
width: 200px;
margin: 5px;
padding: 1px;
background: #fff;
float: left;
}

/*Progress Bar*/
.bar {
height: 15px;
font-size: 11px;
/* indent the text off the screen as we donít want to see the text anymore.*/
text-indent:-9000px;
}

</style>
</head>
<body>
<div class="progress-bar" >
<div id ="sample" class="bar">100%</div>
</div>
<div id ="percentage"></div>
<script src="bar.js" type="text/javascript"></script>

<script type="text/javascript">
window.onload = function() {initialize()}
</script>

</body>
</html>

Heres My JS

function brim(Id,start,percentage) {
if (document.getElementById) {
o = document.getElementById(Id);
if (start <= percentage) {
setWidth(o, start);
start += 1;
//Show progression percentage near the progress bar
document.getElementById('percentage').innerHTML = (start -1) + "%";
window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);
} else {
window.location.href="http://darkcyber.thvhosting.net/";
}
}
}