Increase HTML progressbar position with javascript

Question

I have a progressbar on my website and this is a part of its css:

.progress-bar span {
    display: inline-block;
    height: 25px;
    width: 78%; //the actual position

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

   //other css
}

I have to change the width that indicates the position of the progression (the line you see here). This is the first time I use progress bars and I have no idea about how to setup the javascript code.

Any advice? jsfiddle

can you please give us more information about your javascript code and the rest of your program / site / script ? (Maybe a small jsFiddle) — Martin
– Martin, Commented Aug 22, 2013 at 13:17

Martin · Accepted Answer · 2013-08-22 13:25:48Z

3

Here is the way without jQuery

HTML

<div  class="progress-bar" align="left">
    <span id="prog"></span>
</div>

JS:

var elem = document.getElementById("prog");
elem.style.width = "88%";

answered Aug 22, 2013 at 13:25

Martin

3,3461 gold badge29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barry Beerman · Accepted Answer · 2013-08-22 13:18:18Z

1

I'd recommend using jQuery to make your javascript calls much simpler. You can download the latest version here: http://jquery.com/download/

First, include the jQuery file in the head of your html like this:

<head>
...
<script type="text/javascript" src="<location of file>jquery-1.10.2.min.js"></script>
...
</head>

Then within your own javascript code, you can move the position of the progress bar like so:

jQuery('.progress-bar scan').css('width', <desired width>);

Hopefully that helps.

answered Aug 22, 2013 at 13:18

Barry Beerman

3034 silver badges9 bronze badges

2 Comments

Alberto Rossi Over a year ago

Is there a non jQuery way? +1

Barry Beerman Over a year ago

Sure, you can do it like this: var elems = document.getElementsByTagName('span'), i; for (i in elems) { if(elems[i].parentNode.className === 'progress-bar') { elems[i].style.width = <desired width>; } }

jcubic · Accepted Answer · 2013-08-22 13:27:50Z

0

You can use:

document.querySelectorAll('.progress-bar span').forEach(function(elem) {
    elem.style.width = '<YOUR WIDTH>'; 
});

no jQuery

answered Aug 22, 2013 at 13:27

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Comments

André Marques · Accepted Answer · 2016-04-20 08:26:12Z

0

I just incremented the width this way:

function increment(){
var width = document.getElementById('progressbar').clientWidth;
var divArray = document.getElementById('progressbar');
if(width<500){
var largura = width+10;
divArray.style.width = largura+'%';
setTimeout("increment()",1000);
}
else{
window.location.href = "http://www.google.com/";
}
}

And does it every second so it will be incremented every second but u can change it the way you want.

answered Apr 20, 2016 at 8:26

André Marques

1781 silver badge15 bronze badges

Collectives™ on Stack Overflow

Increase HTML progressbar position with javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related