Topic awaiting preservation: Dynamic width of element (Page 1 of 1)

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)

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)

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.

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

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

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

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

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