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 recently read a Wired article where people achieved success losing weight because Weight Watchers is basically an RPG. One game/exercise that I often do is to see how many lines of code or components I can write without any errors. It’s hard to quantify but my record so far as about 200 lines of Javascript/AJAX code. It was kind of cheating because I was basically re-using Javascript and backend PHP code that had been thoroughly tested. Overall, this is a pretty good method to increase the amount of code you can hold in your head and attempts to reduce the relying of debugging tools in favor of self/mental debugging.
life, programming
ajax, coding, game, games, howto, javascript, php, programming, tip, tutorial
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
Today a co-worker of mine, Travis, made a really good remark which is the title of this post. Before AJAX, there were only two main components to the site: 1) dynamic server-side processing, and 2) static client-side elements. With AJAX, there is now a third layer that manipulates static elements to make them dynamic and is able to make requests from the server with or without user interaction. Client-side Javascript always has to account for the capabilities of the user’s browser and how certain browsers renders elements even though HTML/CSS also has to handle this. This added complexity, plus the regular bugs that always crop up while coding, makes debugging an AJAX application twice as hard. Despite the extra work for developers, the rich interaction that the Web2.0 era is built upon makes for a much better overall user experience.
internet, programming
, ajax, browser, css, debugging, developers, development, html, html/css, javascript, site, web, web2.0, website
Browsers do a lousy job of providing an interface to the HTML document. The DOM is supposed to be that interface but it is horribly slow, and clunky. Traversing the DOM tree extensively is one of the sure-fire way to slow down your site. In an effort to help out Javascript coders, the DOM does have functions like getElementsByTagName, getElementsByClassName and getElementsByName, but they do not all work across all browsers. This why you should create a function called getElementsByID:
var groupCache = {};
function getElementsById(id){
if(!groupCache[id]){
groupCache[id] = [];
}
var nodes = groupCache[id];
for(var x=0; x<nodes .length; x++){
if(nodes[x].id != ""){
nodes.splice(x, 1);
x--;
}
}
var tmpNode = document.getElementById(id);
while(tmpNode){
nodes.push(tmpNode);
tmpNode.id = "";
tmpNode = document.getElementById(id);
}
return nodes;
}Now whenever you want a collection of DOM objects, just give all of them the same id and call this function to grab an array of the objects you want. This is not the most ideal way and its actually a pretty big hack. But sometimes, speed is more important than form.
programming
browser, browsers, dom, getelementbyid, getelementsbyid, help, html, html document, javascript, javascript tip, tip, tips
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