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

Archive for the ‘Goodies’ Category

This is an unobtrusive date-picker script with a variety of customization options.

It can be accesses with keyboard, does not require embedded JavaScript blocks & pop-up windows.

Datepicker Script

This free date-picker script supports:

  • multiple date formats / date dividers
  • skinning via CSS
  • limiting the calendar with upper and lower dates
  • disabling certain days
  •  “smart” localisation
  • higlighting certain days
  • single text inputs, split text inputs or select lists

Usage is very straightforward. After inserting the datepicker.js into the webpages, defining a class to the element which the date-picker will be activated is enough.

Script can be currently reached from the source of the demo provided.

Imagin is a feature-rich & free Flash gallery which can be customized easily.

It supports multiple galleries with sub- galleries, can display jpg, png, gif, swf, flv, mp4 files & can present them as a slideshow.

Imagin Flash Gallery

This gallery application uses PHP at the backstage for loading images & automatic thumbnail generation.

Galleries & sub-galleries are folders and files are loaded via FTP. Imagin does the rest for scanning the related folders & shoing them accordingly.

Some features of Imagin

  • Few images are loaded in advance for faster navigation
  • Images can have a small description
  • Full screen mode
  • Basic html view of images
  • Full browser resizable interface
  • Right click menu. Link to an image or a gallery can be sent directly
  • Keyboard navigation (space, arrows, enter, escape)
  • Images scales down automaticaly to fit the browser size, or not if you don’t want

To see its power, check the demos.

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.

NETTUTS is presenting a beautiful tutorial, prepared by Trevor Davis, for creating a functional portfolio page using jQuery.

Once a category is clicked in the page, content is filtered accordingly & displayed with fadeIn/fadeOut effects.

jQuery Portfolio

It is possible to modify the interface provided easily by changing the effects used, like disabling items by applying opacity rather than hiding which is totally up to the imagination of everyone.

The tutorial is very detailed & comes with the source files. A demo can be found here.

WYMeditor is a free XHTML editor script that generates perfectly structured XHTML strict code.

It doesn’t provide shortcuts for styling the fonts, colors, etc. For this reason, it calls itself WYSIWYM (what you see is what you "mean").

This is a very nice feature to prevent novice users from breaking the styles of webpages (which happens most of the time).

Free XHTML Editor

WYMeditor is 100% JavaScript, has a skin support via CSS for customizing it and multilingual.

Its makes integrations easier with the API/plugin support provided.

S5 Reloaded is an extended version of S5, the popular standards based slideshow system by Eric Meyer.

System has very nice features like:

  • auto-scaling of images/objects (whatever the size they originally are)
  • auto-play
  • sound & chart support
  • soft transitions between slides
  • a powerful control panel

CSS Slideshow

This slideshow application has theming support to better customize it (examples can be found here).

P.S. For max. compatibility with the browsers, there is a special version: S5 1.29 a.k.a, which lacks of sound & charts.

  • Tags:
  • Filed under: Gallery, Goodies, GPL License
  • JS Charts is a free JavaScript library for creating good looking charts.

    Data to be visualized can be gathered from a JavaScript array or a XML file.

    Free JavaScript Charts

    The library supports 3 types of charts:

    • Bar charts
    • Pie charts
    • Line graphs

    Charts can be created & customized with ease (the type of the chart, colors to be used, titles of every unit).

    This free JavaScript charts library is well documented, provides examples and an online editor.

    P.S. Although the library is free to use, it requires that you register (again free).

    ListNav is a jQuery plugin for creating alphabetical navigations from lists.

    Once configured, a customizable (via CSS) navigation bar appears above the list, displaying letters from A to Z. When a letter is clicked, the items that start with that letter is displayed.

    jQuery Alphabetical Lists

    ListNav shows the number of items under a letter when the letter is hovered.

    The plugin is optimized for long lists & can work with both ul and ol lists.

    It also supports multiple navigations at the same page and works with all major browsers.

    WWW SQL Designer is an open source application that enables anyone to create database schemas from a browser.

    It supports most of the database features like:

    • keys
    • foreign key constraints
    • comments
    • indexes

    SQL Designer

    Once a database schema is created, you can:

    • save your design to modify later
    • print it
    • export as SQL script

    It is possible to retrieve (import) schema from an existing database.

    MySQL, MSSQL, SQLite & Web2py are supported.

    A fully-functional demo can be found here.

    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.

    Uptime Robot