Archive for the ‘ Jquery Effects ’ Category

The Beauty of jQuery

I’ll admit, I resisted the use of frameworks. I believe in understanding the core structure and building from it. But after 2 years of working with heavy Javascript, I decided it was time to test out some frameworks to speed up my work.
There’s about 100+ Javascript frameworks out there. Picking one was no easy task. I took about 2 weeks to test out a handful of frameworks and ended up choosing jquery.

It’s tiny. no overhead. It also has a well supported community. Which means plugins galore. And it based off of CSS syntax. So there’s very little learning curve.

And the best feature of all… it’s cross browser compliant!!

No more MSIE hacks or special code for Opera. Your complex Javascript will work on all browsers. That’s a saving of 2 weeks worth of programming already!

With MooTools and Prototype, you have to be careful not to use the same variable name as their API. But not with jQuery. It is completely isolated in it’s scope and won’t affect any global namespace.

Yahoo UI and Dojo, well those are big boys. And i mean HUGE files. I prefer small footprint over bulky features. In fact, I’ll stab my eye out before I use Dojo… but I’ll digress.

For more info :


jQuery Banner Rotator with Customize Effects

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners. The banner rotator is also re-sizable and configurable through the plugin’s parameters and stylesheet.

Click Here for Demo :

The Web’s Most Powerful Jquery Slider Plugin : Slidedeck

SlideDeck is the web’s most powerful Free jQuery Slideshow, jQuery Slider and WordPress Slider Plugin.

Demo | Download
Slide Deck is an easy to implement with a great design.

For more information :

Web design tools and resources

Recently i found very large collection of links related to website creation.

  • Javascript
  • jQuery Essential & Specialized Widgets
  • jQuery “Extensions”
  • PHP/MySQL tools
  • Flash Components
  • Miscellaneous Tools (IETester, Spam protection tool, Create Facicons tool)
  • Web Development BookmarkletsSite
  • Grid Design
  • Content Generators (Lipsum, Preloader Graphics, Background maker)
  • Pixel Icons
  • PNG Support in IE (CSS Only)
  • Vector Icons
  • Backgrounds & Styles
  • Hosting
  • Browser Compatibility
  • CSS & HTML Techniques
  • Typography
  • Firefox Extensions
  • Essential Mac Software
  • SEO / Site Evaluation
  • Domain Searches
  • Analytics, Monitoring & Testing
  • Cheat Sheets (Web Technologies)

    Hope you find this list useful too    LIST HERE

Multiple Fancy File Uploaders

Have you ever want to upload multiple files at once, or see file upload progress, or style your upload elements, or control filetypes before upload ? Today i want to suggest you a collection of file uploaders ready to use in your web projects.

FancyUpload Multiple file Uploaders
They divided into 2 groups: uploaders not using flash & uploaders using flash

Solutions without flash

1. Ajax upload

ajaxupload Multiple file Uploaders

Very nice tool, flash-free. You can customize it as you want, also you can use drag&drop files on input
Works in: IE6/7, FF2/3, Safari, Chrome, Opera.
Has different versions for jQuery, Prototype, plus has independent version.

2. jQuery Multiple File Upload Plugin

jQuery Multiple File Upload Multiple file Uploaders

Has many features, like using different validations, limit max files for upload, use different icons for different file types

3. Ext.ux.FileTreePanel (Ext.JS extension)

FileTreePanel Multiple file Uploaders


4. noswfupload

noswfupload Multiple file Uploaders

Multiple files upload without SWF objects, applets Java, or other third parts plug-ins, 100% browser and W3 compatibility thanks to graceful enhancement, no extra libraries dependency


Solutions using flash

1. SWF Upload

swfupload Multiple file Uploaders

Popular solution, allows to customize all upload elements using XHTML & CSS, shows only file types you choose, has js callback function to every event.

2. uploadify

uploadify Multiple file Uploaders

Has not so many features, as SWFUpload, but it uses jQuery 🙂

3. FancyUpload

FancyUpload Multiple file Uploaders

FancyUpload – fully customizable uploader with progress bar. Require MooTools.

4. Yahoo File Upload

Yahoo File Upload Multiple file Uploaders


Mootools Amazing Effects


debugger Cool mootools scripts

Simply include Debugger.js in your page and all the code that you have logging to firebug’s console will now show up in Debugger. Note that if you include Debugger.js in your page and you have Firebug installed, you won’t see it. Firebug is still way better than Debugger.js, so you’ll really only use it for IE, Safari and other browsers.

Reflection.js for mootools

reflection Cool mootools scripts

