1 | 2 | 3 | 4 | 5

1 - 5   [21]

Back but only briefly

Also relates to Firefox and Co and XForms

Just a quick whistle stop fly by. I found February fairly uninspiring in the blogging realm, with the usual regurgitation of old ideas in new guises escalating exponentially - but this may just be my lack of stimulation at the moment with considerable mundane workload in the inbox.

Nice to see XForms make an appearance in the Firefox nightlies at a time when the duel between the web forms camps heats up with the forthcoming release of Web Forms 2.0. I look forward to seeing XForms developed further in Firefox - start experimenting with XForms beyond the realm of XSmiles and FormPlayer.

Meanwhile Javascript has yet again been shunned with Joel Webber's damming article. While this appears to have raised a certain level of concern, it is a problem that was elucidated back in spring 2k4 in Richard Cornford's excellent javascript closures article. And the RAM munching truth demonstrated in Mihai Bazon's IE benchmarking tests. In script-powered applications I generally garbage clean event handlers and loose DOM references manually, but as the application gets more complex, keeping track of references becomes harder to manage. While I have only perused this briefly, Mark Wubben has come up with an interesting solution - the Event Cache script.

Beyond these, I have been enjoying a few visual memories of New Zealand these last few days via Bitflux. And just today I stumbled across another nomenclature proposed for XMLHTTPRequest and co - now we are expected to name it after a soap!!! Yes I do know my Greek mythology - just feeling a little cynical this morning. I really need to get away?

Posted on Mar 02, 2005 at 05:35:27.

Google Implements XMLHTTPRequest

Also relates to SEO

Live data retrieval has found its way onto Google in the guise of Google Suggest. As well as returning suggestions for the search term as it is entered, each suggestion is accompanied by the number of results, making this quite a useful tool in the initial stage of SEO.

On the client side the concept is really just a reworking of Bitflux's Live Search, although a quick look under the hood at the somewhat obfuscated javascript source shows the Google developers have given preference to the MSXML library instead using XMLHTTPRequest as the fall back when the initial try/catch blocks fail. Of course, Google utilises its immense power on the server side to return results from its 8 billion strong database, based on popularity, in a split second.

Posted on Dec 11, 2004 at 14:44:54. [Comments for Google Implements XMLHTTPRequest- 3]

Mozilla COL Alignment via DOM Scripting

Also relates to CSS Design and Firefox and Co

One of the Mozilla rendering engine's few annoyances is its apparent disregard for the alignment attributes of col and colgroup elements within HTML tables. One might argue this is justified since alignment is a presentational attribute that should be defined with CSS. However, table alignment can be crucial to the visual display of data in a usable format and this should not be dependant on CSS - perhaps one reason why table alignment persists in the XHTML 1.1 Table Module.

Putting this presentation/structure debate aside, a workaround is required if alignment rules are to be defined by column in Mozilla browsers. One solution is to turn to CSS and define adjacent sibling selector rules (or direct adjacent combinators in CSS3 syntax) for table cells as demonstrated in these CSS snippets. However this will only work if the number of columns and columnar alignment is predefined.

The scenario I found myself in earlier today, working on the latest version of my PHP powered CMS, had column alignment and quantity determined on a content module basis with considerable variation. So it was once again time to call on the DOM, and to create those adjacent sibling selector rules dynamically.


function synchronizeColumns(table) {
  var inline = create('style');
  inline.setAttribute('type', 'text/css');
  var rule = "tbody th", 
      rules = "", 
      span, halign, valign, i, temp;
  (function(elem){
   temp = "";
   span = elem.getAttribute('span');     
   halign = elem.getAttribute('align');     
   valign = elem.getAttribute('valign');          
   if (halign != null) {
     temp += "text-align:" + halign + ";";  
   }
   if (valign != null) {
     temp += "vertical-align:" + valign + ";"; 
   }
   i = (span != null) ? span : 1;
   do {
     if (temp.length > 0) {
       rules += rule + "{" + temp + "}\n";
     }
     rule += "+td";      
   } while (–i > 0);
  }).Iterate(table.get('col')());
  inline.appendChild(create(rules,Node.TEXT_NODE));   
  get('head')(0).appendChild(inline);  
}

