iView Slider : Responsive jQuery Slider Plugin

iView Slider is a responsive jQuery slider plugin for image slider.

Aviaslider - unique jQuery slideshow plugin

Aviaslider is a unique slideshow plugin with several transition effects.

jWindowCrop : For facebook like image cropping

jWindowCrop is jQuery plugin for easy zoom and pan image cropping.

Digicrafts - Thumbnail Gallery jQuery Plugin

Digicraft is a jQuery plugin to display thumbnail gallery with XML support.

RefineSlide : jQuery Slider Plugin

RefineSlide is a slider with CSS transition and 3D trasnform support.

Thursday, May 31, 2012

jQuery Photo Tag Plugin

This is a highly configurable photo tagging plugin. It’s primely for tagging people on photos but it can also be used to create notes, but you will need to adapt the form part a little bit. The code is really clean and easy to understand, it follows the jquery plugin recommendations.
Home : http://karlmendes.com/2010/07/jquery-photo-tag-plugin/
Demo : http://karlmendes.com/2010/07/jquery-photo-tag-plugin/

PhotoSwipe - Image Gallery for Mobile and Touch Devices

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. iPhone, iPad, Android, Blackberry 6 and Desktop all supported. Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app can easily use this plugin. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website. Photoswipe is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.
PhotoSwipe - Image Gallery for Mobile and Touch Devices
Home : http://www.photoswipe.com/
Demo : http://www.photoswipe.com/latest/examples/04-jquery-mobile.html

Sunday, May 27, 2012

zAccordion : A horizontal accordion plugin for jQuery

zAccordion is a horizontal accordion plugin for jQuery. It is simple and easy to implement. It provides a wide range of options like the timeout between the slides, a custom trigger and even an easing option to create more interesting horizontal accordions.

Home : http://www.armagost.com/zaccordion/
Demo : http://www.armagost.com/zaccordion/

Friday, May 25, 2012

Reveal - jQuery Modals Made Easy [Newest in jQuery Modal Hotness]

Reveal is a jQuery plugin for dead simple modals that comes with some sexy base CSS and can be implemented programatically or with the new HTML5 custom data attributes (data-attribute). It is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB.
Home : http://www.zurb.com/playground/reveal-modal-plugin
Demo : http://www.zurb.com/playground/reveal-modal-plugin

Monday, May 21, 2012

qTip2: Easy to Use & Powerful Tooltip jQuery Plugin

qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0’s user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses.
qTip2 utilises a separate style-sheet to contain all tooltip styles, which allows you to easily add new styles without additional JavaScript code, as well as easily editing pre-existing styles.

Home : http://craigsworks.com/projects/qtip2/
Demo : http://craigsworks.com/projects/qtip2/

Saturday, May 19, 2012

simple Slide : A jQuery slideshow plugin

Simple Slide is a nice jQuery plugin for slideshow. It's easy, small, flexible and neat. The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis. At 15kB for the full version, and a minute 6kB for the hyper-compressed version, and tidy code, this plugin won’t bog down your site or burn out your users’ browsers, even using it in multiple iterations per page.

With the little markup you need to add to your site, you get a full featureset, like the ability to put whatever data you want within the slide window, even mixed types, a proportionally-correct status display that configures itself, fullscreen display and swipe functionality.Add some slick usability to your site with a plugin that’s fun and easy to use.
Home : http://simplesli.de/
Demo : http://simplesli.de/

Friday, May 18, 2012

Clearbox3 : Image and content viewer

Clearbox3 is a nice and easy image and content viewer overlay window. It has came with newer version. The script became much smarter. It supports lot of new content types, but also the usage has been changed. Default folders of the script has been changed. It added multi-language support and more user settings. It supports a new animation called 'grow'. Now, clearbox is also working BEFORE the page is fully loaded! In clearbox 3 you can add your multi-line comment to any content. You can rotate the images with clearbox (not working in Internet Explorer or some other older browsers) and also fancy OSD is added.

Home : http://www.clearbox.hu/index_en.html
Demo : http://www.clearbox.hu/index_en.html

