2007-10-22

Refer to the containing object in the jQuery callback function

From a Learning jQuery post by Mike Alsup:
...
var self = this;

$('#myElement').click(function() {
  // here you can use 'self' to reference
  // the enclosing object
});
...
Duh!

2007-10-16

qooxdoo Ajax framework

"qooxdoo is one of the most comprehensive and innovative Open Source multipurpose AJAX frameworks, dual-licensed under LGPL/EPL. It includes support for professional JavaScript development, a state-of-the-art GUI toolkit and high-level client-server communication."

May be worth checking out. Note: requires a basic Unix-ish build environment (shell, make, etc. + Python)..

2007-10-14

Bitmap-test

"Kind of" slow; maybe replacing the table with rows and columns of letters would speed it up. Next phase is to read (C header file -style) X PixMaps with XmlHttpRequest and display them add a 1-D Game of Life.

Bitmap.js:

function Bitmap( sizex, sizey, root, defaultcolor)
{
  this._sizeX =sizex;
  this._sizeY =sizey;
  
  this._scanline =[ ];
  this._tablename = root + 'BitmapTable';
  $( '#'  +root).append( '<table id=\"' +this._tablename +'\"></table>');
  for( var i =0; i <this._sizeY; i++)
  {
    this._scanline[ i] =[ ];
    $( '#' +this._tablename).append( '<tr id=\"' +this._tablename +'row' +i +'\"></tr>');
    for( var j =0; j <this._sizeX; j++)
    {
      this._scanline[ i][ j] =defaultcolor;
      $( '#' +this._tablename +'row' +i).append( '<td class=\"' +root +'BitmapTableCell\" id=\"' +this._tablename +'row' +i +'col' +j +'\"></td>').css( 'background-color', defaultcolor);
    }
    window.status =i + ' ' + j;
  }
}

Bitmap.prototype._sizeX;
Bitmap.prototype._sizeY;
Bitmap.prototype._scanline;
Bitmap.prototype._tablename;

Bitmap.prototype.getSizeX =function( )
{
  return this._sizex;
}
  
Bitmap.prototype.getSizeY =function( )
{
  return this._sizeY;
}

Bitmap.prototype.setPixel =function( x, y, color)
{
  this._scanline[ y][ x] =color;
}

Bitmap.prototype.getPixel =function( x, y)
{
  return this._scanline[ y][ x];
}

Bitmap.prototype.flip =function( )
{
  for( var i =0; i <this._sizeY; i++)
    {
      for( var j =0; j <this._sizeX; j++)
      {
        $( '#' +this._tablename +'row' +i +'col' +j).css( 'background-color', this._scanline[ i][ j]);
      }
    }
}

main.js:

function time( )
{
  return (new Date()).getTime();
}

$(document).ready( function() {
    var w =32;
    var h =32;

    var tinit =time( );
    var bitmap =new Bitmap( w, h, 'root', 'red');

    var tmanip =time( );
    for( var i =0; i <h; i++)
    {
      for( var j =0; j <w; j++)
      {
        bitmap.setPixel( j, i, ( i +j) %2 ? 'blue' :'green');
      }
    }

    var tflip =time( );
    bitmap.flip( );

    var tfinal =time( );
    var pixels =w *h;
    alert( 'create took ' + (tmanip -tinit) + ' ms (' + ( (tmanip -tinit) /pixels) + ' ms / pixel)\n'
    +'manip took ' + (tflip -tmanip) + ' ms (' + ( (tflip -tmanip) /pixels) + ' ms / pixel)\n'
    +'flip took ' + (tfinal -tflip) + ' ms (' + ( (tfinal -tflip) /pixels)   + ' ms / pixel)\n'
    +'total ' + (tfinal -tinit) + ' ms (' +  ( (tfinal -tinit) /pixels) + ' ms / pixel)\n');

    // load X pixmap image
    // ...
  });

main.css:

body {
    font-family : 'Lucida Grande', Arial, Helvetica, sans-serif;
    background : #000;
    color : #333;
    margin : 35px;
}

#rootBitmapTable {
    border : solid 4px #111;
    padding : 0px;
    border-spacing : 5px;
}

.rootBitmapTableCell {
    min-width : 10px;
    width : 10px;
    max-width : 10px;
    min-height : 10px;
    height : 10px;
    max-height : 10px;
    padding : 0px;
    margin : 0px;
    border : solid 1px #111;
}

2007-10-11

Glyphix jQuery Plugins

They provide jquery.xslTransform, "a jQuery wrapper for Sarissa, providing the ability to replace any element on the fly (using the browser's built-in XSLT engine) with the results from an XSLT transformation of an XML document." For example:

$('your-selector-here').getTransform('path-to-xsl.xsl','path-to-xml.xml');".

Sweet, looks as simple as it possibly could get. Requires jquery.debug and Sarissa.

2007-10-10

jQuery JavaScript library

"..a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages."

Some dude Simon Willison has a nice overview.

Another one from developerWorks.