$("#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.

• file_A, file_B, file_C
• file_D, file_E
• file_F

I can get the following display order:

1. file_A
2. file_B
3. file_C
4. file_D
5. file_E
6. file_F

which is what I want, but more probably I will get a similar order:

1. file_D
2. file_E
3. file_A
4. file_B
5. file_C
6. file_F

because the ajax responses are returned (due to the case) in this order: file_2.xml, file_1.xml and file_3.xml. This is not acceptable, specially due to a project requirement which force the reload of the page each time the user select any of the object displayed in order to see its details.

So, I’ve realized a sort of “priority tail” by adding an extra XML node, called <priority> to the XML document returned from the ajax call. This has been possible by using the parameter dataFilter provided by jQuery’s $.ajax() method, which accepts a function callback to apply an extra data-processing operation.

This is a piece of code:

$.ajax({
  type: "GET",
  url: XMLUrl,
  dataType: "xml",
  cache: this.cacheAjax,
  success: this._storeData,
  error: this._storeError,
  dataFilter: function(data) {

    var root, newNode, newNodeValue;

    root = data.getElementsByTagName('pics')[0];
    newNode = data.createElement("priority");
    newNodeValue = data.createTextNode(priority);
    newNode.appendChild(newNodeValue);
    root.appendChild(newNode);

    return data;

  }
});

The priority variable is passed as a parameter to a method (this._startAjaxRequest()) that wraps the jQuery code ($.ajax()). In this way I can store the data retrieved (basically i put the XML documents into an array) from the ajax calls randomly (based on the responses order) and then I can sort the store (by using the priority value) and display the objects always in the same order.

This is a piece of code of this._storeData() that shows how the data is stored for further processing operations:

this._storeData = function(xhr) {

  var XMLDoc = xhr.documentElement;

  // adds the XML document to the MediaBrowser's dataStore
  instance.dataStore.push({
	doc: XMLDoc,
	priority: XMLDoc.getElementsByTagName("priority")[0].firstChild.nodeValue
  });
...

…and this is the method which sorts the data into array:

this._sortDataStore = function() {
  instance.dataStore.sort(
    function(a, b) {
      return a.priority - b.priority;
    }
  );
}