Closed Thread Icon

Topic awaiting preservation: Dynamic width of element Pages that link to <a href="https://ozoneasylum.com/backlink?for=25603" title="Pages that link to Topic awaiting preservation: Dynamic width of element" rel="nofollow" >Topic awaiting preservation: Dynamic width of element\

 
Author Thread
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted posted 04-25-2005 15:20

OK... keeping in mind that I'm not that familiar with JavaScript itself, but I can program, so if you explain it I'll probably pick it up ...

I'm doing a progress bar for an upload. After a conversation tonight with Perfect Thunder over the 'Q, I did realise that (when I was uploading a file as an attachment for an email, and a fairly big file at that) in the latest PHP script I'm doing, a little popup progress bar would be nice. We discussed the possibility of having PHP do some trickyness with the HTTP stream to upload the file a certain number of bits at a time, and to monitor that and write the current progress to a file. You could then have JavaScript open a little popup window that refreshes once a second. On each refresh it checks the value in the file against the total size, calculates the percentage completed and displays a progress bar accordingly. So, my question would be: how? Can I get JavaScript to dynamically alter the style of a certain element to chage its set pixel width to show progress? Can I get it to alter a piece of text to display the current percentage? And, if so, how? And... perosnal preferences... how would you do this?


Justice 4 Pat Richard

(Edited by Skaarjj on 04-25-2005 15:31)

protoculture
Nervous Wreck (II) Inmate

From:
Insane since: Oct 2003

posted posted 04-25-2005 15:27

Something like this might work...obviously you would use your own data. Or maybe you will need to call the settimeout function for this. I can't remember.


for(i=0;i<2000;i++){

document.getElementById['yourelementid'].style.width = i;

}

(Edited by protoculture on 04-25-2005 15:27)

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted posted 04-25-2005 20:13

This might help: http://slayeroffice.com/code/progressBar/

That guy writes some pretty tight scripts, so even if it's not what you're looking for, he may have something on his site that you may find useful.

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted posted 04-26-2005 14:29

I would use this to change the width of an element:

code:
document.getElementById('yourElementId').style.width = '55px';



and this to modify text in a span / div, etc

code:
document.getElementById('yourElementId').firstChild.nodeValue = 'Your new text here';



Both are fully DOM compliant, and should work in all modern browsers on all platforms.

Hope this helps,
Dan

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 04-26-2005 15:18

IMHO, the important thing is the server side language. Does it allow you to load parts of the file whenever you want and retrieve the size of the file before its completely uploaded. If it does, you can output few lines of javascript to update an HTML element when you're not loading the file on the server.

Upload progress - demo

« BackwardsOnwards »

Show Forum Drop Down Menu