Thursday, May 17, 2012

TipTip jQuery Plugin for tooltip

TipTip is a better way to make a custom tooltips. Its very lightweight ( only 3.5kb minified) and intelligent jQuery plugin. It doesnot uses any images and also it is fully customizable using CSS.

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
Home : http://code.drewwilson.com/entry/tiptip-jquery-plugin
Demo : http://code.drewwilson.com/entry/tiptip-jquery-plugin

Wednesday, May 16, 2012

Digicrafts - Thumbnail Gallery jQuery Plugin

Digicraft is a jQuery plugin to display thumbnail gallery. It is a easy to use jQuery plugin for web developer to build Javascript gallery on their web application. The gallery can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography portfolio. It supports Safari 5+, Firefox 3+ and IE7+. And it requires jQuery 1.4.x Javascript framework.

Highlighted features:
  • Driven by xml or arrays
  • 3D Transition Effects (support in Safari)
  • Easy to setup
  • Slide show controls
  • Included image preview lightbox with zoom
  • Easy customization
  • Multi-touch support in IOS
Home : http://www.digicrafts.com.hk/components/JSThumbnailGallery
Demo : http://livedocs.digicrafts.com.hk/examples/JSThumbnailGallery/

Monday, May 14, 2012

jQuery Knob : jQuery plugin to create beautiful circular switches

jQuery Knob is powerful jQuery plugin that helps users to create beautiful circular switches like volume controls. It works by transforming any given input fields according to the values defined in its attributes and can be drag-and-dropped to change the value. It is canvas based and no images or sprites are used. Another awesome feature is that it is downward compatible. If you are thinking how to create jQuery knob then this plugin is for you.
jQuery Knob : jQuery plugin to create beautiful circular switches
jQuery Knob

It also facilitates users to define the min-max values, default value on initial load, color and put it into read only mode. It supports touch, mousewheel and keyboard events. It is released under GPL and MIT license.

Saturday, May 12, 2012

Micro Image Gallery : A jQuery Plugin

The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.

Home : http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/
Demo : http://tympanus.net/Tutorials/MicroGallery/

Friday, May 11, 2012

URI.js - javascript library for working with URLs

URL is the address of World Wide Web page. A URL is a formatted text string used by Web browsers, email clients and other software to identify a network resource on the Internet. Network resources are files that can be plain Web pages, other text documents, graphics, or programs. URI and URL are sometimes used as synonyms but there is little difference between them. URL is technically a type of URI. For example: http://www.example.com/index.php is a URL. URL consists of scheme (or protocol), authority, path and query string. There may also fragment in the URL which the string after # sign in the URL.

We may sometime need to manipulate the url in our site. We can manipulate the URL string from the Javascript side also. Using pure javascript to manipulate is not impossible but very tedious. URI.js is the Javascript library for working with URLs. It offers a "jQuery-style" API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths. While URI.js provides a jQuery plugin. URI.js itself does not rely on jQuery. You don't need jQuery to use URI.js.

How to use it?
First you need to include the javascript library in your page. You can download it from here. You can find URI.js file in the src folder. Now you are ready to use the awesome feature of this javascript library.
Lets take an example of manipulating URL string in 'jQuery style'.
// mutating URLs  
// -> http://rodneyrehm@example.org/foo.html?hello=world      
// -> http://example.org/foo.html?hello=world      
// -> http://example.org/bar/foo.html?hello=world      
// -> http://example.org/bar/foo.xml?hello=world      
// -> http://example.org/bar/foo.xml?hello=world#hackernews      
// -> http://example.org/bar/foo.xml?hello=world      
.search("") // alias of .query()          
// -> http://example.org/bar/foo.xml      
// -> http://example.com/bar/foo.xml      
.search({ foo: "bar", hello: ["world", "mars"] });          
// -> http://example.com/bar/foo.xml?foo=bar&hello=world&hello=mars
If you want to add 'username' in the URL string the use username() function and the library will place the name in the correct place and you dont need to worry a bit. Lots of API functions are available in the library like directory(), suffix(), hash(), fragment(), search(), tld(), hostname(), port(), domain(), subdomain(), etc. This plugin surely makes our life easy in manipulation of URL. relativeTo() and absoluteTo() functions are there to calculate the relative and absolute paths. Also you can easily normalize and clean the URL.

