Html5. 10 Useful jQuery Plugins For Enhancing Your Website UX. Incorporating jQuery effectively and modestly in your website build process is a great way to enhance and take your user experience to another level.
Using jQuery plugins can be a great tool for helping display content to your users in a much more intuitive and interactive way. The jQuery community is fantastic, developers are consistently releasing new, quality jQuery plug-ins for us to incorporate into our websites. In this post I will take show you a collection of jQuery plugins that are really useful for improving your overall user experience on your website. Nivo Slider. 10 Useful jQuery Plugins For Enhancing Your Website UX. DdSlick - a jQuery plugin for custom drop down with images. With traditional drop downs i.e. using <select><option></option></select> you are limited to only text and value.
But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action. 1Basic Drop down using JSON Source: When using JSON to populate, the plugin requires the specific data format. 2Render from HTML select options //Make it slick! Use HTML5 data attributes data-imagesrc and data-description with your regular HTML select elements to add images and description. 3GET Selected Dropdown Option You may use jquery .data() with your selector to get data from plugin. SelectedIndex (0 based), selectedItem (HTML 'li' element), selectedData (nested object with text, value, description, imageSrc) 4SET selected Dropdown Option Try an index between 0 to 4 5Callback Function on Dropdown Selection 6Dropdown with default selection. jQuery Grid & Data Presentation Plugins. Jquery is becoming increasingly known in the web designers and developers community.
Why not take advantage of its magic? In this collection we showcase some really cool jquery plugins and resources to enhance data presentation in grid layout design. Some are practical plugins that will definitely provide a fond user experience. As well, some refined resources that will help layout the span of data beautifully. jQuery Grid & Data Presentation Plugins. Fancybox - Fancy lightbox alternative. StickyMojo contained fixed position sticky sidebar jquery plugin. StickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech.
It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE. Background After looking around for a contained fixed position sticky sidebar for our blog we found that there were few options that handled all of the intricacies of cross-browser support, window resizing, and smoothness. One of the solutions that many people have come up with is to have the sidebar be positioned absolutely, then animate the top property. The problem with a simply "fixed" positioned element is that it doesn't react well to a scroll or window resize.
Luckily we've got stickyMojo. First you need to get yourself the code. You will then need to include jQuery. Setting up the HTML Next you are going to want to setup your HTML structure. stickyMojo does its best to give you as much flexibility in your HTML structure. jQuery++ jQuery UI Multiple Select Widget. This is the successor and port of my original jQuery MultiSelect Plugin to a jQuery UI widget.
While both will actively be maintained, I highly recommend you use this version over the plugin version. It has a more robust feature set, is faster, and is much more flexible. MultiSelect turns an ordinary HTML select control into an elegant drop down list of checkboxes with themeroller support. This version inherits all the benefits from the jQuery UI widget factory that are not available in the plugin version.
The most requested feature was the ability to call methods on instances after initialization (e.g., statefullness), and now there are 10 to choose from! Current version: 1.13 (08/19/2012 - changelog)View demos.Download source or minified, and the CSS file.Follow this project on GitHub.Run the unit tests.Please report any bugs on the issue tracker. Demo See what you're missing out on? Usage. A jQuery UI Growl/Ubuntu-like Notification Plugin. Update 7/6/2010: version 1.4.1 is out!