Hi all,
I have been busy trying to get a container around the actual progressBar. All I want is a progressBar Container that's full 100% width, so you can see how much progress still has to be made
example:
+--------------------------------------------------------------------------+
|+----------------------------------+ |
| | progressbarsbar | progressBar Container |
|+----------------------------------+ |
+--------------------------------------------------------------------------+
Now, I have modified the fileprogress.js like below.
var progressBar = document.createElement("div");
progressBar.className = "progressBarInProgress";
var progressBarContainer = document.createElement("div");
progressBarContainer.className = "progressBarBack";
progressBarBack.appendChild(progressBar);
this.fileProgressElement.appendChild(progressCancel);
this.fileProgressElement.appendChild(progressText);
this.fileProgressElement.appendChild(progressStatus);
this.fileProgressElement.appendChild(progressBarBack);
This give's a nice background to the loaderbar, but as soon as the upload begins, the progressbar container disappears.
I guess, to prevent this, i have to edit the following functions:
FileProgress.prototype.reset = function ()
FileProgress.prototype.setProgress = function (percentage) {
FileProgress.prototype.setComplete = function () {
FileProgress.prototype.setError = function () {
Now, I can't get the code to work. The script doesn't work if i assume the childNode[x] is the same as the progressBar childNode (3).
When I make the progressBarContainer childNode[2] it get's displayed, but above the progressbar instead of behind it.
Can anyone help me with this problem?
February 8, 2010 - 11:15am
The File Progress class is really awful. We only use it for the demos and it's been good enough but I'd never use it one a client's site.
I strongly recommend creating your own well designed progress bar.
Anyway, you need to append each element in the right order. And since progressBar is no longer a childNode of the container you can't reference there. Your background is the container.
You need reference your new progressBarBack.childNode to get at the progress bar. You'll need to update anywhere that reference the old progressBar (via the childNode) to reference the new DOM structure you've created.
It'll be something like childNode[2].childNode[0] to get at the progressBar.