Sleek thumbnail effect using MooTools

Thumnails are an integral part of many website which gives an idea about the list of images & saves a lot of space so that the user can have a view of the images before viewing. This also reduces the pagesize so that only the thumbnail is loaded than the entire image. In this tutorial, create a cool thumbnail effect using MooTools.

Thumnail effect using MooTools

Thumnail effect using MooTools

Resource: Sample | Tutorial

Twitter clone using MooTools/PHP

Twiiter is one of the popular micro-blogging portal which almost everyone who is connected to the web would have heard of & interested in. The power of Twitter is its simplicity & the neat UI which makes it easier to update your status as and when required. This tutorial is from net-tuts which helps you create a twitter clone using Mootools & PHP.

Twitter clone using MooTools & PHP

Twitter clone using MooTools & PHP

Resource: Sample | Tutorial

Light weight tooltip plugin using jQuery

Simple custom tooltip plugin using jQuery. 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.

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

Tooltip using jQuery

Tooltip using jQuery

Resource: Sample | Tutorial

Amazing Sprite animation using jQuery

“jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.

You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you’ll see what we mean).” Amazing Plugin…

Sprite Animation using jQuery

Sprite Animation using jQuery

Resource: Sample | Tutorial

Tree view plugin using jQuery

jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin. jsTree is absolutely free (licensed same as jQuery – under both GPL and MIT – whichever suits your needs).

Tree View using jQuery

Tree View using jQuery

Resource: Sample | Tutorial

Flickr Style Photo Tagger using jQuery

Create a sleek flickr style photo tagging feature using jQuery for your site. In this Flickr-style effect, the user can draw boxes on top of portions of an image/photo and then leave a note as to the relevance of said box (ex. “The lighting here is amazing!”). In addition to tagging a photo the user can also mouse over existing tags to see the notes left by other users. To keep things simple for this demo, Tutorial author has concentrated purely on the Javascript, leaving out all server-side code and persistence mechanisms. Lot of hardwork & thousand lines of code give for FREE! Thanks to Ben Nadel.

Flickr Style Photo Tagger using jQuery

Flickr Style Photo Tagger using jQuery

Resource: Sample| Tutorial

Add Multitouch to your firefox browser using jQuery

PookyTouch enables the use of multi-touch in Mozilla Firefox. Simply put, this is done by forwarding multi-touch events, generated by a TUIO server, to HTML or XUL pages. The events follow the Safari API. We also provide a simple multi-touch widget (drag&drop, stretching, rotation) with our javascript library jPooky.

Add Multitouch to firefox using jQuery

Add Multitouch to firefox using jQuery

Resource: Sample | Tutorial

Interesting Social share plugin using jQuery

Build your own social share toolbar using jQuery and CSS3. The toolbar should be visible at the bottom right corner of your browser. If you hover over the toolbar it will slide up, click the minimize button it will all but disappear, click one of the icons and you will be taken to either the login page or the share page of that social site. Very Interesting Plugin…

Social Share utility using jQuery

Social Share utility using jQuery

Resource: Sample| Tutorial

Digg-style post sharing plugin using jQuery

Digg has a stylish post sharing option which popups when you hover over the share link. This tutorial has a detailed explanation how to design & create a plugin similar to that using jQuery. Useful plugin & good tutorial.

Digg style post sharing using jQuery

Digg style post sharing using jQuery

Resource: Sample | Tutorial

Youtube style “Like” Rating using jQuery

Youtube’s Like rating is an interesting feature which makes use of compact space to display the option & at the same time expands on rating to display the overall score as well. Having the total rating score hidden helps in a way to avoid the user’s rating from being influenced by the previous ratings.

Youtube style like rating using jQuery

Youtube style like rating using jQuery

Resource: Sample | Tutorial