jQuery 1.4 was released on Thursday January 14.

New Features and updates include

• Performance Overhaul of Popular Methods
• Easy Setter Functions
• Ajax
• Nested param serialization
• JSON and script types auto-detected by content-type
• Etag support has been added
• Strict JSON parsing, using native JSON.parse
• Serialize HTML5 elements
• Context for Ajax Request
• Success callback receives XHR object as third argument
• Explicitly set a content-type
• Explicitly specify a JSONP callback name 
• Avoid pre-flighting cross-domain XHR
• jQuery.ajax() is now using onreadystatechange instead of a timer
• Attributes
• CSS
• performance improvement
  
• Data
• .data() returns Object and .data(Object) sets the object
• Data cache is no longer created if it isn’t needed
  
• Effects
• Per-property Easing
• Events
• New Method: jQuery.proxy()
• Event Multi-binding
• New events: `focusin` and `focusout`
• All Events Can Be Live Events
  

Need to watch for this important change between 1.3.2 and 1.4
jQuery() (with no arguments) no longer converts to jQuery(document).

Loads more at jQuery 1.4 and we will be updating our ASP.Net JQuery Select transfer lists for jQuery1.4 in the coming days

On the home page of Financial Centre UK, we were down loading 10 seperate css images for our web page. That is 10 seperate http requests to download 10 images from our servers and slow down the rendering our the page on your browser. So we set about implementing css sprites to speed up the rendering of our pages.

Q: What are CSS sprites?
A: A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page.

Q: Why should I bother to create CSS sprites?
A: Using sprites reduces the number of HTTP requests in the page. This is one of many technique for making web pages faster. This is especially important for users with slow Internet connections or who are far away from your servers. Also, some browsers, including Internet Explorer 6 and 7, can only make two HTTP requests in parallel (to the same server). If the page has multiple background images, they are downloaded sequentially, resulting in a slow page.

We used Spriteme to implement css sprites.  Was it easy to implement? Yes!!

Spriteme runs directly on your webpage to find all the css images and groups them into a css sprite image for you. It then recomputes CSS background-positions for you to use in your css layout.

Upload the new css sprite image to your server and implement the new css background-positions in your css layout file; replacing the old css backbround-positions.

Watch you number of http requests for images drop to 1. Use firebug to see this happen.

In the Financial Centre UK sign up process, we asked users to add categories for their company. We had a simply text box which they entered a comma separated list of categories. But we wanted to jazz it up and add new functionality to suggest categories to them.

Here is a screen grap of the finished product -


We looked around the web for a good jquery widget to allow us to populate the lists before hand or using ajax and transfer to another list but nothing seemed to fit our porpuse. So we create a new jquery widget to implement the functionality.

The widget needed to support drag and drop, add all and an easy way for us to populate the suggested list. We first started using the html select tag but jquery ui doesn't seem to support drag and drop  functionaltiy we wanted. Then we looked at just using the html ul tag but we couldn't find a clean way of posting back the selected categories from the user. So we took a hybrid approach and used both the html select and ul tags.

In the htmk markup we have two html select tags, one for the suggest categories, the other for the selected categories. The suggest categories is populated when the page first loads for the user. The selected category is populated when the user selects/add a new category.

The widget is initialised using the options below when the document is ready.

 $('.ListBox1').listtransfer({
        to: '.ListBox2', //selector of second multiple select box
        dblClick: true, //true or false, activates double click transfer
        addId: '#addT', //add buttong id
        removeId: '#removeT', // remove button id
        addAllId: '#addAllT', // add all button id
        removeAllId: '#removeAllT', // remove all button id
        tClass: 'added', //class to be added when tranfered to another select.
        container: '#TagGenerator'
    });


The widget hides the html select tags and inserts html ul tags instead.
    this.element.hide();
      $(o.to).hide();
      this.suggestedList = $('<ul class="select1"></ul>').insertAfter(this.element);
      this.selectedList = $('<ul class="select2"></ul>').insertAfter($(o.to));

We then populate the html ul tags with the information in html select tags.
    //populate the lists.
      this._populateInit(this.element, this.suggestedList);
      this._populateInit(o.to, this.selectedList);

Setup each of the list items to be draggable (see http://jqueryui.com/demos/draggable/) and clickable for both ul lists.
    $('li', this.suggestedList).click(function(event) {
            $(this).toggleClass('selected', '');
      }).addClass('ui-widget-content').draggable({ containment: $(o.container), revert: 'invalid', cursor: 'move' });

Both ul lists have the following applied to them to make them dropable (see http://jqueryui.com/demos/droppable).
                $(this.selectedList).droppable({
                    accept: '.select1>li',
                    activeClass: 'ui-state-hover',
                    hoverClass: 'ui-state-active',
                    drop: function(event, ui) {
                        // $(this).addClass('ui-state-highlight')
                        $(ui.draggable).css('left', '0px');
                        $(ui.draggable).css('top', '0px');
                        $(ui.draggable).addClass(o.tClass).removeClass('selected').appendTo(that.selectedList);
                        that._addToListBox($(ui.draggable).text());
                        if (o.dblClick === true) {
                            $('li', that.selectedList).dblclick(function() {
                                that._cRemove();
                            })
                        };
                        event.preventDefault();
                    }
                });

Notice the _addToListBox in the code. This is an internal function to the widget so that items can be added to the html select tag for selected categories. The corresponding function _removeFromListBox removes the items from the selected categories when the user removes an item from the html ul tag for selected categories.

The _addToListBox function is simply a one line in jquery -'$('<option value="' + item + '" selected>' + item + '</option>').appendTo(this.options.to);'
While the _removeFromListBox  is '$(this.options.to).find('option').filter(function(index) {
                return ($(this).text() == item);
            }).remove();'

We used the articles at http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/, http://mattberseth.com/blog/2008/07/jqueryui_progressbar_widget.html and http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html to help in understanding how to create a widget for JQuery UI.

Financial business directory - Financial Centre UK launched to help financial companies have a present on the internet.
The website allows companies to create a business page for them. Adding some product or service information, articles, or company announcements to your business page helps give Financialcentreuk’s visitors detailed information about your business and what you do and helps increase the chances of your business page appearing at or near the top of search sites like Google and Yahoo and Twitter!.
Adding product or service information is free and you can add as much information as you like. The more product or service information you add, the more likely new customers will be able to find your business.
We hope Financial Centre UK helps your company in some small way.