This is an improved version of the reflection.js script rewritten for mootools. It allows to add instantaneous reflection effects to your images in modern browsers, in less than 3kb.


image menu Cool mootools scripts

horizontal menu, reveals more of the image as you rollover it.


  • 2 optional onClick events – open & close
  • href passed to onClick events
  • stays open when clicked
  • closes when clicked
  • select item to pre-open

My Object Oriented Tree

mootree Cool mootools scripts

  • Developed by Rasmus Schultz,
  • Tested with MooTools release 1.11, under Firefox 2, Opera 9 and Internet Explorer 6 and 7.


mooflow Cool mootools scripts

MooFlow is a Javascript based Gallery looks like Apple’s iTunes or Finders CoverFlow™.

  • Autosetup onload
  • Autoresize on changes of Window dimensions
  • Scrolling with mouse wheel
  • Scrolling with key input (left and right cursor)
  • Autoplay presentation loop

Table sorting

javascript table sort Cool mootools scripts

1. Client-side sort of various formats (like mm/dd/yy).
2. Zebra or striped tables.
3. Support sorting with hidden rows on the table.
4. Be fairly fast.
5. Use mootools (which we already use).
6. Use a table already on the DOM.


mooeditable Cool mootools scripts

MooEditable is a simple web-based WYSIWYG editor.

  • Clean interface
  • Customizable buttons
  • Tango icons
  • Lightweight (~10Kb uncompressed)
  • Fully degradable when Javascript disabled
  • Works in Internet Explorer 6/7, Firefox 2, Opera 9 and Safari 3 beta


thumbnoo Cool mootools scripts

A fresh look at thumbs preview. Use it on your site and you wont regret


MOOdalBox Cool mootools scripts

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.


elselect Cool mootools scripts

elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.


moosound Cool mootools scripts

MooSound is a MooTools API for Flash-enabled sound management.
That may not seem very exciting on its own, but if you need to add sounds to your page using MooTools, you’ll probably find it useful. ( You may need it if you need an audioplayer )


moorainbow Cool mootools scripts

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.
What at first I wanted to have was of course a color picker, but I wanted it to be rapid, optimized, clear and powerful: so here we are.

morphing cloud

morphing cloud Cool mootools scripts

Nice approach to tag clouds. Drawing a cloud in javascript and make it changes dynamically


calendar Cool mootools scripts

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

form validation

validate Cool mootools scripts


  • optional onFail function.
  • optional onSuccess function which will overide the form submition, this can be used to validate an ajax form.
  • onBlur validating
  • shows errors next to item or in a list.

Custom HTML Form Elements

1custom form elements Cool mootools scripts

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.

Fancy Menu

1fancy menu Cool mootools scripts

Custom navigation bar with some cute Javascript effects that will certainly impress your friends


1fancy upload Cool mootools scripts

Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars.


1fvalidator Cool mootools scripts

Nowadays everybody knows that javascript can be used to validate input data in HTML forms before sending off the content to a server. Despite of that, when there are many fields in the form, the JavaScript validation becomes too complex and boring to code. That’s why fValidator exists, with it form validations are many times easier.


1iCarousel%20 Cool mootools scripts

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.


1ifisheye Cool mootools scripts

iFishEye goal is to bring the FishEye effect into the web and provide an easy development alternative for content displaying with standard compliant XHTML and unobtrusive JavaScript.


1imask Cool mootools scripts

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.


1mooForm Cool mootools scripts

mooForms – custom checkboxes and radio buttons


moopix Cool mootools scripts

MooPix isn’t a slideshow, it’s a way for you to access your public Flickr photos without doing PHP, Ruby, or Python situps

Related posts:

  1. MooTools Tutorial for Designers
  2. Mootools 1.2 cheat sheet
  3. Simple tutorial for MooTools usage
  4. elSelect – customizable SELECT element.
  5. Multiple file Uploaders

elSelect – customizable SELECT element

elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

Click on screenshot to see it in action. Example will appear in a new window because it uses MooTools library which conflicts with the Prototype library used at this site. And “mootools is not trying to be conflict free” ( more info – )

elselect elSelect   customizable SELECT element.

Why i did it? Well, you all know that select element and IE have problems.
They are :

  • SELECT ignore z-index and will display over any other position element (fixed in IE7) ,
  • disabled property for OPTION tag do not work in IE
  • you cant change look of standard SELECT using CSS

This class successfully solve all problems, but elSelect is still in development……

Future Enhancements(Hopefully)

  • Create a select from an array instead of select element.
  • Add functions to dynamically add / remove rows.
  • Options sorting

elSelect is made with MooTools Framework.

for more information click here

Here goes example and download link.