Archive for the ‘Browsing’ Category

CanvasLoader is a JavaScript UI library for drawing and animating circular preloaders with HTML5 canvas.

Using a simple function, a canvas element (loader) is created inside a placeholder div and multiple instances can be created at the same page.

CanvasLoader

There are few different loader types supported and they can be customized in many ways like color, density, speed, diameter, fading, FPS and scaling. Also, functions exist for getting the values of each parameter.

Optionally, a web-based creator helps building the loader image by setting the values, previewing the output and downloading the HTML file.

leanModal is a lightweight jQuery plugin for displaying modal boxes with minimum effort.

The plugin doesn't use any images and a very good solution for for displaying anything except image galleries as there is no built-in support for that. But that's ok considering it only weights 780 bytes (when minified).

The width and height of the modal box is flexible and adjusts itself according to the content.

Multiple instances can be used on the same page and there are almost no settings or complicated usage instructions which is perfect for most cases.

leanModal

For any website/web application that expects an action from its visitors (like "filling a form" or "making a selection") or help them browse the way required, offering an online guide can be a good idea.

Guiders.js, a JavaScript library developed and used by the popular A/B testing service Optimizely, is recently open sourced and enables us to create flexible guiders.

Guiders.js

The guiders are in the form of a dialog box, they can be attached to an element or centered on their own and positioned however we want.

Custom event handlers can be used to hide and show guiders. This makes interactively showing the user how to use your software by having them complete steps possible.

It requires jQuery and very easy to setup by simply creating the list of guiders, ordering them and attaching the events we want to each.

Overlays are used widely when we need to block HTML elements or the full body and transfer the attention of the user to a specific point.

There are high-quality plugins for creating overlays but most of them come with Lightbox or modal dialog capabilities and sometimes all we need is only the overlay.

jQuery Simple Overlay

Simple Overlay is a flexible and lightweight jQuery plugin that can display the overlay using jQuery's fade effect, slide effect or no effect at all and can be improved further with built-in CSS hooks like CSS3-glossy effects.

The overlay can also be customized more by setting its color, opacity level, whether it'll be removed with onClick and more.

Thanks to custom callbacks, any functions can be fired after onShow and onHide events.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 8 Comments
  • OpenJS Grid is a very easy-to-setup solution for displaying records as a user-friendly datagrid.

    It comes as a plugin for jQuery with the PHP files for handling the Ajax requests and can be called with a simple/one-line function.

    The data to be shown on the initial load can be limited to a desired number, rest of the records can be browsed with pagination and every column can be sorted.

    OpenJS Grid

    And, there are many options like:

    • showing/hiding row numbers
    • inline editing
    • deletion of records
    • filtering records with date range

    There are callbacks on every step (rowClick, loadComplete, saveFail, etc.) and the design of the grid can be totally changed with CSS3-powered theming support.