Category Archive: jQuery

Subcategories: No categories

Turn Tabular Data into Tubular Data with jQuery

Flexigrid

http://flexigrid.info/

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.

Flexigrid AdvancedWhat 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.

5 jQuery Resources for Select Tags in HTML

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

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.  jQuery U Selectmenu DemoThe 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

jQuery Select Box

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.   jQuery Select Box DemoThis 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.

 JavaScript Image Combobox

jQuery Image Dropdown

http://www.marghoobsuleman.com/jquery-image-dropdown

The JavaScript Image Combobox is a slick plugin that easily adds icon support to dropdowns menus while maintaining a lot of the native functionality that select tags bring to the browser window.   jquery-image-dropdown-demoThis jQuery plugin works by parsing the select box tag and, once again, replacing the objects in the DOM with tags that more more flexible and consistent.

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.

 Dropkick.js

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

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.

Get a Closer Look with jqZoom – a jQuery Plugin

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.

jQuery Zoom

http://www.mind-projects.it/projects/jqzoom/

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.

The applications in which this plugin can be used are numerous and the elegant way in which it handles the pictures will bring a touch of style with the additional functionality.

Template to Jump Start jQuery Plugin Development

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.

jQuery Plugin Boilerplate

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

Stefan Gabos has provided a fantastic jQuery Plugin Boilerplate.  A few features that I really dig about this template are:

  1. Default variables that can be overwritten by user on plugin initialization
  2. Callback function capabilities on event-driven plugins
  3. The incorporation of ‘public’ and ‘private’ method handling
  4. 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!

Kick Your Dropdowns Up a Notch with ‘DropKick’ – a 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.

Style Dropdowns with DropKick

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

Thankfully DropKick, a jQuery plugin, is now available styling those pesky dropdowns with great ease and flexibility while maintaining native functionality and cross browser support.

A few things that really make DropKick stand out:

  1. Maintaining native functionality such as keyboard navigation
    1. Including scrollability.js enables scrolling on iOS devices
  2. Themed approach.  The ability to create and share a theme file really broadens the scope for this project.
  3. Backwards support – No javscript installed means the original dropdowns will work as originally intended.
  4. 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.
  5. Available for forking on github.

 

Plus I love the name ‘DropKick’.

 

Using jQuery to Create a Slick Sliding Background

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…

http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu/