Category Archives: jQuery

jQuery Smooth Animations In Firefox 4

jQuery Smooth Animations is an experiment in utilizing the new, proposed animation API found in Firefox 4. It should be noted that this API is just a proposal and is experimental. Using it on live websites isn’t recommended until the API is finalized.

jQuery Smooth Animations works by replacing parts of the standard jQuery API to make use of the new animation API if it is available. It should still be fully compatible with browsers that don’t implement the animation API.

The end result of this plugin is that animations run more smoothly on Firefox 4, by syncing the animations with paint events. In my experimental comparisons between Firefox 4 Beta 6 and Firefox 3.6.12, I noticed a significant improvement in the jerkiness of the animation in the example.

I recognize that this plugin could be slightly less invasive by not replacing any of the API if window.mozRequestAnimationFrame is not found. However, I wanted to demonstrate how the code could function within the jQuery library itself rather than as a plugin. This is based on the theory that at some point, once the API is standardized, support will be integrated into the jQuery library.

Integration into the library would also allow us to eliminate the override of jQuery.now, instead using smarter logic within jQuery.fx.step. I simply didn’t want to replace jQuery.fx.step because of the extensive logic it contains which could be changed in future releases of jQuery.

GitHub Repository

jQuery.themescript 1.1.0 Released

Today I’ve released version 1.1.0 of jQuery.themescript.  This release includes some significant improvements that make it far more functional in the real world.

The original design concept was for a web store framework I was working on.  I wanted each store be able to easily change their javascript based themes without making changes to the javascript files for the basic theme.  This made for a much easier file based deployment of new versions to each store.  The obvious downside is that you’re downloading lots of extra javascript, particularly if you’re turning features back off that were in the basic theme.  This type of functionality is only useful in certain cases, and is never the most efficient system possible with regards to performance and bandwidth, just maintainability.

This new release still maintains that basic functionality, but now I address a more common concern as well, applying themes to AJAX updates.  In order to support this, I’ve added several new features.

  • $.themescript.exec now accepts a context parameter.  This can be a jQuery object or an HTML DOM element, just like the context to jQuery’s jQuery(selector, [context]) selector function.  All registered functions will receive this context as a parameter, and it will be automatically used as the context to selector-based theming to restrict the elements returned.
  • themescript is a new function added to jQuery objects which allows you to execute the themescripts against a specific jQuery object.  $(‘#selector’).themescript() is equivalent to $.themescript.exec( $(‘#selector’) )
  • themescript( url, [data], [callback] ) works just like the jQuery load method, except that it will automatically run themescripts against the updated HTML if the request is successful.

You can also easily add support for jQuery.themescript to ASP.Net AJAX partial page updates (a.k.a. UpdatePanels).  Just add this script code to your files and the themescripts will be automatically executed against any UpdatePanels which are changed during an asynchronous postback.

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function(sender, args) {
    var</span> updated = args.get_panelsUpdated();
    if</span> (updated && updated.length) {
        $.themescript.exec($(updated));
    }
});

Here are the links where you can access the GitHub repository or download the files:

GitHub
Download

Simplify Asynchronous Javascript Loading In ASP.Net Using LABjs

LABjs is an excellent javascript library that performs asynchronous loading of javascript files. This can help to greatly increase the load speed of your web pages. Now, instead of blocking while one file is being downloaded, other scripts further down the chain can be downloaded while waiting. On top of that, it can maintain processing order, waiting to process certain scripts until others are complete, and optionally executing code on completion.

All of this is great for the client side. But how do you define which scripts to include in the LABjs chain on the server side?

Since for work I primarily operate in ASP.Net, I’ve created an ASP.Net solution to the problem, LABjs.Net. This library provides two key controls, LabScriptManager and LabScriptManagerProxy. These controls loosely follow the behavior of the AJAX ScriptManager and ScriptManagerProxy controls, at least their script loading aspects.

Key supported features include:

  1. Refer to script files using application relative paths (i.e. ~/js/jquery.min.js)
  2. Load script files from assembly resources
  3. Specify if debug or release scripts should be used, or use the debug setting from the web.config file
  4. Ability to set any of the options provided by LABjs
  5. Include wait() calls in the chain, and provide inline functions to be executed after the wait
  6. Use LabScriptManagerProxy to add scripts and waits to the chain in content pages and user controls
  7. Use LabActionGroup inside LabScriptManagerProxy to add script() calls at a specific point in the primary chain
  8. LABjs debug and release versions are embedded in the DLL and automatically referenced, but you can opti0nally override this with your own URL
  9. Experimental support for the cdnLABjs library I am working on, which provides automatic failover to a local file if a file fails to load from a CDN (for information about why, see Using CDN Hosted jQuery with a Local Fall-back Copy)

Below you will find links to the current release candidate, 1.0rc1.  Please review it and give me any feedback you might have.

Download Binaries
Readme File
Git Repository

Update 2/8/2010: Updated to version 1.0rc4

jQuery UI spinner widget

In a project I was working on I was using jQuery UI and wanted to put a spinner on a numeric text box.  Then I discovered that jQuery UI, while an excellent UI library, doesn’t yet have a spinner widget.  So I decided to write one myself, and hope that one day it gets included in the core jQuery UI release.  Until then, please feel free to use the widget for yourselves, it’s a simple plugin for the jQuery UI core.

jquery.ui.spinbuttons Git Repository

jQuery.Net

In the last few months, I’ve discovered jQuery and jQuery UI, which are a pair pretty awesome of open source javascript libraries.  I know, I’m a little behind the times here, but all I can say is “Wow”.  Frankly, using jQuery makes the AJAX library that comes with .NET 3.0/3.5 from Microsoft seem foolish and clunky.  I’ve now transitioned away from using Microsoft’s open source AJAX Control Library, instead choosing to use jQuery.

The only downside of using jQuery with ASP.Net is the lack of integration.  They now include a vsdoc file which helps with Intellisense, but there’s a long way to go.  For simplicity, I’m still using Microsoft’s AJAX code for their page methods and UpdatePanels, and primarily using jQuery for the client side controls and animations.

I’ve written a library to help with the creation of ASP.Net server controls that utilize jQuery.  I’m calling it, very creatively, jQuery.Net.  You can access the code and binaries for the library on github, the link’s below.

jQuery.Net Git Repository