When creating list content in Web pages, it's often quite useful to allow users to sort or reverse the order of items displayed. Creating client side sortable lists is easy to do and in this post Rick shows an easy way to make a list reversible using jQuery.

Last week I posted about a small jquery-resizable plug-in I'd built. Many questions came in about how to handle table column resizing using this plug-in and in this post I demonstrate how with a little extra work, you can also create resizable table columns using the jquery-resizable plugin.

I recently had a need for a simple resize component and couldn't find a lightweight implementation. I ended up creating a small jquery-resizable plug-in. In this post I discuss a few use cases for resizables and show the jquery-resizable plug-in, how it works and how it's implemented.

A few years back I wrote about a jquery-watch plugin I wrote that can monitor CSS property and Attribute changes and let you get notified if one of the monitored properties are changed. Unfortunately the plugin broke a while back as browser and jQuery dropped some older APIs. In this post I describe an update to the jquery-watch plugin using the newer and more widely supported MutationObserver API that brings high performance DOM node monitoring.

When dealing with HTML based list data, filtering that data based on search text is a nice UI feature that's very useful for quickly finding what you're looking for. In this post I show you how to can create this nice UI effect with a few lines of jQuery code, and then provide a jQuery plug-in that simplifies the process further.

This is a brief review of the Aysync JavaScript book by Trevor Burnham. It's great, small book that's easy to read and get through, that blazes through various Async concepts in a really easy to understand and practical way. Great read and highly recommended.

In jQuery 1.9 and later the jQuery.live() function has finally been removed which has caused me a bit of upgrade trouble. While jQuery.live() has been deprecated for a while now since 1.7, 1.9 actually removes the function. In this post I describe how you can use the .on() function to replace existing .live() code with a little bit of extra work.

Handling keyboard input events in JavaScript can be tricky when you need to deal with key codes. There are browser difference and different behaviors for various key events. Here's a refresher on how keyboard events work and a utility that lets you test key strokes and their resulting key codes in the various events available.

How do you display editable time values in Web applications? While date display has a pretty clear UI choice with date pickers, visual time picking isn't very efficient. In this post I show a keyboard based alternative to navigating and entering time (and date values) values using hotkeys hooked up through a jQuery plugin.

In this post I describe how to use the West Wind Web Toolkit to create an AJAX/REST service that can serve data to a JavaScript applications with a few short steps. Then we'll look at ways to access the server side code with simple jQuery/JavaScript code and the ajaxCallMethod() helper.

Loading jQuery into a page consistently across the lifetime of an application involves, managing versions and updating urls frequently. In this post I look at my preferred way to load jQuery and how to manage the script reference that gets embedded into the page with a single update location.

Table displays in limited space require some rendering alternatives. While paging is a common way to address fixed size displays, it's not an end-all solution. Sometimes it's necessary to display larger amounts of data in a small fixed space on an HTML page. Scrollable list are fairly easy to do with most HTML structures, but HTML tables are notoriously difficult to manage when it comes to scrolling. In this post I describe a jQuery plug-in that attempts to make any table scrollable by decomposing and reassembling the table into two distinct areas.

There are lots of examples limiting HTML textbox input to numeric values only but most examples fail to capture valid keys like navigation and edit keys properly so as to not interfere with normal textbox behaviors. Here's a simple plug-in that takes special keys into account.

I have the need to monitor movement of elements in an HTML document via JavaScript. Unfortunatey there are no events that fire if HTML elements are moved around the document either via dragging or by programmatic location changes. As a workaround I created a jQuery CSS monitoring plugin that fires event when a given CSS property changes.

If you have multiple submit or link buttons in an ASP.NET Page and one or more of those buttons needs to post to a different target there's no built-in way to force one or more of those buttons to POST to a different frame/window. With a little bit of JavaScript though it's real easy to change the form's target dynamically as needed.

I've found it very useful to have a closeable plug-in that hide the content of an HTML element providing a visual close image cue. Almost every UI I build these days requires either closing pop up windows or even more commonly requires that items are removed and visually hidden which usually implies 'close' behavior. In addition to removing a bunch of HTML markup, having a plug-in is also quite useful for server controls especially if multiple behaviors (plug-ins) need to be applied.

ASP.NET's GridViews (and the older DataGrid) don't generate the best HTML and one of the common problems I run into is that headers aren't generated with proper thead tags. With a little jQuery script help this can be fixed easily when the page loads. Here's how.

The jQuery JavaScript library has been steadily getting more popular and with recent developments from Microsoft, jQuery is also getting ever more exposure on the ASP.NET platform including now directly from Microsoft. jQuery is a light weight, open source DOM manipulation library for JavaScript that has changed how many developers think about JavaScript. You can download it and find more...

ASP.NET and WCF AJAX Web Services and PageMethods natively don't accept urlencoded POST requests and so standard mechanisms for sending form POST data don't work directly with these services. However, with a few adjustments and using jQuery's .serizalizeArray() function it's possible to POST form data to ASP.NET Services and easily consume the form data.

