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

Archive for the ‘Browsing’ Category

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.

MooColumns is a Mootools class that helps creating multiple-column contents easier & quicker.

It automatically divides the contents into columns and supports multiple instances to be run at the same page.

Mootools Columns

MooColumns is highly configurable. You can mention the classes which the column-creation will be applied, specify column-break elements, number of columns & column widths. Or leave all these settings to the default ones.

This Mootools class is currently in beta but looks promising and very functional for presenting the content.

jqZoom is a jQuery plugin which enables images to be zoomed.

This is an easy-to-implement plugin which is very handy, specially, in e-commerce projects & galleries.

jQuery Image Zoom

How it works?

This jQuery zoom plugin simply requires that "jqzoom" class to be added to images other that including the JS file and calling the main function once. And that’s it.

You can also configure it to mention the width-height of the zoom div and its position.

Tipmage is a JavaScript class for creating tooltips / notes over images similar to Facebook image tagging.

In order to create a tooltip, you simply double click any area on the image and the interface appears.

Image Tag Script

It works in 2 modes:

  • Normal: which only shows the tooltip when hovered.
  • Edit: which also allows you to edit the tooltip

Tipmage supports the use of special callback functions for editing of a tooltip (like Ajax calls to access a database) & the editing interface can be updated from a CSS file.

Live search is a great way of improving usability, specially if you have a serious amount of data to search. No going back & further and your users can see the results as they type.

QuickSilver has a great interface which accepts abbreviations as the input like writing wrdprss rather than WordPress.

JavaScript Live Search

John Nunemaker had published a QuickSilver style Prototype live search and the ported it to jQuery.

John Resig (creator of jQuery) played with it more and re-ported it to jQuery (which seems to be the final version for now : ) ).

Update (07.08.2008): And a MooTools version of the code.

Uptime Robot
feed-holder
FeedBurner
PHP Form Generator
PSD2HTML.com
HotScripts Marketplace