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

Archive for the ‘Browsing’ Category

BeautyTips is a jQuery plugin which draws tooltips in realtime using the canvas element.

The tooltips are very flexible and can be triggered in various ways.

jQuery Tooltips

Every tooltip, by default is displayed at the side of an element where there is more space. But the position can also be forced.

Content can be hard-coded, called from an attribute or with an Ajax request.

The look & feel of the tooltips can be totally customized considering they are canvas elements.

BeautyTips works in all major browsers, including iPhone (requires ExplorerCanvas for IE).

NyroModal is a very flexible & customizable jQuery plugin for creating modal windows easily.

It can display any type of HTML objects:

  • with Ajax requests
  • by showing a hidden DOM element
  • as a gallery
  • forms, iframes..

jQuery Modal Windows: NyroModal

Besides the features mentioned, you can target the content inside an Ajax request or a form, resize the modal window from an Ajax request & more.

On every event, like showing or hiding the modal box, any animation can be defined too.

The plugin is very well-documented & presents various examples.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • Simpletip is a fresh & lightweight jQuery plugin for creating flexible tooltips.

    Tooltips can be attached to any element & easily styled in means of presentation & positioning.

    jQuery Simpletip Tooltip Plugin

    The tooltips can be static, dynamic or loaded via Ajax. And, any combination of effects can be applied to make them more attractive.

    Simpletip provides various options for max. customization. The plugin is well-documented & provides examples.

    imgPreview is a jQuery plugin that enables users to preview images before clicking on them.

    If the image is clicked later, it will be shown instantly as it will already be preloaded at the preview.

    jQuery Image Preview PluginThe image preview is shown in a chic tooltip-like box.

    The plugin is unobtrusive, does not use non-semantic classes. It detects the anchors that link to images and apply the preview effect only to them.

    There are various configuration options that comes with imgPreview like defining the css pf the image to be previewed, its distance from the cursor, whether the images will be preloaded or not, callback functions & more. is presenting a nice tutorial (with source files) for creating the famous iPhone unlock interface with XHTML-CSS & the slide effect via jQuery.

    Although there are missing features from the standard effect like "the slider not going back", it is still inspiring & can be used to create a form control (like captcha) or present a content in an iPhone like interface.

    (See also: iPhone Application And Website Development: All Tools And Tutorials You Need)

    iPhone Unlock Interface

    For the slider, jQuery UI’s slider component is used.

    For a demo of this interface, click here.

    OpenZoom is an open source framework for creating zoomable user interfaces.

    The framework is similar to Silverlight’s Deep Zoom control (see WRD post), but for Flash.

    OpenZoom - Zooming With Flash

    The power behind OpenZoom is Flex MultiScaleImage component, which is built on top of the OpenZoom framework.

    The name is same wih the Silverlight Deep Zoom’s built-in control & the usage is similar too.

    The component has built-in support for keyboard / mouse activities & supports Deep Zoom, Zoomify & OpenZoom images.

    For now, OpenZoom can sound to specific, but considering its abilities & usage areas, we’ll probably be hearing more about it soon.

    P.S. The framework is so fresh & still in development but it can be downloaded (& it is documented).

    Ajaxify is a jQuery plugin that converts all links in a web page into Ajax load-submit requests.

    So, with a single line, you can turn a static website into an Ajaxed one.

    Ajax Static Websites

    It has support for:

    • History & bookmarking
    • Partial load from the output
    • Four events
    • Forms
    • Animations

    In the demos page of Ajaxify, there are lots of examples presented to get you going with it.

    Eyesis Data Grid Control is a PHP class for creating a datagrid from a MySQL database almost instantly.

    With 6 lines of code, you can connect to the database, mention the table & define the query, rest is automated.

    PHP Datagrid Class

    It has nice features like:

    • Filtering and searching
    • Changing column headers
    • Can displaying images
    • Ajax supported
    • Automatic row paging
    • Row selection
    • Look & feel can be customized via CSS
    • Ability to add controls
    • Checkbox support
    • Specify column format types (such as percent, dollars, etc)

    This Ajaxed PHP grid works in all major browsers & requires PHP5 to run.

    Seadragon is a technology, by Microsoft, for deeply zooming images of any size. It provides almost perfect transitions independent from the sizes of the images.

    Seadragon Ajax is an interface for using/embedding this technology to any website.

    Seadragon Ajax

    Seadragon can be used in 2 ways:

    Developers can customize viewers & controls with the Seadragon Ajax Library. It is also available at the Silverlight platform.

    jQuery.popeye is a plugin which transforms an unordered list of images into a simple image gallery which enlarges the image clicked in Lightbox style.

    The images are displayed in a box with prev-next controls & an info about the images can be mentioned.

    jQuery Lightbox

    The compact box has fixed, automatically calculated dimensions. The width and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area.

    The plugin can be easily customized with a list of settings provided.

    Click here for the demo.

    Uptime Robot