jQuery makes it easy to bind events of DOM elements, but did you know that you can also bind to plain JavaScript function handlers with a little bit of extra work?

I've posted my slides and samples from the DevConnections VS 2010 Launch event last week in Vegas.

Ran into a small compatibility issue with jQuery 1.4 where the $.css("opacity") function overwrites existing IE filter settings rather than additively applying them which has caused me a few problems with some components that heavily rely on opacity as well as a couple of other IE filters.

There's a rather sneaky bug in jQuery and Internet Explorer that causes jQuery's various fade methods like fadeIn/fadeOut/fadeTo to not work with table elements in any version of IE. The fade behavior doesn't have any effect on tables, rows, headers, but luckily the end result - a removed or visible element still works. Only the fade effect seems to go missing in action.

ASP.NET ClientIDs and NamingContainer naming are a nuisance when working with jQuery as these long IDs complicate finding elements on the page. In this post I show a very simple way to retrieve munged ClientIDs by just their ID names with a small helper function that still returns the jQuery wrapped set.

This post revisits the WCF/ASMX ServiceProxy that can be used to make native jQuery calls to ASMX and WCF AJAX services. The component is self contained and provides JSON conversions including dates, as well as a simple class interface for simple one line service calls and consistent error trapping. This is an update that handles native JSON parsers. Includes examples and a detailed walk through on how it works.

The jQuery UI datepicker is a nice and easy to use datepicker control but if you're using it with other components that use absolute positioning you might run into issues with z-Index precendence. Here's a discussion of the problem and a couple of easy solutions around it.

Updated the jQueryDatePicker control from an old version of Mark Grabansiki's jQuery calendar to the latest version of jQuery.ui. This is an easy to use wrapper around the control to make it easy to drop the control onto a page with minimal configuration fuss and provide POST back functionality on the inline behavior.

Finding the largest zOrder is a useful feature if you are building applications that use pop up windows, use modal dialogs or otherwise allow dragging and dropping of content around a page. Here's a small jQuery plug-in that makes it easy to find the highest zOrder or assign a new higher zOrder to a jQuery selected element(s).

I’ll be speaking at the PADNUG meeting next week in Portland at the Microsoft office. Rich Hubbins asked me to present on jQuery again as I did last year. A lot has changed in the last year and when I gave the last presentation jQuery was just starting to get some attention in the .NET world. By now many more people have been using jQuery for a while so  this talk likely will hit a different...

One neat feature I've been using in HTML forms recently is to use dynamic pop up drop down lists for editing of list content. The idea is that you have plain text or link labels that when edited are turned into drop-downs for making selections from, which provides a nice interactive effect while editing document content. Here's an example that demonstrates how to dynamically create a drop down, load it up with data and display results using jQuery, MVC and the West Wind Web Toolkit.

Inline editing content is a feature that's novel and highly useful at the same time. I've been using it in a number of admin interfaces to provide very easy and quick text updates to existing content. There are a number of ways to accomplish this but in this post I'll discuss a contentEditable jQuery plugin that makes any content inline editable using the DOM's contentEditable attribute that maintains text formatting in the editable text.

The jQuery .sortable plug-in is one of the nicest jquery.ui components. It looks and feels great, is easy to use and provides a common feature for user interfaces. However I've run into an issue a few times with the .sortable behavior triggering clicks when items are dropped at the end of a sort operation. Here's how to get around this.

I've posted Part 2 of my jQuery with ASP.NET article series. Part 2 deals almost entirely with making AJAX callbacks to ASP.NET using several different mechanisms to retrieve data from the server for client side consumption. Covered are external content retrieval, same page callbacks, WCF/ASMX and a pluggable custom callback implementation that can be used with any application. Also covered is client side templating for managing HTML in one place.

I've published my session slides and samples from the Fall 2008 ASP.NET Connections conference. The sessions include: jQuery and ASP.NET, WCF REST and JSON with ASP.NET and Dealing with Long Running Requests in ASP.NET.

With Microsoft's recent releases of the jQuery Intellisense file plus the hotfix released this week using jQuery in Visual Studio has become a lot easier and more convenient. Here is a little more detail on what you need and how it works.

jQuery makes it easy to search content of matched elements by using the :content filter which allows for some pretty cool search effects you can implement with a couple of lines of code. Unfortunately :contains is case sensitive though, but never fear jQuery allows creation of custom filters that allow you to provide a custom case insensitive version.

It's common for me to create DOM elements that pop up ontop of existing content by making them absolutely positioned. Here's a quick plug-in that makes an element absolute.

Client templating in Javascript can be a great tool to reduce the amount of code you have to write to create markup content on the client. There are a number of different ways that templating can be accomplished from a purely manual approach.

One thing that bugs me about jQuery selectors is that empty or null selectors return the HTML document object, rather than an empty jQuery object. This has bitten me on a number of occasions and requires some

I've posted Part 1 in a two part series on jQuery today. Part 1 covers the client side features of jQuery from the basics all the way through creating simple plugins and extending jQuery. This is a long article that discusses a host of the really useful features that jQuery brings to the table for client side Javascript development. Part 2 will then follow up with server side ASP.NET integration.

