Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Browsing’ Category

For websites with less content or to simplify the browsing experience, single-page websites are a great option.

Although they are used for any type of content, they are preferred mostly for portfolio, event and app (usually mobile app) ones.

Such websites can be enriched in different ways by a chic scrolling effect, modal boxes, tooltips, etc.

As a fan of single-page websites, here are the awesome jQuery plugins I use regularly (and some alternatives) to create them:

jQuery Scroll Path

jQuery Scroll Path

That's a very original plugin which allows us to draw a totally custom scroll path (with curves) of any size.

HTML elements can be placed along the path and events like mousewheel, up/down arrow keys or spacebar will get you to the next element with an animation that follows the path.

An optional custom scrollbar is included which allows click and drag scrolling. Also, the plugin allows rotating the entire page using CSS transforms.

Ascensor.js

Ascensor.js

This jQuery plugin enables us to locate content blocks into any coordinates of a canvas and browse them with the keyboard.

The sections are browsed like an elevator system which can go up/down and right/left.

Curtain.js

Curtain.js

Curtain.js can display multiple fixed panels with a curtain-rise effect which is great for creating a nice scroll effect.

It is also possible to use the keyboard or mousewheel for scrolling.

Read the rest of this entry »

Recline.js is an open source library for easily creating data-focused applications with only JavaScript and HTML.

It is built on top of jQuery, Backbone.js and Underscore.js and provides components + structure to data-heavy applications with a pack of models (dataset, record/row, field) and views (grid, map, graph, etc.).

Recline.js

The library has many functions for handling datasets including loading, querying and manipulating them.

Recline.js has built-in support for loading data from CSV files, Google Docs, ElasticSearch, CouchDB and more.

And, it can present data beautifully in grids, maps, timelines or any other way you prefer (it can be extended quickly).

Sidetap is a simple and lightweight (2kb minified, gzipped) framework for creating mobile web apps.

The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook's mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.

It works by telling Sidetap "the content element to be animated". It takes care of clearing the stage using whatever animation is appropriate for the situation.

There are 4 animations offered for displaying the sidebar: upfrombottom, downfromtop, infromright, infromleft. Also, a callback istriggered when the switch is complete.

Sidetap Mobile Framework

Backbone.Notifier is a powerful and flexible framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

Bacbone.Notifier

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Messages can be timed to be shown or hidden as wished, an integrated loader exists and there are pre-defined styles: default, info, error, warning and success.

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.

Pageguide.js

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 jQuery Controls

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

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

minjs

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.

dgrid - Dojo Datagrid

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.

MiniJs

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.

CSS Scroll Effects

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.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com