Jump to content
Muhammad_Bilal

span as a progress updater

Recommended Posts

Hello @ all,

I'm again dive to a problem which is that, I want to create a progress updater using div and spans.

that's roughly the idea of mine is:

1. A span is child of div.

2. The width of the span is increasing according to time.

3. When the width is 100% then, span cover the whole div.

4. All magic happening in the JavaScript.

code of mine...

<!DOCTYPE html>

<html>

<head>

<style>

//style goes here.

//I don't need it.

</style>

</head>

<body>

<div id="container" >

<span id="slider" >

 

</span>

</div>

<script>

function update () {

var slider = document.getElementById("slider");

var width = 0;

slider.style.width = width + "%";

width++;

setTimeout(update,300);

}

update();

</script>

</body>

</html>

The problem is that the width is not increasing after the specified period of time i.e. 300ms.

if any one help me that's great.

 

Share this post


Link to post
Share on other sites

As Davej says.

 

Span is a "flow" type element (in that it uses Display:inline). It sets its dimensions to be only as large as it needs to be and will ignore all width and height styles you try to set it to. Only a few inline flow elements are an exception to this and will listen to css dimensions, like img elements.

 

Block level elements, like div, you can have direct control of with said dimensions.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for both of you for replying,

using the div can't solve the problem.

further more, I'll set the span style as "inline-Block" couldn't help me.

I think there is some problem in js time setting or any where in the js. can any one fix it?

I'm be thankful to him/her.

Share this post


Link to post
Share on other sites

Because in every loop it is

set to 0 width, then incremented, run loop after 300ms

set to 0 width, then incremented, run loop after 300ms

set to 0 width, then incremented, run loop after 300ms

set to 0 width, then incremented, run loop after 300ms

set to 0 width, then incremented, run loop after 300ms....

 

Edit: also if container div and span have no content of any kind (no space between opening and closing tag), the height will be 0, and you won't see progress bar at all, even if it is working,

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>progress</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><style>#slider{background-color:red;border:1px solid #777;white-space:nowrap}#container{border:1px solid #444;}</style><script>var width = 0;//globalwindow.onload = init;function init(){update();}function update () {var slider = document.getElementById('slider');slider.style.width = width  + '%';if (width<100){slider.innerHTML = '  '+ width +'%';width++;setTimeout(update,100); }else{slider.innerHTML = '  100% Completed...';}}</script></head><body><div id="container"><div id="slider"></div></div></body></html>
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×