admin – Page 2 – Cool Javascripts By Ethical Swinger Coders

Improved lava lamp effect for jQuery and Mootools

Posted on January 10, 2009 by admin

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects. One of project which we support is https://allswingersclubs.org/ - pls, support it either - visit it, comment, add your clubs.

The lava lamp effect was an excellent technique to turn the navigation to a flash like animation. LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.

It is available for bot jQuery and Mootools

LavaLamp – Lava lamp for jQuery

Horizontal and vertical movement supported
Callback support on completion
Easing library support – Can use any supported animation
Speed can be adjusted

DEPENDENCIES	jQuery, Easing plugin
SIZE	5 KB (Uncompressed)
RESTRICTIONS	None
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open

Don’t forget to checkout the different easing effects (On top of the demo page)

Fancy Menu – Lava lamp for Mootools

DEPENDENCIES	Mootools (Latest version requires 1.2)
SIZE	2KB
RESTRICTIONS	None
DEMO & DOWNLOAD	Open \| Open in new window

Also, check the Barack Slideshow plugin based on the MorphList plugin for Mootools.

Fancy Upload – Ajax file upload for MooTools

Posted on January 9, 2009 by admin

Fancy upload is a nice and excellent replacement for the file input field. It uses a flash component called swiff for file upload and other features. But instead of displaying the flash interface, it uses javascript to interact with the flash component and the appearance is fully skinnable using CSS & HTML.

It works on Mootools.

Features

Multiple file upload support
Filter files by type in file selection dialog box
Shows file information before upload
Can cancel running uploads
Unobtrusive – The flash is replace once it is loaded.
Customization

DEPENDENCIES	MooTools
SIZE	Less than 15KB (Flash file and scripts – MooTools library etc)
SUPPORTED BROWSERS	All modern browsers with flash player 9.0 or above
RESTRICTIONS	No
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open

This requires Adobe flash player 9.0 or above.

Three lightbox clones for Mootools

Posted on January 6, 2009 by admin

Just like jQuery, Mootools also has some nice lightbox clones available.
When compared with jQuery alternatives, one option I found to be missing is the ability to resize image according to the browser window.

You might also want to check the following post

Which is the best lightbox clone for jQuery

Milkbox

One thing I particularly liked in Milkbox is the ability to show slide shows. An interval can be specified.

DEPENDENCIES	Mootools
SIZE	Less than 22KB (Uncompressed)
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
SLIDE SHOW MODE	Supported
IMAGE RESIZE	No
DESCRIPTION FOR IMAGES	Supported
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No
DEMO & DOWNLOAD	Open \| Open in new window

Slimbox

It is a very lightweight script – just around 4KB.

tr>

DEPENDENCIES	Mootools
SIZE	4KB
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
SLIDE SHOW MODE	No
IMAGE RESIZE	No
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open

Lightbox by phatfusion

One interesting feature is the ability to specify the DIV element that should contain the background (The background layer). So the effects can be either applied to the whole body or to a particular DIV element.

DEPENDENCIES	Mootools
SIZE	10KB
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
SLIDE SHOW MODE	No
IMAGE RESIZE	No
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No
DEMO & DOWNLOAD	Open \| Open in new window

Agile Carousel – Custom carousel with excellent options

Posted on January 4, 2009 by admin

Agile Carousel is a jquery plugin which enables you to create a custom carousel with many many different transition & easing options. It has lots of configurable options like customization of controls, timer, easing type, transition type etc. It does not require jQuery UI plugin but it is recommended for excellent transitions of slides.

We need to specify a directory where slides are stored. The slides can be (X)HTML, images or flash.

Features

Excellent transition effects
Configurable controls
Supports HTML, Flash and images

How it works?

The script works a little differently. It posts the configured options to a PHP file using AJAX. The configurable options specify the slide directories, titles and links. The PHP file parses the options and then it scans through the directory(multiple directories are supported).

The downloaded source package contains this PHP file. The PHP script path is hard coded in javascript, so you might need to edit the path there. Also, it is possible to tweak it to work with any server side scripting languages, not just PHP.

DEPENDENCIES	jQuery 1.26, jQuery UI library recommended
SIZE	16KB (Minified)
RESTRICTIONS	None (New BSD)
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open

Which is the best lightbox clone for jQuery?

Posted on January 2, 2009 by admin

Lightbox is a script made by Lokesh Dhakar which is one of the most popular way for showing images or image galleries. The original lightbox script was written using prototype and script aculous javascript libraries. So the main problem is, we need to include these two libraries (almost 100 KB) again even if we’re using jQuery. Certainly, this is not the best way. Thank fully, some programmers realized the situation and made the clones using jQuery. The effects and functionality are almost similar to lightbox but the only difference is, it uses jQuery library instead of prototype. The size of a compressed jQuery library is only 25KB.

Here, I am reviewing three of the lightbox clones.

jQuery Lightbox Plugin (balupton edition)

Specifications

DEPENDENCIES	jQuery
SIZE	Less than 13KB (compressed)
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
IMAGE RESIZE	Yes, automatically resizes to fit in browser
DESCRIPTION FOR IMAGES	Supported
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No (GPL license)
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open in new window

This plugin is easy to use and supports automatic resizing of images(But no option to show unresized image). It is slightly heavier than the other two.

jQuery Lightbox by Leandro Vieira Pinho

DEPENDENCIES	jQuery
SIZE	Less than 7KB (compressed)
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
IMAGE RESIZE	No
DESCRIPTION FOR IMAGES	Supported
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No
DEMO & DOWNLOAD	Open \| Open in new window