Want to compare two URLs. Dont worry! equals() function will check the URLs and return output as true or false. Moreover parsing URN will also be piece of cake using this library. In the latest version, it also offers jQuery integration. For the plugin to work, you need to regularly loadURI.js, as well as jquery.URI.js. URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin.

We must appreciate the author of the library Rodney Rehm for the creation of such useful library.

You can find whole API documentation here [API Documentation]. If you want to understand more about the URL, visit this link [Understanding URIs].

There are some alternatives of URL manipulation library, if you dont like this URI.js.

Thursday, May 10, 2012

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

Do you have a one page and you want keep the dropdown menu containing table of contents for the navigation? Then this Fixed Table of Contents Drop-Down Menu is what you are looking for. It is fixed in the site and menu collapses/expands showing the TOC. Many options are privided to make the plugin flexible and customizable. Menu can be opened in either by click or hover. You can also enable or disable showing submenu.

Home : http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/
Demo : http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery/

ppGallery - jQuery Lightbox Gallery

You can showcase your gallery in style with ppGallery, an advanced lightbox photo gallery plugin built with the jQuery Framework. It is lightweight, unobtrusive and installs with ease. It has been tested on the latest versions of IE7, IE8, Safari, Firefox, Google Chrome, Camino and Opera. ppGallery will take your images and create an elegant photo gallery widget. With some simple copy and paste, you'll install ppGallery in no time! Fast & easy setup.
  • Ready right out of the box. 
  • Fully customizable with css
  • Slide show play/pause feature 
  • Built in preloading feature allows for quick browsing and no waiting between images.
  • URL hashing allows the ability to directly link to a specific image 
  • Lite, snappy but elegant and smooth feel 
  • Image count and number identification so you know where you are in the gallery 
  • Thumbnail preview feature allows for convenient navigation through the gallery
  • Easy surfing: Navigate through the photos using the spacebar or your left and right arrow keys
Home : http://www.ppplugins.com/downloads/ppgallery.php
Demo : http://www.ppplugins.com/demo/ppgallery/

Wednesday, May 9, 2012

JQVMap - jQuery Vector Maps

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.
It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany". There are several customization options for beautifying the maps including colors, borders or their opacities. Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks. Also, it is possible to select any regions on initial load or after any custom event.

Home : http://jqvmap.com/
Demo : http://jqvmap.com/

Tuesday, May 8, 2012

14 Reasons Why Nobody Used Your jQuery Plugin

