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

Archive for the ‘Goodies’ Category

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'>
   $(document).ready(function(){
     $.pop();
   });
</script>

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

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

That’s it.

JankoAtWarpSpeed is presenting a nice tutorial with source files on creating a beautiful menu similar to Vimeo‘s top menu.

The menu is very functional that, within a limited space, a user can browse the website or search it in detail.

Vimeo-Like Menu

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it.

says JankoAtWarpSpeed. And it is succesfully done (although max. browser compatibility is missing, it is a good resource to start building a such menu).

A demo can be found here.

Sexy Curls jQuery plugin is an open source solution for creating a page curl feature with ease.

It uses the jQuery UI & its resizable package.

jQuery Page Curl Plugin

It provides settings to customize the look & usage:

  • side: for defining which direction the curl effect will occur
  • turnImage: image used to create the effect
  • max. height, starting height & starting width

The smoothness of the curl effect is very impressive.

There is also another jQuery plugin named Page Peel which also accomplishes a similar result, but uses a Flash file.

Star Rating System is a free PHP script for adding an Ajax star rating feature to a website.

It uses MySQL as the database & the interface can be styled via CSS.

Ajax Star Rating Script

It has various templates which enables you to create an Ajax or non-Ajax version (that rating can be completed via radio buttons but results are shown in stars).

Several demos for the script can be found here.

Marcofolio.net 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.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com