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

Archive for the ‘Browsing’ Category

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.

     

    We all know the iOS folder interface: “clicking a folder changing the opacity of other elements and displaying the contents inside a sliding element”.

    App-Folders is a jQuery that mimics that behavior and works on both desktop + mobile browsers.

    jQuery App Folders

    Folders can include any HTML element (images, text, video ,etc.) and each folder gets its own URL that makes direct-linking possible.

    The look/feel doesn’t have to be iOS-like but it can be themed completely for creating attractive layouts (check demo).

    Alertify is a lightweight JavaScript library for displaying stylish notifications with ease.

    The library doesn’t depend on any JS frameworks, can show notifications in a modal window and also feature growl-like messages.

    Alertify - JavaScript Notifications

    Notifications are unobtrusive and the outputs can be completely customized via CSS as custom classes can be attached to elements.

    Callbacks exist for ok + cancel events to act accordingly and there is support for chaining to create queued dialogs.

     

    There are many ways to serve each web element in responsive layouts.

    For HTML tables, FooTable (a jQuery plugin) comes with a great approach without breaking the functionality and design.

    The plugin auto-hides the selected columns on each breakpoint defined and users won’t need to scroll horizontally.

    FooTable jQuery Plugin

    What makes it better is that “the hidden columns can be viewed by simply clicking each row” so that it is still possible to navigate through the complete data.

    It is applied very easily with the help of data-attributes and the plugin leaves an open gate for future enhancements as there is a plugin framework within.

    Magnifying glass interfaces are pretty useful for enabling users to zoom in to images so that details can be viewed without loading a bigger version.

    mlens, a tiny jQuery plugin (~1kb minified and gzipped), simplifies creating this magnifying glass functionality so much.

    mlens jQuery zoom plugin

    It comes with few parameters like the shape of the lens (circle or square), lens size and the options for customizing the border.

    Multiple instances of it can be used in the same page and a WordPress plugin for it is being developed.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 1 Comment
  • Uptime Robot
    feed-holder
    FeedBurner
    PHP Form Generator
    PSD2HTML.com
    HotScripts Marketplace