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

Archive for the ‘Browsing’ Category

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.

Draggabilly

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.

jQuery Swipebox

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.

Wookmark jQuery Plugin

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

jui_datagrid

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.

Custom scrollbars that look the same on all browsers are everywhere (for ex: almost all Google apps).

Perfect Scrollbar is a lightweight (~14kb) jQuery plugin for creating them without any hassle.

Perfect Scrollbar

It doesn’t ruin the default layout or require/apply any CSS changes. The plugin works with containers of any size and re-arranges the positions if a container-resize happens.

Also, the design of the scrollbar can be customized completely with CSS and it supports jquery-mousewheel plugin in case you want to make use of it.

Modal boxes are so functional in displaying any HTML content with a focused interface and there are many great ones around.

iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite.

It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.

iLightbox jQuery Plugin

The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe).

There are retina-ready skins, it can be completely customized and

iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.

iLightbox

It has a powerful JavaScript API for customizing it further when needed. And, yes, it is responsive.

The plugin supports a wide range of browsers starting with IE7+ and works with mobile ones too.

For WordPress fans, there is also a WordPress plugin offered which is compatible with the regular wordpress gallery shortcode

Tooltips are usually created and triggered with JavaScript. But, CSS is now powerful enough to handle a simple tooltip functionality itself.

Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML.

The library uses data attribute, content property, pseudo elements and CSS3 transitions.

Hint.css

Tooltips are simple-yet-good looking, has arrows and can be positioned on any side of the parent element.

And, they don’t have to be visible only when hovered but can be set as “always showing” too.

Tooltips are so useful in informing users when needed without the need for a design challenge as they work well with any layout.

Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone.

It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers.

Opentip

There is support for calling content into tooltips with Ajax, positioning them wherever wanted or grouping them (so that only one tooltip of the same group can stay open).

A nice and unique feature is stems (the little pointers) which auto-arranges themselves into any direction.

Opentips has multiple, good-looking styles and new ones can be created very easily.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 1 Comment
  • elevateZoom is a highly-customizable jQuery plugin for creating image-zoom interfaces with ease.

    It can work with a single high-quality image or two images (a thumb and a high-quality version).

    The zoom window can be placed on any part of the page (or image) and there is also an option for inline-zooming which saves space.

    elevateZoom - jQuery Image Zoom

    For inline-zooming, it is possible to use a lens image that shows the zoomed part inside.

    And, usually for displaying products, there is a gallery mode which can present multiple images with zoom functionality.

    elevateZoom has many options for setting fadeIn/fadeOut, easing, opacity, borders and much more.

    When displaying the data inside a grid, Excel-like interfaces are probably the most standard way to do it.

    ParamQuery, a jQuery plugin, enables us to present the data in a similar way with lots of options.

    The records can be sorted or paginated, columns can be resized, hidden and it is possible to edit data inside cells with inline-editing.

    ParamQuery jQuery Grid

    There is support for infinite scrolling which is nice when loading lots of records.

    It is capable of loading the data from any format like HTML, Array, XML, JSON, etc. and can be used with any scripting language.

    Also, its look and feel can be changed with ease (theming support) and a powerful API exists for interacting further.

     

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com