The rules are declared inline (to override any default alignment rules that may be set for columns, by appending a new style node to the head element. Then it is just a case of iterating through each col element in the table, extracting the corresponding align and valign attributes and building the corresponding rule. The span attribute must also be taken into consideration to ensure the correct attribute values are assigned across each column as this document fragment demonstrates:


<colgroup>
<col align="left" width="50" />
<col span="3" align="center" width="2*" />
<col width="3*" />
<col span="2" align="right" width="1*" />
</colgroup>

So, the do..while loop takes care of appending the correct number of adjacent sibling selectors.

The function described above only loops through col elements which met my requirements. Including colgroup elements is a little more complex since the content model can contain col child nodes or be empty. Since the problem only applies to Mozilla, this would be a perfect opportunity to utilise the supported TreeWalker interface from the DOM2 Traversal and Range specification. For example:


var nodes = document.createTreeWalker(
  table,
  NodeFilter.SHOW_ELEMENT, 
  {
    acceptNode : function(n) {
    return (n.tagName == "COL" || 
            (n.tagName == "COLGROUP" && 
             n.childNodes.length == 0)
           ) ?
      NodeFilter.FILTER_ACCEPT :  
      NodeFilter.FILTER_SKIP;
    }  
  },
  false);

The returned node list will contain all col and colgroup empty elements. This assumes that a colgroup element does not define the alignment for any child nodes - to account for this the acceptNode method would need to be extended further.

Posted on Nov 08, 2004 at 20:20:29. [Comments for Mozilla COL Alignment via DOM Scripting- 2]

Device-Independent Tool Tips

Also relates to Accessibility and CSS Design

I have updated the Accessible DHTML Tool Tips experiment to handle both mouse events and keyboard events. It is not perfect, but the use of unobtrusive Javascript and device-independent event handling is a step in the right direction.

Posted on Nov 05, 2004 at 22:19:54. [Comments for Device-Independent Tool Tips- 0]

Live Data Retrieval

This post does not relate to any other topics

I have been experimenting at every opportunity with XmlHttpRequest ever since I first saw it implemented over at Bitflux in the now reknowned Live Search. It has been integral to a number of supplemental enhancements to my PHP CMS. I decided to test drive the items grabber utility for Live Data Retrieval a bit further by crossing it over to this weblog, and this feature can now be seen in the archives menu.

There is nothing fancy in the implementation. Just a bit of DOM manipulation to send a request to the server and retrieve a list of the titles of each entry posted for a month. It is a convenience tool that allows the user to browse the entire archive without leaving the entry page. The data is cached on the server and after the initial request it is also cached in a Javascript object for the duration of the page session.

The Javascript source is available here. The code develops a number of techniques I have discussed in recent months. One line of code that may look a little odd to the untrained eye is the following:


(function (elem) {    
  var btn, listener;
  btn = document.createElement('button');
  elem.insertBefore(btn, elem.firstChild);
  listener = new XListener(btn);
}).Iterate(listitems);

This is actually just an anonymous function that could just as easily be written:


function addButtons(elem) {
  var btn, listener;
  btn = document.createElement('button');
  elem.insertBefore(btn, elem.firstChild);
  listener = new XListener(btn);
}
addButtons.Iterate(listitems);

But the interesting code is the Iterate method which is a custom method of the Function prototype:


Function.prototype.Iterate = function(collection) {
  for (var i = 0, elem; elem = collection.item(i++); ) {
    this(elem);	
  }  
}

Essentially a utility function to handle the iteration of a routine over a collection of DOM nodes.

While this XmlHttpRequest implementation works perfectly well in IE6, I have temporarily prevented this due to Exploder's mis-interpretation of the float model causing some incongruous placement issues. I have yet to test it in the latest Opera betas.

Posted on Oct 17, 2004 at 21:46:26. [Comments for Live Data Retrieval- 2]

Breadcrumbs Trail

[ Home ] -> TW Blog -> DOM Scripting
Site Map

The Severn Solutions website achieves the following standards:

[ XHTML 1.0 ] [ CSS 2 ] [ WAI AA ] [ Bobby AA ]

Page compiled in 0.007 seconds