Tuesday, January 30, 2007

jQIR - jQuery Image Replacement (updated)

Get jQIR to replace contents of tags (e.g. headings) with images. Can now use class as well as id.

Friday, January 26, 2007

Firebug 1.0

If you are a web developer and use Firefox, you are likely to have heard of Firebug. The final version of Firebug 1.0 is out, and offers a lot more than the previous version (0.4.1). So I would suggest you to Get Firebug if you haven't already.

It is great for debugging as you can edit/inspect HTML and CSS on the live page and set breakpoints in JavaScript. If only Internet Explorer had something like this (I am aware of the Microsoft Script Editor (comes with Office and is activated within Word/Excel etc by pressing Alt+Shift+F11) and Visual Studio, but they are external applications and don't allow debugging while in the browser).

Firebug is even handy for non-developers (if they are interested in moving into development) as you can see the scripts and CSS pages are using, as well as see what files are being downloaded by the browser (including those downloaded by Flash).

Friday, January 19, 2007

Getting jQuery Version

There is a way of getting the jQuery version, but it is not through using jQuery.version as you may expect.

alert("jQuery version is: " + jQuery().jquery);

Here is a basic function that can be used to grab more valuable information from this.

function jQueryVersion()
{
 var ver = (new jQuery()).jquery;
 // if there are two .'s it is a bug fix release
 if(ver.match(/\./g).length == 2)
 {
  return {
   "version" : ver,
   "major" : ver.substr(0, ver.indexOf(".")),
   "minor" : ver.substr(ver.indexOf(".") + 1, ver.lastIndexOf(".") - ver.indexOf(".") - 1),
   "revision" : ver.substr(ver.lastIndexOf(".") + 1)
  }
 }
 // otherwise it is an initial release
 else
 {
  return {
   "version" : ver,
   "major" : ver.substr(0, ver.indexOf(".")),
   "minor" : ver.substr(ver.indexOf(".") + 1),
   "revision" : 0
  }
 }
}

This could be handy when developing plugins, as they could alert the user if they are using a version of jQuery not supported.

jQuery.fn.myplugin = function()
{
  var version = jQueryVersion();
  if(parseInt(version.minor) < 1)
  {
    alert("jQuery version 1.1 or higher is required for myplugin");
    return this;
  }

Thursday, January 18, 2007

Link: Sites Using jQuery

Several high profile sites use jQuery. The jQuery Wiki has a page listing those sites: Sites Using jQuery

Tuesday, January 16, 2007

Checkbox manipulation with jQuery

Updated my plugins for working with checkboxes http://www.texotela.co.uk/code/jquery/checkboxes/

Toggle, check, uncheck and make them behave like radio buttons.

Works with jQuery 1.0 and 1.1.

You supply the container, and optionally return the check items (if using toggleCheckboxes or checkCheckboxes) or unchecked items (unCheckCheckBoxes):

$("#mycontainer").toggleCheckboxes().doSomethingWithMyContainer();
$("#mycontainer").toggleCheckboxes("[@name=foo]", true).doSomethingWithCheckedBoxes();

For turning a checkbox group --> radio style selection:

$.radioCheckboxGroup("fieldname")

Monday, January 15, 2007

jQuery Documentation

Update 24 Feb 2007: Link to Sean O's jQueryHelp

Update 23 Feb 2007: Added links for PDF's of API

Update 29 Jan 2007: Jörn Zaefferer's API browser is no longer a draft. Link below. 22:10 it also is printer friendly and can be downloaded for offline viewing. Visual jQuery 1.1.1 is also now available (and can also be downloaded).

Update 18 Jan 2007: A PDF Version of the documentation is available. To download, go to JQuery documentation in PDF. Only for the latest version of jQuery (1.1), although those with experience with Java will probably be able to check out an older version to generate the documentation.

If you are a user of jQuery, it is likely that you are aware of Visual jQuery, which is an alternative reference for the jQuery API. What you may not know, is that on the site is documentation for other versions as well (so if you still use an older 1.0.x version, you can still see it on the site). Here are the links (that I know of) to the documentation of the various versions. Also included is the blog post announcing the release of each version, with details of bugs fixed, feature changes etc.

There are also several other places that have their own version of the API documentation:

  • jQuery API (the original API page, hopefully it will still be kept up to date when new versions come out)
  • jQuery Documentation Wiki
  • Draft API jQuery API Browser by Jörn Zaefferer (one of the key developers of jQuery) There is also an application you can download (no install required) that allows you to look up a function in this API browser by simply highlighting it and pressing Ctrl-Shift-J - Sean O's jQueryHelp
  • gotapi.com also has it (version 1.0.3), but unfortunately the jQuery API page on the site can't be bookmarked, so it has to be clicked on in the centre frame

It also available in PDF format:

There are probably more that I have missed which I will hopefully be able to add to this post.

What I have not seen yet, is a PDF or a CHM (HTML Help) version of the documentation. Both It would be valuable for browsing offline (although I doubt many web developers now are offline very often) and searching can be easier and faster. Thankfully there is an XML version of the documentation (available on the jQuery API page and in the post announcing 1.1) that could be used to generate a PDF or CHM file. I am not sure if the XML files for the older versions (i.e. 1.0.x) are still available though.

Wednesday, January 03, 2007

Associative Arrays in JavaScript

Some developers misuse the Array constructor to create an associative array. However, this is not a good way of doing this as all the methods/properties available to an array (length, index, sort etc) will not work.

var foo = []; // [] is the same as 'new Array()'
foo["bar"] = "baz";
alert(foo.length);

When the alert fires, it will return '0' instead of '1'.

As it doesn't function as a proper array, you may as well use an object instead:

var foo = {}; // {} is the same as 'new Object()'
foo["bar"] = "baz";

However, you can't see how many items there are without looping through the object. I have written a simple class that can be used that offers this (through the function 'getSize()' as well as a few other methods). As a result, you can't have anything with the keys 'getSize', 'remove', 'toString' and 'toArray'.

var AssociativeArray = function()
{
 if(arguments.length == 1 && arguments[0].constructor == Object)
 {
  for(var item in arguments[0])
  {
   this[item] = arguments[0][item];
  }
 }
 this.getSize = function()
 {
  var length = 0;
  for(var item in this)
  {
   if(item in new this.constructor === false)
   {
    length++;
   }
  }
  return length;
 }
 this.remove = function(item)
 {
  if(item in new this.constructor === false)
  {
   delete this[item];
  }
 }
 this.toString = function()
 {
  return this.toArray().toString();
 }
 this.toArray = function()
 {
  var output = [];
  for(var item in this)
  {
   if(item in new this.constructor === false)
   {
    output[output.length] = item + "=" + this[item];
   }
  }
  return output;
 }
}

To use this is pretty simple:

var foo = new AssociativeArray();
foo["one"] = 1;
foo["two"] = new Date();
foo["three"] = "A string";
// the above can also be done like this:
// var foo = new AssociativeArray({"one":1,"two":new Date(),"three":"A string"});
alert(foo); // alerts a comma separated string containing the items added
alert(foo.getSize()); // alerts the size (i.e. 3)
foo.remove("one"); // remove item 'one'
alert(foo.getSize()); // alerts the new size (i.e. 2)
var ar = foo.toArray().sort(); // sorted array (by key)

Link: Code Snippets

Code Snippets is a public source code repository where you can add your own and share them as well as browse existing ones by tags. Unfortunately it lacks search facilities or a way of navigating by multiple tags (i.e. you can not find snippets with the tag 'array' and 'javascript').