Indeed it looked I was requested to implement something else, now gotta back to this.
So I've been looking around the web, I found this:
http://davidwalsh.name/progress-bar-animated-mootoolsNow, I tried to understand a bit.
the script David did has a call set, which tell the percentage of advance for an event.
How to pass the percentage of an uploaded file with Chronoform to his function?
I tried to do the following meanwhile.
Form code:
<div class="form_item"><div class="form_element cf_fileupload"><label class="cf_label">File 1</label><input class="cf_inputbox" size="20" id="file_0" name="file_0" type="file"></div><div class="clear"> </div></div><div class="form_item"><div class="form_element cf_fileupload"><label class="cf_label">File 2</label><input class="cf_inputbox" size="20" id="file_1" name="file_1" type="file"></div><div class="clear"> </div></div>
<script>
//once the DOM is ready
window.addEvent('domready', function() {
/* create the progress bar for example 1 */
pb = new dwProgressBar({
container: $('put-bar-here'),
startPercentage: 25,
speed:1000,
boxID: 'box',
percentageID: 'perc'
});
/* create the progress bar for example 2 */
pb2 = new dwProgressBar({
container: $('put-bar-here2'),
startPercentage: 10,
speed:1000,
boxID: 'box2',
percentageID: 'perc2',
displayID: 'text',
displayText: true
});
/* move the first progress bar to 55% */
pb.set(55);
/* move the second progress bar to 89% */
pb2.set(89);
});
</script>
<div id="this.options.boxID">
<div id="this.options.percentageID"></div>
</div>
<div id="this.options.displayID">{x}%</div>
<div class="form_item"><div class="form_element cf_button"><input value="Submit" name="undefined" type="submit"><input value="Reset" type="reset"></div><div class="clear"> </div></div>
Javascript code:
//class is in
var dwProgressBar = new Class({
//implements
Implements: [Options],
//options
options: {
container: $$('body')[0],
boxID:'',
percentageID:'',
displayID:'',
startPercentage: 0,
displayText: false,
speed:10
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
//create elements
this.createElements();
},
//creates the box and percentage elements
createElements: function() {
var box = new Element('div', { id:this.options.boxID });
var perc = new Element('div', { id:this.options.percentageID, 'style':'width:0px;' });
perc.inject(box);
box.inject(this.options.container);
if(this.options.displayText) {
var text = new Element('div', { id:this.options.displayID });
text.inject(this.options.container);
}
this.set(this.options.startPercentage);
},
//calculates width in pixels from percentage
calculate: function(percentage) {
return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
},
//animates the change in percentage
animate: function(to) {
$(this.options.percentageID).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())});
if(this.options.displayText) {
$(this.options.displayID).set('text', to.toInt() + '%');
}
},
//sets the percentage from its current state to desired percentage
set: function(to) {
this.animate(to);
}
});
On submit code (using ajax)
<script>
//once the DOM is ready
window.addEvent('domready', function() {
/* create the progress bar for example 1 */
pb = new dwProgressBar({
container: $('put-bar-here'),
startPercentage: 25,
speed:1000,
boxID: 'box',
percentageID: 'perc'
});
/* create the progress bar for example 2 */
pb2 = new dwProgressBar({
container: $('put-bar-here2'),
startPercentage: 10,
speed:1000,
boxID: 'box2',
percentageID: 'perc2',
displayID: 'text',
displayText: true
});
/* move the first progress bar to 55% */
pb.set(55);
/* move the second progress bar to 89% */
pb2.set(89);
});
</script>
<?php
<div id="this.options.boxID">
<div id="this.options.percentageID"></div>
</div>
<div id="this.options.displayID">{x}%</div>
?>
..but no form is displayed now..
...am I still so far? :?