With so many folks developing jQuery plugins, it’s not uncommon to come across one that just plain – for lack of better words – sucks. There’s no examples or documentation, the plugin doesn’t follow best practices, etc. But you’re one of the lucky ones: this article will detail the pitfalls that you must avoid.

  1. You Aren’t Making a jQuery Plugin
    There are some patterns that are, more or less, universally accepted as “The Right Way” to create jQuery plugins. If you aren’t following these conventions, your plugin may… suck! $ is passed as jQuery; we do it this way to ensure that, outside of the anonymous function, $ can still refer to something else entirely, such as Prototype. Passing the variable for the globally accessible window object allows for more compressed code through the minification processes (which you should be doing, as well).
  2. You Aren’t Documenting Your Code (Correctly)
    Arguably, the most important thing you can do when publishing your code is add the necessary documentation. The gap between what you explain to developers and what the code actually does or can do is the time that users don’t want to waste figuring out the ins and outs of your code. Documentation is a practice that doesn’t have any hard-fast rules; however, it is generally accepted that the more (well organized) documentation you have, the better. This process should be both an internal practice (within/interspersed throughout your code) as well as an external practice (explaining every public method, option, and multiple use cases thoroughly in a wiki or readme).
  3. You Aren’t Providing Enough Flexibility or Customizability
    The most popular plugins offer full access to variables (what most plugins refer to as “options” objects) that a user may want to control. They also may offer many different configurations of the plugin so that it is reusable in many different contexts. For instance, let’s consider a simple slider plugin. Options that the user might wish to control include the speed, type, and delay of the animation. It’s good practice to also give the user access to classnames/ID names which are added to the DOM elements inserted or manipulated by the plugin. But beyond this, they may also want to have access to a callback function every time the slide transitions, or perhaps when the slide transitions back to the beginning (one full “cycle”).
  4. You’re Requiring Too Much Configuration
    Ok, so tip number three suggested that the more complex actions your plugins have, the more complex control that should be available. A big mistake, however, is making too many options required for plugin functionality. For instance, it is ideal for UI based plugins to have a no-arguments default behavior. Certainly, sometimes this isn’t realistic (as users may be fetching a specific feed, for instance). In this case, you should do some of the heavy lifting for them. Have multiple ways of passing options to the plugin. For instance, let’s say we have a simple Tweet fetcher plugin. There should be a default behavior of that Tweet fetcher with a single required option (the username you want to fetch from). The default may, for instance, grab a single tweet, wrap it in a paragraph tag, and fill the selector element with that html. This is the kind of behavior that most developers expect and appreciate. The granular options should be just that: options.
  5. You’re Mixing External CSS Rules and Inline CSS Rules
    It’s inevitable, depending upon the type of plugin, of course, that you will have to include a CSS file if it is highly based on UI manipulations. This is an acceptable solution to the problem, generally speaking; most plugins come bundled with images and CSS. But don’t forget tip number two – documentation should also include how to use/reference the stylesheet(s) and images. Developers won’t want to waste time looking through your source code to figure these things out.
  6. You Don’t Offer Examples
    The proof is in the pudding: if you can’t provide a practical example of what your plugin does with accompanying code, people will quickly be turned off to using your plugin. Simple as that. Don’t be lazy.
  7. Your Code Doesn’t Match Their jQuery Version
    jQuery, like any good code library, grows with every release. Most methods are kept even after support is deprecated. However, new methods are added on; a perfect example of this is the .on() method, which is jQuery’s new all-in-one solution for event delegation. If you write a plugin that uses .on(), people using jQuery 1.6 or earlier will be out of luck. Now I’m not suggesting that you code for the lowest common denominator, but, in your documentation, be sure to explain which version of jQuery your plugin supports. If you introduce a plugin with support for jQuery 1.7, you should strongly consider maintaining support for 1.7 even once 1.8 comes out. You should also consider taking advantage of new/better/faster features in jQuery as they come out.
  8. Where’s the Changelog?
    Along with keeping your jQuery version support/compatibility a part of your documentation, you should also be working in version control. Version control (specifically, via GitHub) is largely the home of social coding. If you are developing a plugin for jQuery that you want to eventually publish in the official repository, it must be stored in a GitHub repository anyway; it’s time to bite the bullet if you haven’t learned how to use version control. There are countless benefits to version control, all of which are beyond the scope of this article. But one of the core benefits is that it allows people to view the changes, improvements, and compatibility fixes you make, and when you make them. This also opens the floor for contribution and customization/extension of the plugins you write.
  9. Nobody Needs Your Plugin
    Ok, we’ve ignored it long enough here: some “plugins” are useless or too shallow to warrant being called a plugin. The world doesn’t need another slider plugin! It should be noted, however, that internal teams may develop their own plugins for their own uses, which is perfectly fine. However, if you’re hoping to push your plugin into the social coding sphere, find a reason to write more code. As the saying goes, there’s no reason to reinvent the wheel. Instead, take someone else’s wheel, and build a racecar. Of course, sometimes there are new and better ways of doing the same things that have already been done. For instance, you very well might write a new slider plugin if you are using faster or new technology.
  10. You Aren’t Providing a Minified Version
    This one is fairly simple: offer a minified version of your code. This makes it smaller and faster. It also ensures that your Javascript is error free when compiled. When you minify your code, don’t forget to offer the uncompressed version as well, so that your peers can review the underlying code. Free and cheap tools exist for front-end developers of all levels of experience.
  11. Your Code is Too Clever
    When you write a plugin, it is meant to be used by others, right? For this reason, the most effective source code is highly readable. If you’re writing countless clever one-liner lambda style functions, or your variable names aren’t semantic, it will be difficult to debug errors when they inevitably occur. Instead of writing short variable names to save space, follow the advice in tip number nine (minify!). This is another part of good documentation; decent developers should be able to review your code and understand what it does without having to expend too much energy.
  12. You Don’t Need jQuery
    As much as we all love using jQuery, it is important to understand that it is a library, and that comes with a small cost. In general, you don’t need to worry too much about things like jQuery selector performance. Don’t be obnoxious, and you’ll be just fine. jQuery is highly optimized. That said, if the sole reason why you need jQuery (or a plugin) is to perform a few queries on the DOM, you might consider removing the abstraction entirely, and, instead, sticking with vanilla JavaScript, or Zepto.
  13. You’re Not Automating the Process
    Grunt is a “task-based command line build tool for JavaScript projects”. It allows you to do things like this:
    grunt init:jquery
    This line (executed in the command line) will prompt you with a set of questions, such as the title, description, version, git repository, licenses, etcetera. These pieces of information help to automate the process of setting up your documentation, licensing, etc.
  14. You’re Not Testing
    Oh, by the way – you do test your code, right? If not, how can you ensure/declare that your code works as expected? Manual testing has its place, but, if you find yourself refreshing the browser countless times every hour, you’re doing it wrong. Consider using tools, such as QUnitJasmine, or even Mocha. Testing is particularly useful when merging in pull requests on GitHub. You can require that all requests provide tests to ensure that the new/modified code does not break your existing plugin.
