iHwy Development Blog

We've released a new version of our jQuery Validation plugin credit card extension. Changes include:

1. updated card prefixes (including latest Discover Card changes)
2. support for LaserCard

More info here:

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

We have other lab stuff here, too:

http://www.ihwy.com/labs/

We've released a new version of our jQuery Validation plugin credit card extension. Changes include:

1. updated card prefixes (including latest Discover Card changes)
2. support for LaserCard

More info here:

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

We have other lab stuff here, too:

http://www.ihwy.com/labs/

We've released a new version of our jQuery Validation plugin credit card extension. Changes include:

1. updated card prefixes (including latest Discover Card changes)
2. support for LaserCard

More info here:

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

We have other lab stuff here, too:

http://www.ihwy.com/labs/

New versions of our jQuery listnav and listmenu plugins are now available:

http://www.ihwy.com/labs/jquery-listnav-plugin.aspx
http://www.ihwy.com/labs/jquery-listmenu-plugin.aspx

What's new:

ListNav plugin

1. added an includeOther option to provide a top level '...' nav link to access items that start with chars other than A-Z and 0-9. For example, chars like Ä and Ü.

2. added a prefixes option to provide a way to show "The New York Times" under T and N. Pass in your own prefix array.

See the new demo 6 here for examples of both:

    http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx

ListMenu plugin

1. added an includeOther option, just like the one for the ListNav plugin.

2. added an onClick option that simplifies handling clicks in the dropdown menu (for things like pulling an href out of the clicked link to use it for an ajax call). The onClick uses event delegation, so is low overhead and the clicked object is available as a jquery object in your onClick function.

See demo 3 here for includeOther example and demo 6 for onClick example:

    http://www.ihwy.com/labs/demos/current/jquery-listmenu-plugin.aspx

Some of these features were based on user requests from the jQuery community. Thanks to everyone for the feedback!

Introduction: The business problem

One of our core strengths is our ability to build tools that collect, analyze and search large volumes of information in a user friendly manner. We use great technologies to solve complex problems (see sidebar). Our experience in these types of applications is broad. We built the entire Intelitouch system, which we can easily claim was one of the first real estate management systems available on the Internet. That first generation CRM application led to many of the features that are common in all of today’s similar applications. We wrote the second and third generations of the entire Sponsorwise platform, which allows clients to collect specific pieces of information and generate detailed analysis. This application is in use today by companies like Jet Blue, US Bank, Panera and Pet Smart. The user interface is simple, yet intelligent and sophisticated. Underneath the simple user interface is a robust set of tools designed to collect and analyze information. These applications solve complex data collection problems.

One of our recent projects, Mainstay, is the newest generation of enterprise software in this class of applications. The term “generation” is appropriate because this product is a step above all the others. iHwy's collective experience, know-how and pain have been applied it to every aspect of this technology.

Mainstay is a platform-independent web technology tool that collects data.

Our customer, Harkcon, came to us with a need to create a solution that would run disconnected from the web and work on Mac, Windows and Linux as a desktop application. The program also needed to be able to run disconnected, regardless of whether or not there was an Internet connection. It was not a requirement to use web technologies, but it was a more effective, modern and nimble.

Stay tuned for more detailed information about this project.

Today we released the iHwy listmenu plugin, which allows a web developer or designer to convert a basic 'list' of HTML elements (UL, OL or any set of child elements) into a snazzy dropdown menu with letter-based navigation (ie: A | B | C | etc).

The plugin is very easy to use. In most cases all a web developer will have to do is create the list of elements and then use one line of jQuery code to convert the list into the navigation menu. When a user hovers over a navigation letter in the menu a submenu appears containing all of the items from the list that start with that letter.

The items in the submenu are arranged in nicely balanced columns. If the list was an ordered (OL) list, numbering starts at 1 for each letter and is maintained across the columns (top to bottom, left to right) for that letter. There are options to control the number of columns and the 'gutter' space between them, among other things.

The HTML generated by the plugin is designed with CSS styling in mind and a starter css file is included to help implement the plugin.

We tuned this plugin for speed and tested it in FF 3.x (Win/Mac), IE 6/7/8rc, Opera (latest), Safari (Mac 3.2.1, Win 4beta) and Google Chrome (Win) using jQuery 1.3.2 and 1.2.6 (1.3.2 is faster, probably because of sizzle).

This is great plugin for big product lists, address books, contact lists, etc. It makes a hard to navigate plain old list into something really compact and very easy to visually skim that's only visible when you need it.

Full documentation:

    http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx

