Category Archive: JavaScript

Subcategories: jQuery 

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.

Increase Usability and Likability of Select Tags

Chosen

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

Chosen is a sweet little JavaScript plugin that converts your select boxes into a rich user experience. 

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.

Put your Code in a Test Tube and Collaborate

JSFiddle

http://jsfiddle.net/

JSFiddle is more than just a sandbox for front end coders.  With JSFiddle any coder can easily segment out JavaScript, HTML and CSS into a customized environment which can be run, saved and shared – paving the way for collaboration.

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.

JSFiddle Tweets Example

JSFiddle can Also Account for Ajax and Custom Plugins via the Additional Resource Management.

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.

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’.

 

Microjs Bringing Specified JavaScript Functionality Without the Overhead

Microjs.com provides more than a hundred snippets of javascript code each of which are paired down to a core purpose. The result is all the functionality you want without all of the other code taking up precious space in the pipe. No script is larger than 5kb and each file is accompanied by a description and categorized for ease of use.

Microjs Website

http://microjs.com/

The js snippets can be browsed via categories (AJAX, animation, templating, frameworks… etc).

One really cool aspect of the site is the social coding this site brings. Coders can fork the project on github and submit their own javascript library via a pull request.

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.

http://microjs.com/

 

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/