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

Archive for the ‘Browsing’ Category

UvumiTools has 4 great & free MooTools plugins that can save your development time.

MooTools Crop

MooTools Crop

This is an easy to use cross-browser crop interface that has options like:

  • Setting the minimum size
  • Keeping the aspect ratio
  • Live preview of the area to be cropped
  • Supports HTML resizing

MooTools Image Gallery

MooTools Gallery

This plugin enables you to create good-looking image galleries.

Users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel. A click on the photo being displayed brings the user back to the contact sheet view.

MooTools Dock Menu

MooTools Dock Menu

This dock menu, similar to a Mac interface, is passive under the screen & gets activated when an item is mouse-overed.

The menu is created from a valid unordered list & can be applied within minutes.

MooTools Dropdown Menu

MooTools Dropdown Menu

A cross-browser, animated dropdown menu with unlimited levels support.

It is created from unordered lists & can be totally customized via CSS.

This is a beautiful jQuery plugin that automatically converts select boxes into accessible sliders.

jQuery UI’s slider component is used. Besides a standard slider, multiple select boxes can be used to generate 1 slider too for mentioning a data range.

Convert Select Box To Slider

Usage is terribly easy:

For such a select box:

<label for="speed">Select a Speed:</label>
<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Med" selected="selected">Med</option>

Call the function & that’s all:

$('select#speed').accessibleUISlider();

The initial position of the slider can be mentined via the selected="selected" attribute to the option element you prefer.

FancyZoom, a Lightbox alternative which has a Mac-like zoom effect, is now ported to jQuery & Prototype. Best of all, now, they can present any HTML.

Fancy Zoom

They also have some additions to the standard FancyBox like:

  • The zoom will close when clicking outside the zoom box area.
  • Hitting the esc key will close the zoom window.
  • Passing an option of closeOnClick: true into the fancyZoom function will close the zoom when the contents are clicked as well. This works great for image galleries.

Click here for the jQuery version & here for the Prototype version.

TJPzoom is a JavaScript image zoom script that works cross-browser.

Besides the ability to zoom, it enables users to increase / decrease the size of the zoom area with mouse movements.

JavaScript Image Zoom

Another great feature is the ability to preload a low-resolution version of the image & loading then showing the zoom area from the high resolution version of the image. This method increases the initial load speed & the quality of the zoomed area.

UniTip is an easy to implement & customize cross-browser tooltip script.

This tooltip script is also lightweight & accepts HTML to be displayed.

JavaScript Tooltips

UniTip uses transparent PNG’s for creating the tootip balloon. And, for better compatibility with IE6, Unit PNG fix is already included with the package.

The script does not rely on any JavaScript frameworks & can be applied to specific tags or classes.

jqGrid is an Ajaxed jQuery grid plugin with amazing features.

As the grid is a client-side solution that loads data with Ajax callbacks, it can be used with any server-side language like ASP, PHP, ASP.NET, JSP and so.

A clever feature is sub grids which shows you a sub grid when a master column is called.

jQuery Grid Plugin

Some features of jqGrid:

  • paging functions
  • add, edit, delete & search records
  • accepts XML, JSON, array or user data as input
  • multiple selection of rows
  • sub grid & grid details (great feature!)
  • UI datepicker integration
  • & more…

jqGrid is very impressive with the interface, features, usability & documentation. To check this great jQuery grid plugin, click here.

LightWindow is a highly configurable Lightbox (modal window) solution built with Prototype & script.aculo.us.

It can display any media including Flash, Quicktime or an external website. And, it has gallery support with a multi-gallery feature.

Prototype Lightbox

The modal window can be custom positioned and it is automatically resized to fit the content.

LightWindow can be re-styled including markup, CSS & animations easily. Besides clicking on the close button & outside of the modal window, ESC key works for this feature too.

mooSlide is an easy to use & configure slider class for MooTools.

It is a functional solution to present any content, even as a Lightbox replacement.

MooTools Slider

Within 1 line of code, you can set the:

  • slider div
  • slide in speed
  • fade out speed
  • remove on click yes / no
  • final opacity
  • height of the slider container
  • type of effect used
  • toggler element
  • slide from position

And, multiple sliders can be used in 1 page.

js-hotkeys is a jQuery plugin which enables you to create keyboard triggered events.

Update: The plugin is based on shortcut.js. You may want to use this for not being restricted with jQuery.

This is a very nice feature if you want to provide users more browsing flexibility. And also, it can be used in JavaScript testing environments like triggering a test function by clicking CTRL + t.

JavaScript Keyboard Control

A simple usage of the plugin is:

$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/});
$.hotkeys.remove('Ctrl+a');

A demo of this jQuery keyboard control plugin can be found here.

woork presents a nice MooTools news ticker, which scrolls vertically, similar to the one in Newsvine.

Mootools News Ticker

Content is currently hard-coded inside the HTML within li elements. There is also an information provided for how to get the content dynamically from a database.

Speed & delay of the slide effect can be configured within the code.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com