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.

Sortable

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

Voix.js

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.

Allofthelights.js

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
  • 0 Comments