How to disable keyboard navigation in jQuery UI tabs

This is a quick tip to disable the keyboard navigation introduced in the latest jQuery UI releases (which at the time of this writing is not configurable), but before to show the snippet I have to say that while jQuery is an helpful and powerful JavaScript library, jQuery UI is really sucky and that the team behind it should take it more seriously… I mean, it’s just ridiculous compared to other js UI libraries and further more them don’t care about retro-compatibility (I had problems on every update in the past!).
Ok, this is how I removed the keyboard navigation (it’s really a dirty way but better than what I found online and it’s working!):

jQuery('.foo').tabs({
    activate: function(e, ui) {
        e.currentTarget.blur();
    }
});

In practice in the “activate” callback I remove the focus from the tab and thus the listeners related to the keyboard are not being executed later.

CSS tip: if you can’t remove the evil, you can imprison it!

prisonYesterday a colleague asked me to help her in debugging a crazy behavior of internet explorer 6 (all the others browsers worked fine!), which caused the wrong display of the boxes inside the page. The bug was caused by the rendering of a jQuery powered div, ie one of those things like:

$("#myDivID").doMagic({...});

In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally I put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:

<div style="position: relative; width: Npx; height: Npx;">
    <div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>
</div>

With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.

Handle multiple ajax calls in a fixed incremental order

In a project which I’m working on, I’ve realized a Javascript object (I’ve called it MediaBrowser), which displays images and flv videos into a box (a dynamic div rendered at runtime). The data used by this object is contained into multiple XML files, which are loaded by ajax (potentially it can loads infinite files passed as array of urls). The problem was: ajax is by definition asynchronous, so each time I load the page with my cool MediaBrowser, the order in which the objects (images and videos) are processed and displayed varies based on the order in which responses to the ajax calls are returned. IE: if I call file_1.xml, file_2.xml and file_3.xml, which contain respectively:

Continue reading