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

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

I just discovered this really cool application called OpenLaszlo. They are an “open-source platform for the development and delivery of rich Internet applications on the World Wide Web.” One of their claims is “write once, run anywhere” (I think we’ve heard this before – Java).

To me, their syntax and coding style is very similar to Flex. What’s most impressive is that when you “compile” your page/site, you have the option of compiling to flash or DHTML. Working with HTML/CSS all day, they must have a pretty impressive algorithm to ensure browser compatibility, especially on the CSS side.

OpenLaszlo has a lot of promise and is really neat technology. If they really take off and become popular, they will effectively put me out of a job. In the end, they automated the entire process of building a Web2.0 AJAX-powered website and provides another way to produce flash applications in a way that makes sense to traditional web developers.

internet, programming ajax, css, flash, flex, html, open laszlo, openlaszlo, programming, web, web development