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.

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}}
]);