Muhammad_Bilal Posted May 9, 2014 Share Posted May 9, 2014 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. Link to comment Share on other sites More sharing options...
davej Posted May 9, 2014 Share Posted May 9, 2014 Put a div inside a div rather than a span. 1 Link to comment Share on other sites More sharing options...
Hadien Posted May 9, 2014 Share Posted May 9, 2014 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. 1 Link to comment Share on other sites More sharing options...
Muhammad_Bilal Posted May 10, 2014 Author Share Posted May 10, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2014 Share Posted May 10, 2014 (edited) 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 May 10, 2014 by dsonesuk 1 Link to comment Share on other sites More sharing options...
davej Posted May 10, 2014 Share Posted May 10, 2014 <!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> 1 Link to comment Share on other sites More sharing options...
Muhammad_Bilal Posted May 10, 2014 Author Share Posted May 10, 2014 thanks devaj for your reply, you'll change the whole code. Now i'm saying thanks again to you because this code block is working finally. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now