Chanel’s Blog

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

One of my biggest pet peeves about Firefox was the inability to see the entire title attribute of a DOM element. The title attribute is the text you see in a small pop-up box when you hover over an image, link, or anything on a page. It allows the site to give further information about any element on a page.

The developers at Firefox decided to truncate that text to 60 characters so the user won’t get a huge text box covering their screen whenever they hovered over an element with a long title attribute. In most cases, this would be just fine but I happen to be a big fan of xkcd, a geeky internet web-comic which uses the title attribute to add funny quips.

Using the Long Titles extension, you never have to dig around to read the entire title attribute again. Being such an open browser, I find it rather annoying that Firefox developers refuse to make it an option in about:config to change the cutoff limit for title attributes.

web attribute, attributes, browser, comic, css, dom, firefox, html, plug-in, plug-ins, plugin, plugins, title, title attribute, titles, web-comic, webcomic, xkcd

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