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

Archive for the ‘Browsing’ Category

Tooltips are tiny user interface elements which are very useful in displaying information "on request" without breaking the attention/focus.

WRD had previously featured qTip and it now has a new version, qTip2, with lots of improvements and new, exciting features.

qTip2 - jQuery Tooltip Plugin

The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse.

Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2's website has lots of creative demos including 3rd part service and various popular plugin integrations.

P.S. The download package can be customized to şnclude only the features needed and a converter exists for upgrading from the 1st version.

Tree menus are great for displaying nested data in a user-friendly and easy-to-browse interface.

jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output.

jQuery Organization Chart Plugin

It has support for any depth, clicking each item can show/hide the sub-levels and drag 'n' dropping elements from one node to another is possible, the interface will adjust the levels accordingly.

There is no limit in the contents to be used inside each item, any HTML elements are supported (except  <ul> and <li>) and the plugin is so handy for visualizing hierarchical data (org. chart, family tree, computer network, etc.).

In order to save space and display the content only when requested, expanding/collapsing panels are used widely.

Using jQuery, such a functionality is very easy to implement with methods like toggle, show, hide and several others.

jQuery-Collapse is an ultra-lightweight (<1kb minified) plugin built specifically for this case with added features.

jQuery Collapse Plugin

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

There is also cookie support which remembers the state of the content panels and displays them accordingly when the page is re-visited.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).

MASHA is a JavaScript utility that allows readers to highlight any parts of a web content and share it with others.

The feature is triggered when readers select any desired text and an icon appears to inform them about the feature + create a unique link when clicked.

Masha

Readers can simply click the icon, copy the unique URL generated and share it with others. When a MASHA-generated URL is loaded, the selected text is highlighted so that it is seen easily.

There are callbacks for onMark, onUnmark and onHashRead (when a MASHA URL is loaded) that makes custom events possible and a WordPress plugin exists for quickly adding this utility.

In the beginning of the web 2.0 trend, tag clouds were one of the most popular items of web design. And, they were (and still are) very useful in helping readers to easily locate the most-used tags.

Afterwards, the Flash-powered animated tag canvas came and it conquered many websites. The Flash -kinda- died, HTML5 is now everywhere and the animated tag cloud is still here for the new web built without Flash.

TagCanvas

TagCanvas is an HTML5 canvas powered and animated tag cloud that has both standalone and jQuery plugin versions.

It has support for text +images and can be shaped as a sphere, hcylinder or vcylinder.

The resource has so many settings for maximum customization and works even in IE (thanks to ExplorerCanvas).

Hovercard is a jQuery plugin that eases displaying information with style when an HTML element of our choice is hovered.

The information box appears with a smooth fading effect and accepts any HTML markup to be used as the content.

jQuery Hovercard

It is very useful for enabling users to reach micro info quickly (like a short bio, price of an item, an image, etc.) and comes with built-in Facebook + Twitter integration. Simply, it can display the details of a Facebook page or Twitter user nicely.

There are options for defining its width, position, background color and more.

Also, callback functions exist when hovering in and out from a Hovercard item.

Humane JS is a modern and tiny JavaScript library for displaying customizable notifications.

It has pre-defined notification types: info, success + error which are styled accordingly and new styles/themes can be created easily.

When available, the library uses CSS transitions and falls back to JavaScript animations when needed.

Humane JS

Humane JS doesn't require any JavaScript libraries to function and has several options including: timeout (the delay before a message fades out) or how the notifications can be closed (on any mouse/keyboard/touch action and/or clicking the close button).

And, the library has a callback function that is fired when the notification is displayed with success.

jqPagination is a jQuery plugin for quickly creating a JavaScript-controlled pagination interface and functionality.

The plugin is controlled with the special class names and attributes of HTML elements (for defining the prev, next buttons or setting the max pages).

It has a pretty unique, simple-yet-functional feature which is the ability to clicking on the pagination item and setting the page to be displayed manually.

jqPagination

jqPagination has a single callback which is ran when a pagination request is made and returns the page number to be displayed.

Its design can be customized easily and the plugin degrades nicely when JavaScript is disabled.

  • Tags:
  • Filed under: Browsing, Goodies
  • 0 Comments
  • Sometimes, we need to display images that are bigger than the viewport or we have a limited space.

    PanoJS3 is a JavaScript widget that stitches together a set of tiled images and presents it with panning + zooming support.

    It is a very useful widget specially for displaying panoramic images, maps or huge documents.

    PanoJS3

    Besides the desktop, it also works on mobile browsers with touch interfaces (supports pinch to zoom and pan gestures).

    A simple map helps finding out the which part of the image is being viewed and it is possible to enable fullscreen mode with a click.

    The focus on creating a better user experience and good use of JavaScript usually ends up in great results.

    Tangle is definitely one of them. It is a JavaScript library for building interactive documents where users can easily change parameters and see the document updated live.

    Tangle

    The library can add several interaction methods (like a a slider or onClick) to any given elements for easily changing their values and comes with functions to bind these variables with the values of other elements.

    Implementing Tangle is pretty easy, the library is well-documented and supported with examples.

    Uptime Robot
    feed-holder
    FeedBurner
    • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
    • ManageWP
    • PSD to HTML
      PSD to HTML