Chanel’s Blog

For the longest time, I’ve been trying to find a fairly simple solution for showing the real progress of file uploads. Most of them that I have found involved patching PHP to allow this functionality. What I think is going on is that during a file upload, PHP allows the web server, most of the time, apache, to handle the actual uploading of the file and only after the file is completely done uploading does PHP have access to the file itself.

Instead of using html based file uploads, flash is available. By using jqUploader, one can allow people with flash enabled browsers real time progress of their uploads. This is really handy for large images, zip files, or any file larger than 3mb.

Update: I have to give some props to John David at Conceptual Arts for initially telling me about jqUploader.

javascript, jquery, web file progress, file upload, file uploading, javascript, jquery, jquploader, large files, php, upload, upload progress, uploading large files

I was just told to do some crazy animations involving multiple css attributes on multiple DOM objects. With jQuery and its animate method, this is fairly easy to do:

$(obj1).animate({height:10,width:32,margin:30,left:5});
$(obj2).animate({height:20,width:62,margin:20,left:45});
$(obj3).animate({height:30,width:92,margin:10,left:25});
$(obj4).animate({height:40,width:122,margin:00,left:23});

Well everything is not entirely prefect because each animation occurs within its own timer interval. If one animation is slighter more complex than the other, it forces the rest of the animations to wait. This problem compounds itself to create an “easing” affect where the animation appears exponentially instead of linearly. This is due to how browsers fail to isolate different javascript timers or tabs from affecting each other.

Now my quest is to find an animation plugin where you can animate multiple objects with their own parameters in a single animation timer interval to ensure smooth, linear animation. If I can’t find one, this might be my chance to finally submit something back to jQuery. It might look something like this:

$.animate([
    {obj: obj1, params:{height:10,width:32,margin:30,left:5}},
    {obj: obj2, params:{height:20,width:62,margin:20,left:45}},
    {obj: obj3, params:{height:30,width:92,margin:10,left:25}},
    {obj: obj4, params:{height:40,width:122,margin:00,left:23}}
]);

javascript, jquery animate, animation, attributes, css, dhtml, dom, html, interval, javascript, jquery, jquery javascript, timer interval, timers

I just recently found out that jQuery’s “get” method actually returns the DOM objects within the jQuery object. For the longest time, I’ve been using my own “dom” method to do the same thing. For some reason, I never use their documentation site. The search isn’t that great, and something about the site itself just makes me not want to use. Maybe its because I loved the old Visual jQuery site so much. Only if someone would update it for jQuery 1.2.

misc api, javascript, jquery, programming

The good folks at jQuery just released a new version of UI library. For the uninitiated, jQuery UI is mostly a visual effects library that allows one to create AJAX-style user interfaces and interactions really quickly and easily.

I’ve used the older versions and they were pretty buggy and unstable. Since then, the jQuery team has received corporate backing and really improved the core jQuery library. If the new jQuery UI lives up to its billing, it might push Mootools out of being my favorite Javascript library

jquery, programming, web ajax, javascript, jquery, jquery ui, mootools, programming

On a daily basis for the last year, I use jquery at work (Grooveshark) to handle different DOM and animation methods. I started out using jquery because I was new to the browser world and Javascript in particular. Jquery made it really easy to come right in and start creating usable modules.

As I got more comfortable with javascript, I started moving away from jquery and building my own methods or extending jquery. One problem with browsers in general is accessing the DOM and any javascript heavy site will always go over this bump. At Grooveshark, because everything is so heavily based on accessing/modifying song/artist/album information, we already have a unique identifier from the MySQL database. By using a contextual name based system, we can get really fast DOM lookups for very cheap:

HTML:

<table class="songs">
	<tr id="song_123"><td>A Song</td></tr>
	<tr id="song_456"><td>My Song</td></tr>
		...	MORE SONGS ...
	<tr id="song_789><td>Your Song</td></tr>
</table>

Javascript:

function song_click() {
	$("table.songs tr").click(function() {
		var domid = $(this).attr("id");
		var songid = domid.split("_")[1];
		// possibilities endless...
	}
}

This is not exactly what we do (currently using inline event handler – I know, not very web2.0-ish of me), but this is the basic idea. The html elements themselves contain a reference to the data they represent so whenever a user interacts with that element, it’s very easy to identify what it is.

Grooveshark, jquery, mysql, programming dom, javascript, jquery, mysql, programming