Ran into a little issue today with jQuery.position() failing when elements are not visible. Apparently when elements are hidden jQuery is unable to retrieve the computed styles necessary to get the positioning information and bombs. Making the element visible first fixes the problem.

I've revisited a jQuery plug-in that can be used to monitor changes in CSS properties and be notified when a specific property changes providing an Observer style callback. This can be a handy feature when building behavior components that attach functionality to other elements and need to keep these behaviors in sync with the original object. This update utilizes a more efficient approach and allows monitoring many properties at once.

When building AJAX applications that send client form content to the server, ViewState and EventValidation fields can get in the way. Using jQuery you can make short work skipping over these fields and send only the raw POST data to the server.

Centering content is a useful client side UI feature especially when working with pop ups or popup windows when displayed for the first time. Here's a little jQuery plug in that handles centering in the window and in other container elements easily.

I'll be doing my annual presentation at the Portland Area .NET User Group (PADNUG). The topic this time around is Using jQuery with ASP.NET which is a fun presentation that covers JavaScript and specifically jQuery use with ASP.NET without using ASP.NET Ajax. Here's the presentation abstract: Using jQuery with ASP.NET jQuery is a compact and powerful JavaScript library that is quickly becoming...

I find myself struggling with effectively managing JavaScript scripts across multiple projects. Between version changes and updates to my own components I spend a lot of time comparing versions and trying to sync up files. There are a number of different ways to load and manage script resources, and in this post I show a few with their pro's and con's, but none of them seem ultimately satisfying. What are you using to manage 'Script File Hell?'

I've updated my slides and samples for last spring's Devconnection's sessions to reflect some of the recent updates in jQuery and jQuery.ui, which now have been updated to release versions. In addition there have been a few bug fixes and better configuration documentation for the samples.

Ran into some odd issues with WCF 3.5 and HTTP JSON services hanging up an ASP.NET application. It appears that there are a couple of problems with null serialization and small date value serialization that are causing this problem.

Status bars are very useful in client applications to display well status information and having a reusable and easily callable and configured status component to display messages is extremely handy. Here's an implementation that uses jQuery plus a bit of CSS to make short work of displaying status content.

My jQuery editorial for the Code Magazine Newsletter went live today. It turned into a rather lengthy affair (what else is new?) even though it's a high level editorial and so doesn't show code. The piece discusses jQuery's functionality, benefits and some considerations for ASP.NET integration, but keep in mind that this is an editorial discussion rather than a 'how to article' (which will...

Here's a review of three jQuery books I've read over the last few months.

jQuery is a small, yet very powerful and extremely addictive JavaScript library, that's rescued me from my JavaScript phobia I've had for many years. Although I've dabbled for years off and on with JavaScript I've not really had any joy with it until I started using jQuery. Here is my take on why this library is such a kick ass tool to have in your Web development toolkit.

Sortable lists are a common thing to work on and jQuery.ui's Sortable plug in makes it super easy to create very nice looking sortable lists that work consistently even in complex layouts.

Here's an overview of how to call WCF REST services with jQuery. The basic process is very easy, but if you want to handle the formats that Microsoft sends down reliably, you have to make some format choices and deal with JSON encoding and decoding that is not native to jQuery.

When building AJAX applications there's often the requirement to choose between client and server side rendering. Server side ASP.NET controls provide rich templating, but updating those controls on the client can be difficult. Or is it? Here's one approach using jQuery and HTML templates in markup script to dynamically create complex layout on the client without writing reams of script code.

Getting jQuery to work with Intellisense in Visual Studio is now possible after Microsoft updated script parsing code in a recent hotfix. Although there are improvements in basic parsing and some Intellisense is supported, by making some very minor comment changes to jQuery.js can improve Intellisense support drastically.

Here's a jQuery based implementation of an Editable extender that makes any simple text element editable. You can apply it against simple tags or entire tables or grids and make them editable. Callbacks fire when data changes and there are host of useful features like editing anchor text, limited keyboard navigation, visual change indication and more...

I'm a bit mystified by various JSON implementations out there that don't seem to be dealing with dates correctly. I've been using Douglas Crockford's JSON implementation from JSON.org and originally I had to fix up the date processing so that it would work on both ends for serializing and...

A couple of months ago I posted an ASP.NET wrapper around Marc Garbanski's Calendar control. Just so was my luck that a couple of weeks after I created the control Marc rev'd the jQuery control, renamed it and basically overhauled the control for it's inclusion as part of the jQuery UI suite....

One of the things I love about jQuery (and a few other JavaScript libraries) are how selectors can make life very easy when dealing with many objects in the HTML DOM via JavaScript. For example, someone asked a question the other day during training of how to check client side validation in a...

I've posted a wrapper ASP.NET around the jQuery-calendar control from Marc Garbanski. This small client side calendar control is compact, looks nice and is very easy to use and I've added an ASP.NET wrapper around it so it can more easily be more easily used with ASP.NET applications by dragging and dropping onto a form and supporting postbacks of the SelectedDate.