If you are writing a jQuery plugin, it is vital that you stray away from the pitfalls listed above.
Original Article : 14 Reasons Why Nobody Used Your jQuery Plugin

jQuery Countdown - jQuery countdown plugin that doesn't sucks

Countdowns can be a great way to build up anticipation when launching a new website or web application, it gives users a clear indication of how long they need to wait before they can get access to your site. jQuery Countdown is a handy and pretty jquery countdown plugin for you. You can easily customize the format, images, width and height. And it’s only 1.7 KB. Best of all, it’s released under Apache License 2.0 which is free for download.

Home : jQuery Countdown Home Page
Demo : jQuery Countdown Demonstration

Monday, May 7, 2012

3d tag cloud ( 3D Tag Sphere )

3D tag cloud is a jQuery plugin to display your tag in awesome way. Tags are sized according to weight. You need to touch / drag within the black box to rotate the tags. Mouse wheel zooms is also supported. It also works on touch devices.

Home : http://www.iangeorge.net/snippets/tags/
Demo : http://www.iangeorge.net/snippets/tags/

Tiny Scrollbar - A lightweight jQuery plugin

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
  • iPhone, iPad, Android support! 
  • Can scroll vertical or horizontal 
  • Supports scrolling by wheel, thumb, or track 
  • It has a update function so it can handle content changes. 
  • Size of the scrollbar and thumb can be set to auto or a fixed number 
  • Easy customizable 
  • Supports anchors 
  • Lightweight its only 100 lines of code. mimified the size is 2,29 kb
Home : http://baijs.nl/tinyscrollbar/
Demo : http://baijs.nl/tinyscrollbar/

Sunday, May 6, 2012

audio.js : jQuery plugin to use HTML5 audio tag anywhere

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Understanding jQuery Events

Events are actions that can be detected by your Web Application. Because jQuery is so simple to use, lots of times people don’t even want to understand what events are. As long as they can just use the functions with short names like click() or css().
If you are pursuing an interest in jQuery, you are likely to end up learning other programming languages as well. jQuery provides us with an interface to existing Javascript events. All events that there is a jQuery function for, are actually tied to some Javascript event.
Most events are assigned to empty functions from the start. We can extend the functionality of an event, by overriding that function with our own. So then, the most important thing about events is that we know what their names are and what they do. Learning what events are available to us is something that comes with the experience of writing Javascript code.
Consider the following jQuery selector and event handler function;
 $(window).load( function(){ alert('Loading finished.'); } ); 