Multiple demos:

    http://www.ihwy.com/Labs/demos/current/jquery-listmenu-plugin.aspx


This project grew out of the jquery listnav plugin that we released in late 2008 (and released a new version of today). It's been exciting to work on these contributions to the open source world. We hope you enjoy them!

Today we've released a new version of the jQuery ListNav plugin that we released in late 2008. This plugin creates a letter-based navigation bar (ie: A | B | C | etc.) for any UL or OL list. Clicking a letter in the navigation bar filters the list to show only items that start with the letter. When a user hovers over a navigation letter, an optional 'count' appears above the letter, signifying how many items are under that letter. Letters that have no items under them appear as "disabled" (via a CSS class you can set).

Full info is here:

    http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx

And here's a direct link to the demos:

    http://www.ihwy.com/Labs/demos/current/jquery-listnav-plugin.aspx

New features in this version:

1. By default, the nav bar now includes a [0-9] navigation button to show items that start with numbers. There's an option to hide that if you don't need it.

2. If you include the jquery.cookie plugin in your page, you can use the new ListNav cookieName option to have the listnav control remember the last letter your user clicked, then reload the list automatically to that letter when they return to the page.

3. Added optional onClick handler: you can fire a custom function after a navigation letter is clicked. The letter that was clicked is available as an arg for your custom function.

4. Dropped a few options that had to do with forcing CSS class names on the list: all styling is now handled purely via CSS.

5. Modified some class names used in the HTML that the plugin generates, to provide more a more unique naming convention and additional handles to style elements.

We enjoyed creating this new rev. There are still a few requests on our plate, including handling of DL lists and the ability to work with any 'list' of child elements. We've got those things on our radar for future releases.

Happy navving!

We've released an new extension for the jQuery Validation plugin that provides a more thorough credit card validation routine. It allows you to pass in the type of credit card being used, so the validation can also check card number prefix and length. This extension also allows spaces and dashes to be entered into the card number (it's up to you to strip them out when they get submitted). The extension also does mod-10 validation of the card numbers, like the core creditcard validation routine does.

Info, examples, documentation and download links are available in the Labs area of our site:

http://www.ihwy.com/Labs/jquery-validate-credit-card-extension.aspx

 

We released a bug fix for our jQuery listnav plugin today to resolve an issue that occurred if the main list's list items had nested lists inside of them. The plugin was including the nested list in the counts that appear above the letters in the dynamically created navbar and was hiding the nested list items when it should not have been. Thanks to folks on the jQuery developers list for pointing this out!

We've seen some great usage of the plugin in some sites out there. Have a feeler out to the site authors to see if they'd like a mention. If you're using the plugin, we'd like to see how. Feel free to drop us a quick line and any feedback you have. Thanks!

Today we're releasing a jQuery plugin that we created for the business directory section of a pet project site of ours, www.hwy9.com. We'd always wanted to have a javascript-based control that we could easily apply to long lists of items to allow quickly navigating around the list. Since most lists are alphabetically sorted, we came up with a plugin that allowed us to have a long list and then, by binding the list to our jQuery listnav plugin, an alphabet-based navigation bar would magically appear above the list, showing all of the letters from A to Z. Clicking on a letter dynamically filters the list, so you can, for example, click on C and the list changes on-the-fly to show you only items beginning with C.

There are lots of neat little features to the control. We've posted full information and demo's here.

A couple of the interesting features worth calling out are 1) that when you hover over a letter in the list navigation bar, a count appears above the letter, telling you how many items will appear if you click that letter 2) letters that don't have any items under them appear looking "disabled", as a visual clue that there aren't any items starting with that letter (so that the user doesn't have to find out by clicking the letter).

One of the demos (demo 4) also shows using the listnav plugin on a list that has floated items in it. In the demo, each list item looks like a box and they are arranged left-to-right, row by row. Clicking on a letter shows only the boxes that have wording that starts with that letter. This could be handy for making an address-book like layout on a web site: click the letter in the navigation to see the contacts that start with Y, for example. Each box can contain anything you want it to: the listnav control pays attention only to the first letter of the first text in the list item.

The control has been optimized for speed. It's able to handle binding to lists with hundreds of items in them very quickly. Any jQuery selector can be used to bind to your lists, so you can bind it to multiple lists on a single page using just a CSS class name, if you want to. It works with UL and OL (numbered) lists. If you use an OL, the numbers restart themselves for each set of list items that appear (ie, if you click on 'C' and that has 5 items, they will appear numbered from 1-5).

We hope you enjoy the jQuery listnav plugin. We enjoyed creating it.