Category Archive: jQuery

Subcategories: No categories

The table tag in HTML has a bit of a sordid past. Once tasked with laying out websites the table tag has been dragged through an identity crisis. As the sun set on web 1.0 – the over reaction was to remove all instances of tables. But I would argue that tables have their place. The fact of the matter is that tables are good for displaying tabular data – that was their intended purpose.

Flexigrid is making it even easier to feel comfortable with the table tag again. Flixigrid is a jQuery plugin that, in its most basic example, converts an HTML table into an interactive spreadsheet in the browser with expandable columns, alternating row treatments and a resizable frame. It takes the table tag with all of the trs and tds therein and converts them into divs – so if you are still on the fence about using tables, you can feel good about the fact that this plugin only uses it only to read the data and removes it from the DOM.

What I like about Flixigrid is the breadth of usage. As mentioned above Flixigrid in its simplest form is easy to implement. However the very same plugin can blow the lid off the tabular data with by offering the ability to display paginated rows with a pagination toolbar pulling from an XML feed via JSON.

If tabular data is on the menu in the feast of HTML you are serving up than there is no doubt that Flixigrid is sure to enhance your user’s experience.

The select tag in HTML has been getting a lot of over-due code love. Perhaps all of this attention comes from being a vital tag used in so many forms but natively lacks flexibility and consistency across browsers. Whatever the reason – there are now a myriad of tools available to help make select boxes work and look the way you want them to. Here are a few resources that stand out from the crowd when it comes to working with those select tags.

jQuery UI Selectmenu

http://jquerystyle.com/2009/08/24/jquery-ui-selectmenu

Built on jQuery UI this plugin converts your select elements into pure eye candy.The select tags are replaced in the DOM with more cross browser friendly tags and the result is theme based elements for your forms which provide the basic operations of a select tag as well as icon inclusion, multi-line support, max-height (with scrollbar thereafter), and the option to drop down or pop up as well as optgroups.

jQuery SelectBox Plugin

http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

The jQuery SelectBox Plugin offers a solid base with lots of native support. As the name suggests this plugin is specific to the select boxes. This plugin also replicates the select object in the DOM with alternative tags which open the doors to greater styling and consistency across browsers. A few of the key strengths about this plugin are the key press supports including esc, tab and arrow keys.

The plugin comes with one default look and feel. There is no theme selection. Customization would require the modification of the included CSS file.

Dropkick.js

http://jamielottering.github.com/DropKick/

We featured dropkick.js on July 6 in our post Kick Your Dropdowns Up a Notch with ‘DropKick’.As we are reviewing the best options out there for managing select tags we would be remiss if we failed to include dropkick.js. As with the other plugins dropkick replaces the select tag with more flexible code and provides a themed approach for excellent out of the box support.

Chosen

http://harvesthq.github.com/chosen/

Chosen is another plugin we featured recently and feel it should be listed here as we cover the general scope of tools available to work with select tags. The feature that stands out about Chosen is the way it handles the multi-select drop downs. The result is a smooth system that feels more like an ajax controlled tagging system. It really brings the intuitiveness that a default multi-select box lacks.

The user interface it generates is smooth and intuitive. As one might expect – the plugin requires that you supply both the scaled down and large versions of the picture.

jqZoom comes with some great features and extras. There are several zoom styles you can choose from which control how the zoom box looks and acts on the picture. In addition you can create a gallery view with multiple pictures.

With the zoom capabilities you are able to share more information about specific pictures that the pictures themselves, because of their size, would not have allowed.

Themed approach. The ability to create and share a theme file really broadens the scope for this project.

Backwards support – No javscript installed means the original dropdowns will work as originally intended.

Cross Browser Support – Under the hood this plugin removes the select and option elements from the DOM and replaces them with div elements and ul li elements, while programmatically replicating the action. Because of this the cross browser support increases dramatically.

One of the plug-in’s strengths is the number of animation effects available. The eleven animations available out of the box cover the full gamut of animation flavors – from very basic to jarring. My personal favorite, The “Sequential Slide”, really pops and creates a sexy cascading slide animation.

If great looking menus are something you dig.. then check this plug-in out…