Windows is a lightweight jQuery plugin for nicely scrolling the full-screen.
It provides a simple and handy API for managing the page/content position to ease the browsing experience.
The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.
It is so good that the web gets more and more lightweight with the use of modern web technologies.
Few days ago, WRD had shared the pure CSS gallery and now CSS Modal, a solution to create modal boxes with CSS.
They can be used to display any HTML content and designed to work in responsive layouts.
JavaScript is used only for improving the experience (Esc key support, firing events..) and it is also available as a SASS plugin.
There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.
MixItUp is another great plugin to handle such tasks that deserves to be bookmarked.
While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.
The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast.
There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.
There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.
jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).
The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.
It also works on touch devices and responsive layouts.
The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.
It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.
There are tools to analyze these as much as possible and, using methods like A/B testing, improving the usability is always possible.
However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.
There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:
A lightweight plugin that uses data attributes and has keyboard navigation support.
It focuses on objects beautifully and pretty easy-to-setup.
aSimpleTour uses a JSON data for all the configuration and content.
While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.
Pageguide.js offers a very slick way to provide site tours.
The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
Read the rest of this entry »
There can be times where we may want to inform/guide users regarding the details/functions of the HTML elements on the page.
Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour).
It uses the information mentioned in “custom data attributes” of the given elements.
And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).
The “Draggable” and “Droppable” interactions of jQuery UI are by far the most popular solution for drag ‘n’ dropping elements.
For anyone in search of an alternative, Draggabilly, a standalone and lightweight JavaScript library can be the right choice.
The element to be dragged can be limited to have that feature in a container and there are callbacks on each event (start, move, end) which can also return the position/location of the item.
It works in all modern browsers (IE8+) and there is built-in support for touch events.
Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts.
It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.
The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.
Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar)
The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes.
Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly.
The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all.
Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).
jui_datagrid is a jQuery plugin, making use of jQuery UI, that comes with lots of features for presenting and managing data.
It has built-in pagination, sorting, editing, deleting and advanced searching.
The datagrid can be used with any scripting language (a PHP class comes with the download package) and its look can be totally customized (Themeroller-friendly).
A “preferences” option enables users to choose which columns and features to show/hide.
And, a powerful API exists for controlling/integrating the datagrid however wanted.
