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

Archive for the ‘Browsing’ Category

When it comes to drag ‘n’ drop and reordering elements with JavaScript, jQuery UI’s sortable widget is by far the most popular.

There is also a tutorial at WRD for using it with server-side scripting.

Sortable is a JavaScript library that performs the same task without any JavaScript framework.


It uses the native HTML5 drag and drop API, has a small footprint (<2kb gzipped) and works on touch devices too.

Also, besides single lists, items can be moved between multiple lists too.

Using footnotes in web pages and presenting them nicely is usually a difficult job.

Bigfoot, a jQuery plugin, not only eases but also beautifies the footnotes in web pages.

Bigfoot jQuery

It auto-detects the footnote link + content, converts the link into a button and displays the footnote content inside a popover when clicked.

The script adapts well to responsive layouts and there are options provided to customize its functionality.

We are used to controlling/navigating websites with mouse, keyboard and “touch” afterwards.

Voix.js is a JavaScript library that allows us to add another layer to controlling them which is “voice”.


It has functions to start and stop listening through the microphone and we can set events to be fired when a given keyword is detected.

The library is pretty easy to use and it currently works in Chrome.

Allofthelights.js is a jQuery plugin that can change the opacity of the whole webpage but leave the video player.

This is for helping the user to easily focus on the video and there is built-in support for YouTube, Vimeo,  DailyMotion.. and custom players can be added too.


It works with multiple players on the same page and supports responsive layouts/players with no issues.

The animation speed, background color and opacity can all be customized an callback functions exist.

Enabling users to view all sides of a product is a common UI pattern, mostly, in e-commerce websites.

jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images.

jQuery Interactive 3D

It is so easy to use and works with a simple function and a list of specifically-named images.

And, there are options for customization like the cursor icon, speed, touch support, auto-play and more.

  • Tags:
  • Filed under: Browsing, Goodies, GPL License
  • Let’s call this again as “Pinterest-like layouts” which probably tells itself better than “dynamic grid layouts“.

    Such layouts are really functional to display elements with different dimensions nicely and don’t lose their popularity.

    Freewall is an impressive jQuery plugin for creating these layouts with CSS3 animation effects.

    jQuery Freewall

    The plugin supports responsive layouts and has useful methods like “adding more items to the grid” or “filtering them”.

    Various customization options exist like the animation, delay or the gutter sizes.

    And, Freewall offers callbacks for events like complete, gap found or resize.

  • Tags:
  • Filed under: Browsing, Goodies, Other License
  • It is sometimes the network our the computer but losing the internet connection happens to everyone.

    And, when this happens to the users while they are browsing your website, we can inform them nicely so that they easily know “the problem is not about the site”.

    Offline.js, a simple JavaScript library, detects the disconnection and presents an alert to the users about it.


    Also, it re-sends any failed Ajax requests once the connection is back so that the users are not affected at all.

    The library is plug ‘n’ play with no setup and it comes with multiple good-looking themes.

    Single-page scrolling websites are used widely for years and they are very useful on providing information quickly.

    On the other hand, the one-page sites where no scroller exists and the page content being changed with JavaScript reached its max. popularity with the Apple’s iPhone 5S website.

    jQuery One-Page Scroll

    One Page Scroll, a jQuery plugin, simplifies creating such websites so easy.

    It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go.

    Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.

    There are lots of scrolling plugins for jQuery and various good ones were shared at WRD.

    Scrolld is another alternative that 3 to you when it comes to customizing the functionality.

    jQuery Scrolld Plugin

    It focuses on providing a pixel-perfect scrolling experience for dynamic and/or responsive layouts. And, mobile is supported too.

    There are lots of built-in easing methods and options like “speed, distance from elements and more”.

    Custombox is a lovely jQuery plugin that enables us to create modal boxes with attractive CSS3-powered animations.

    There are multiple built-in animations like fadeIn, slide, newspaper, slip, fall and much more.

    The plugin has options for enabling/disabling the overlay, defining the animation speed or dimensions.

    Also, there are callbacks for all the events and it has support for loading content via ajax.

    Uptime Robot