Tips for Twits

Hi all its us again, In the past few months we’ve been asked many a times to help improve the progressbar code. We’ve also been referenced by several websites as THE progressbar to use. In all, we felt we owed it to you guys to make it better.

So here we are, after all those emails and bug reports, we finally got down to it. Always good to take a couple of months to have a fresh prespective of things. We ripped out the old code and made it much better and more extensible than its predecessors. So much that we decided it was enough to qualify as a major revision.

Let see whats been done…

• Cleaned up the code, yes its lighter, cleaner faster. (Still lacks documentation though)
• Callbacks! Everyone’s favourite
• Max values, you can now set it to be 150/2000 instead of just a percentage
• Text formats. Show 75/100 or 75% by toggling the textFormat accordingly
• Steps, how many steps to get to your target value
• Step Duration, how long each step lasts
• Webkit (Chrome/Safari) compatibility. More like, Webkit Hacks

Once again, many a thanks for all those who have so generously provided the feature requests as well as bug fixes every now and then. And thanks for all your patience in waiting for this new release.
If its working for you, drop us a comment and tell us where we can see your stuff!

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

Thanks for all the comments and feedback! By popular request i’ve added the multi-colored progress bar and fixed some bugs. The new multi-colored bar changes from red to orange and then to green at configurable intervals. Check out the demo!

Since the last update this endeavour has seen comments claiming that it works and sometimes that it doesnt. I’ve tested the demo across Safari, Opera, IE6/7, Firefox and Chrome. Havent found any problem. For those of you who have problems, please do email me the problem.

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

With the controllable jQuery Progress Bar, writing a form upload progress bar seems like a piece of cake now. Hypothetically, all we need is to create the bar, poll for the progress of the file upload, derive the new progress bar value (in percentage) and set it.

To do that you need to prepare the php script to do it. By default PHP cant report the progress of upload progress. However people smarter than me have already solved that problem. In 5 mins i’ve found 2 solutions: the Alternative PHP Cache (APC) method as well as the UploadProgress method. Both of them are PECL packages. Because i couldnt get APC to work on my server properly, i’ll document the UploadProgress more in detail here…

pecl install uploadprogress

extension=uploadprogress.so

<form id="uploadform" enctype="multipart/form-data" method="post">
<input id="progress_key" name="UPLOAD_IDENTIFIER" type="hidden" value="&lt;?= $uuid ?&gt;" />
<input id="ulfile" name="ulfile" type="file" />
<input type="submit" value="Upload" />
	<span id="uploadprogressbar" class="progressbar">0%</span>
</form>

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
if (@$_GET['id']) {
	echo json_encode(uploadprogress_get_info($_GET['id']));
	exit();
}

{"time_start":"1214384364","time_last":"1214384366","speed_average":"25889","speed_last":"40952","bytes_uploaded" :"51778","bytes_total":"8125518","files_uploaded":"0","est_sec":"311"}

var progress_key = '';
 
// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});
 
// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	$("#uploadprogressbar").fadeIn();
	setTimeout("showUpload()", 1500);
}
 
// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
function showUpload() {
	$.get("uploadprogress.php?id=" + progress_key, function(data) {
		if (!data)
			return;
 
		var response;
		eval ("response = " + data);
 
		if (!response)
			return;
 
		var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
		$("#uploadprogressbar").progressBar(percentage);
 
	});
	setTimeout("showUpload()", 750);
}

This code has been downloaded quite abit so i thought i’d put in some effort to improve it. I found some free time this evening to clean up the code. The original code is a couple of months old and its my first jquery plugin. I didnt quite understand what i was doing then.I made the code less resource intensive and more configurable.

The progress bar can now be controlled externally. click on the demo link below to see what i’m talking about. I’ll know of at least 1 bug in the script if its fully tested, will try to fix this within the week. Meanwhile if you have any ideas for improvements, please leave a comment!

Download the jQuery progressbar here: jQuery progressbar
or view the demo here

I really liked the mootools progressbar at http://www.webappers.com/progressBar/ but i’m so against the idea of having 2-3 libraries in a single system. Since i always use jQuery, i tried to port the progressBar over. The problem is, jQuery unlike most of the other libraries doesnt quite work with objects. So its not that easy to return and manage an object to perform actions like “add 5%”, “fill to 95%”, etc. Honestly i’m not sure where else to use such a comprehensive progress bar other than a file upload utility.

So for what its worth, i made a simple progress bar in jQuery that parses a percentage string and animates the loading.

Download the jQuery progressbar here: jQuery progressbar
Or view the demo: here