For any website or web app, if you think that users may need help in using/browsing the site, adding site tours or interactive guides are very helpful.

Previously, WRD had featured solutions for guiding users interactively. Here is a fresh one for creating in-page contextual help and walkthroughs for any online content.

Pageguide.js is a jQuery plugin that creates a "guide" button in our web pages and, when clicked, highlights the elements we wish with a detailed information about them.

If there are any steps in the guide, they are visualized with numbers besides each element and user can either click the highlighted elements or the next button to see the information about them.

The prev-next buttons have also support for auto-scrolling which is nice if the step to be displayed is not already in the viewport.

Pageguide.js is pretty easy to setup as it only requires us to define the steps + content in an unordered list and attach a simple function.

There are lots of jQuery plugins around that handle specific tasks and, for JavaScript-heavy apps, we may end up in using many of them.

Working with such many different resources at the same project is sometimes hard and can be time consuming as they all have their way of coding, different APIs, styling support…

Infragistics, a creative company focused on building user interface development tools, has a professional and complete jQuery Toolset that solves many JavaScript-related tasks beautifully.

The toolset is HTML5-powered and works cross-browser/platform with support for mobile + all of them are optimized for high performance.

What is inside?

Charts

First of all, it has a full-featured charting library with support for 15+ chart types (pie, bar, line, area, bubble, radial) where they can be used side-by-side too.

Charts are interactive, they can respond to events like hover or click and can be zoomed to better see a specific range.

Read the rest of this entry »

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

dgrid is an open source, advanced and highly flexible datagrid component for Dojo.

It makes use of modern web technologies, lightweight in size and runs pretty fast.

The functionality can be extended with ready-to-use column plugins (editor, tree, etc.) and extensions (drag 'n' drop, pagination..). Any new ones can be created as well.

The look/feel of the grids can be completely customized with the theming support. There is support for keyboard interactions and it is tested to work in mobile too.

dgrid is very well documented with examples and tutorials to easily get started.

MiniJs is a free and open source suite of jQuery plugins that are written in CoffeeScript.

The plugins are perfect for everyday-use and include: slider, tooltip, notification, Twitter feed and counter (new ones are on the way).

They are all built with simplicity in mind and very easy-to-use with only few important parameters.

Also, for CoffeScript developers, a MiniBoilerplate is provided for developing new jQuery plugins faster.

Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.

The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.

P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.

jPages is a client-side pagination script (a jQuery plugin) with features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel.

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

The plugin detects the number of items in a given list and auto-creates the navigation.

Callbacks exist to get the current page, total number of pages, number of items, etc. and it is possible to intervene the page number to be displayed using an API method.

P.S. There is an optional integration with the popular scripts Animate.css and Lazy Load for a more attractive and faster pagination experience

LionBars is a jQuery plugin for creating OSX-style, custom scrollbars for any web page.

The scrollbars created looks the same in all browsers under each OS and they don't hurt the usability by not shrinking the content or with the auto-hide option.

It has support for endless scrolling (check related WRD tutorial) and can fire functions when the scrollbar reaches to the end.

Sometimes, only displaying the images is not enough and you need to show or describe what's going on there.

iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.

Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.

There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.

Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag 'n' drops and the JSON output to be used in the code is created automatically.

Hammer.js is a JavaScript library for adding touch gestures support to any website so that users can interact with them easier on touch devices.

It requires jQuery, only 2kb sized and supports tap, double tap, hold, drag and transform.

The library is implemented pretty easily:

• just bind Hammer.js to a container HTML element
• every touch event performed on that element returns a callback with an array of details including:
  • event
  • position
  • touches
  • scale
  • rotation

For drag gestures, it can also return extra info like the angle, direction and distance.

Hammer.js works -almost- on all modern browsers and, to sum up, "you can touch this" : ).