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
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.
Key presses are partially supported. Tab and escape Key work. Up and down arrow keys do not. You can download selectmenu from github.
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.
There are no themes provided other than the default, but the CSS is readily available for custom styling. You can download this plugin from gtihub.
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 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.
Want to show off all the detail of a large picture without taking up the entire browser? The jqZoom plugin allows users to easily explore large photos in a controlled area.
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.
One of the coolest features of Chosen is the way it converts multiple selects into an intuitive and auto-completing element which mimics the tagging functionality that users have become increasingly comfortable with.
Just as we discussed about dropkick.js – Chosen replaces the actual SELECT and OPTION tags from the DOM and replicates the functionality with DIVs and ULs. The result is beautifully styled method for handling selects of all types which are cross browser compatible.
- Chosen is available for multiple libraries including jQuery, prototype.
- Available for forking on GitHub – Notable forks being Chosen for MooTools and Chosen Dripal7 Module.
- The way the multiple select boxes are handled is really slick.
- Incorporation is easy – so easy in fact that the third step is “Disco” with a link to the Pulp Fiction’s Preacher Man Scene on You Tube. Gotta love it.
The JSFiddle environment can be loaded with one of 11 different libraries with support for different versions of each. For example in jQuery you can load version edge, 1.2.6, 1.3.2, 1.4.4, 1.5.2, 1.6.1 or 1.6.2. For each version of jQuery you have the option of also loading the corresponding version of jQuery UI and jQuery Lint if available. In addition additional resources can be added to the environment using the Manage Resources section on the left.
The true power of JSFiddle is the ability to put code into an all inclusive collaborative environment. A lot of front end developers have used JSFiddle to troubleshoot their code, give examples of how code should be used and create simple proof of concepts. JSFiddle is a favorite of front end developers for sharing the code relating to their questions and answers on code discussion sites like Stack Overflow.
With the consistent support of ever changing libraries and the ability to quickly and easily share an environment JSFiddle is a great resource for any front end developer.
If developing a jQuery plugin is in your immediate future than having a template to jump start your jQuery plugin will be an invaluable resource.
Stefan Gabos has provided a fantastic jQuery Plugin Boilerplate. A few features that I really dig about this template are:
- Default variables that can be overwritten by user on plugin initialization
- Callback function capabilities on event-driven plugins
- The incorporation of ‘public’ and ‘private’ method handling
- Dynamic reference to jQuery if noConflict is enabled
The script is well commented and comes with usage examples. With this resource you are ready to rock and roll – code style. Good luck with that jQuery plugin!
Show me a front end designer who hasn’t suffered through styling dropdown elements with cross browser support and I’ll show you my pet unicorn.
A few things that really make DropKick stand out:
- Maintaining native functionality such as keyboard navigation
- Including scrollability.js enables scrolling on iOS devices
- 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.
- Available for forking on github.
Plus I love the name ‘DropKick’.
The js snippets can be browsed via categories (AJAX, animation, templating, frameworks… etc).
Currently there is no pagination or search which seems fine for now – but might be a nice (needed?) add-in down the road. Another feature that would be cool would be some sort of a user rating/popularity system for the submitted frameworks. Perhaps something as simple as tracking the number of click-throughs for each snippet to provide just a little feedback.
Here is a fancy jQuery menu plug-in combining smart code with great design. This elegant plug-in is easy to implement, highly customizable and creates a stunning menu that can bring the coveted ‘wow factor’ to any site.
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…