One problem I noticed with this script is, the images are not centered correctly in some cases (Try with an image that almost fits the browser client area). Also it doesnot support image resize. So if a large image is used, one needs to scroll the window to see the whole image. The good side is, it is very light and configurable. Unlike the others, the lightbox should be invoked for the required elements. So you need to use a simple jquery statement to invoke the lightbox (Very simple and fully documented)

Pretty Photo by Stephane Caron

DEPENDENCIES	jQuery
SIZE	Less than 9KB (compressed)
GROUPING OF IMAGES	Supported
KEYBOARD NAVIGATION	Supported (Arrow keys & Esc)
TRANSITION EFFECTS	Yes
DESCRIPTION FOR IMAGES	Supported
IMAGE RESIZE	Yes
FLASH SUPPORT	Yes
SUPPORTED BROWSERS	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONS	No
DEMO & DOWNLOAD	Open \| Open in new window

It looks very good. The animations, centering and resizing of images, are perfectly done. The default styles are also fine. One thing I like is, it automatically resizes the image and an icon is shown in the image to expand it to original size (Very good feature, just like Highslide). Also, it is always centered even if the window is scrolled. But here I suggest to use the jQuery easing plugin for better effects.

Conclusion

As we can see, Pretty Photo is the best considering the features. It also supports flash. The default styles are also nice. So in my opinion, it is the best lightbox clone for jQuery. What do you think? Please let me know your thoughts.

3 jQuery plugins to show context menu

Posted on December 29, 2008 by admin

A context menu (also contextual menu, shortcut menu and, popup menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right mouse click. Context menus offer a limited set of items that apply to the current state, or context, of the system or application in which the context menu is invoked

Source: Wikipedia (http://en.wikipedia.org/wiki/Context_menu)

Here is a review of 3 jQuery plugins that can override the browser default context menu with our own context menu.Opera browser doesn’t support custom context menu

ContextMenu by Chris Domigan

It is one of the earliest plugin to show context menu. It is fully customizable and supports callback
functionality.

jContext

It is a very lightweight jQuery plugin to show context menus (0.6KB when minified). The menu is fully customizable using HTML and CSS.

DEPENDENCIES	jQuery 1.2
SIZE	Less than 1KB (Compressed)
RESTRICTIONS	None
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open \| Open in new window
SUPPORTED BROWSERS	Firefox 1.5+, IE 6.0+

jQuery Context Menu Plugin By Cory S.N. LaViska

This is the most powerful plugin with many customization options and callback support.

Advantages

Fully Customizable via CSSSupports keyboard shortcutsAbility to disable menu/menu items on the fly

DEPENDENCIES	jQuery 1.2.6 Or jQuery 1.2 with dimensions plugin
SIZE	Less than 7KB (Uncompressed)
RESTRICTIONS	None
DEMO	Open \| Open in new window
INFO & DOWNLOAD	Open
SUPPORTED BROWSERS	Firefox 2 & 3, IE 6.0+, Safari, Chrome

jQuery Ajax File Upload

Posted on December 12, 2008 by admin

Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.

This plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax, but brings same user experience.

Advantages

AJAX like behaviour using iframe technique. (AJAX does not support file handling)
Multiple file upload
Allowed file types can be specified
Callback functions for all events

DEPENDENCIES	jQuery 1.2
SIZE	4KB
RESTRICTIONS	None (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

jGrowl – To show unobtrusive messages

Posted on December 4, 2008 by admin

jGrowl is a nice way to show unobtrusive messages or informations to user.

Advantages

The default style is good enough
The message can be shown for a pre defined time (For eg: 10 seconds and then it will close automatically)
Support for sticky messages – which do not close automatically
Customizable

DEPENDENCIES	jQuery
SIZE	5 KB
RESTRICTIONS	None (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Three jQuery modal plugins to repace alert and confirm

Posted on November 18, 2008 by admin

alert() and confirm() are two javascript functions that you should not use in your web 2.0 sites . The main problem with these are the way those blocks the user from interacting with browser. They are modal in behaviour, that means the user should take an action before he can do anything with browser. He can’t even switch to another tab. Here, we suggest three jQuery plugins to ditch the notorious alert() function.

They are jQuery Modal Dialog, jqModal, jQuery SimpleModal

jQuery Modal Dialog

Unlike many modal scripts (which are coded to show any type of contents along with modal dialog support), this plugin is just made to show messages to the user and a complete replacement for javascript alert() and confirm.

By default it supports 4 types of messages – error, warning, success and prompt. The styles are highly customizable. One feature I liked in this is the built in support for auto close option. It is a very useful feature. For eg: To show a success message for 5 seconds and close the message automatically.

Advantages

Highly customizable
Supports error, warning, success and prompt messages
Auto Close option

DEPENDENCIES	jQuery
SIZE	6KB
RESTRICTIONS	None (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Support page

jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

As the author claims, it is a good script to show messages to the user. It can be used to replace the alert() and confirm() javascript functions.

Advantages

Highly customizable
Can show Ajax/Iframe content
Can replace alert() and confirm()

DEPENDENCIES	jQuery
SIZE	Less than 4KB
RESTRICTIONS	None (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Download

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.
The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided.

DEPENDENCIES	jQuery
SIZE	6KB
RESTRICTIONS	None (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Featured content slider – Auto advancing

Posted on October 22, 2008 by admin

Using jQuery Coda plugin, css-tricks.com has created a very good script for a featured content gallery with auto advancing. It can be created with simple html markups.

DEPENDENCIES	jQuery, jQuery Easing & Compatibility plugin, jquery Coda plugin
SIZE	Less than 40KB (All scripts including jQuery compressed)
RESTRICTIONS	None (Free to use on any site)

Suggested Enhancements

Add scroll functionality (carousel functionality) in the thumbnails so that any number of items can be featured.For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download code