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

Archive for the ‘Goodies’ Category

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.

    JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser.

    It is implemented totally in JavaScript and uses SVG and VML.

    JSXGraph - JavaScript Charts

    A graphic can be created via:

    It supports many, basic to advanced, mathematical functions that make creating complex visualizations easier.

    P.S. JSXGraph requires Prototype JS library to run.

    dfGallery 2.0, the new version of the popular free Flash image gallery, is totally updated & offers a beautiful experience.

    The gallery application has lots of features but still easy to use & have a slick look.

    dfGallery - Free Flash Gallery

    The gallery has integration support with Flickr & Picasa. It can get all Flickr albums under a user with the API key or any Picasa albums via the URL of the album.

    dfGallery 2 can display multiple albums that can be switched via the interface. Images can be manually browsed or as a slideshow.

    You have the full control over the gallery with an Ajaxed admin panel that supports multiple uploads & built on CodeIgniter.

    Other features

    • Theming support (change the layout and the presentation of the gallery)
    • Skinning support
    • Customizable background music
    • Fullscreen feature

    Click here for a demo of the gallery.

    Pop! is a simple but effective jQuery plugin for creating dropdown menus.

    It enables you to store any content in a container & shows/hides it with the clicks.

    jQuery Simple Dropdown Menu

    How to use it?

    • Insert the jquery.pop.js file into your webpage (make sure jQuery is inserted too)
    • Initialize it:

     <script type='text/javascript'>

    • Using the preferred pop! class, wrap the content:

    <div class="pop">
       any content to display

    That’s it.

    Uptime Robot