This function() is also known as a function closure, because this function doesn’t have a name. By using a function closure, we simply want the code to be executed as soon as we define that function. We are not concerned with that function’s name. That is why we omit it.
This function closure is the code you want to be executed when a jQuery event occurs. In this case we have chosen the load event, which is the equivalent of the window.onload event, as shown below:

<script language = "javascript">

window.onload = function() { alert('Loading finished.'); }


Can we use the code above instead? Yes, we can even use the old-school onload = “” in the body tag in the HTML of the webpage. Either way, exactly the same event will be triggered. But this is a simple example. Sometimes some events require different syntax, based on which browser you are writing your Javascript code for. jQuery saves us from thinking about those details.
Binding Event Handlers
Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows;
$('div').bind('click', function( event ){

 alert('Hello admin.');

This code will cause the division element to respond to the click event; when a user clicks inside this division thereafter, the alert will be shown. Try it yourself.
The full syntax of the bind() command is as follows;
selector.bind( eventType[, eventData], handler)
Following is the description of the parameters;
eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
eventData: This is optional parameter is a map of data that will be passed to the event handler.
handler: A function to execute each time the event is triggered.
Removing Event Handlers
jQuery provides the unbind() command to remove an exiting event handler. The syntax of unbind() is as follows:
selector.unbind(eventType, handler)
Following is the description of the parameters;
eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
handler: If provided, identifies the specific listener that’s to be removed.
Below is a table containing some of the popular jQuery events.
.bind() - Attach a function to an arbitrary event of your choice.
.blur() - Attach focus left a selected element event.
.change() - Value of the selected input element has changed.
.click() - The selected element has been clicked.
.dblclick() - The selected element has been double clicked.
.die() - Remove all events that were attached with .live()
.error() - Bind a handler to the error Javascript event
.focus() - The selected element received cursor focus
.focusin() - Detect focus of an input element nested inside arbitrary parent element – the selection. This function expects the parent as the selection.
.focusout() - Detect loss of cursor focus of an input element nested inside a parent – the selection.
.hover() - Only during the time mouse pointer is inside an element. Fires on mouse-enter and mouse-leave. Expects two handlers, not just one like most other functions.
.toggle() - Bind two or more handlers to the matched elements, to be executed on alternate clicks.
.unbind() - Remove a previously-attached event handler from the elements.
.unload() - Bind an event handler to the “unload” JavaScript event.
Source : here

Saturday, May 5, 2012

Filtrify - Beautiful Advanced Tag Filtering Plugin with HTML5 and jQuery

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu. Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.
It uses HTML5 data attribute to store the metadata. It's a great plugin if you have a catalog of products and you want to make it easy for your customers to browse through all of them with different filters based on category, and also search feature. Or, it's also a great plugin for portfolio page which will work the same to showcase all your works. Flitrify is tested across all modern browsers and the author tried best to make it work in IE7, however, it's a bit buggy. This is a very useful plugin that integrated with other great plugins.
Home : http://luis-almeida.github.com/filtrify/
Demo : http://luis-almeida.github.com/filtrify/music.html

Wednesday, May 2, 2012

jQuery NailThumb - from any image to any thumbnail with full control

Create thumbnails easily from high-res images, without any distortion, with one line of code. You can even decide thumbnail dimensions directly from CSS. Integrates prefectly with any media gallery, even more usefull in dynamic web application when you can face any shape or size. If you want to add avatars to your application it's easier to use this plugin to let them fit any size you need then to develop a functionality that help your user to upload avatars of the right size/sizes.

Home : http://www.garralab.com/nailthumb.php
Demo : http://www.garralab.com/nailthumb-examples.php

Tuesday, May 1, 2012

Real Shadow - jQuery Plugin that casts photorealistic shadows

Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.
 With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position. So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect. Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.
Home : http://indamix.github.com/real-shadow/
Demo : http://indamix.github.com/real-shadow/

back to top