Saturday 30 November 2013

SIEVE : JQUERY PLUGIN FOR SEARCH ANYTHING

Sieve is a jQuery plugin allows you to quickly add an interactive search filter to any block of content.

Direct Link Demo

DOWNLOADIFY : DOWNLOAD TEXT FILES WITHOUT SERVER INTERACTION WITH JS LIBRARY

A tiny javascript + Flash library that enables the creation and download of text files without server interaction.Web applications that allow you to generate vCards, color palettes, custom code, etc would benefit from using this library. In addition to increasing speed (no round trip to the server) this solution can reduce the database and server load of existing web applications.
This is not a library to 'force download' a file from a server. It does not interact with a server at all.

Direct Link Demo

MELONHTML5 : 3D CUBE GALLERY IN HTML5, JQUERY AND CSS3

This is a flexible and easy to integrate Photo Gallery written in HTML5 , CSS3 and jQuery.
Features:

3D Cube Animation (Chrome, Safari, Firefox, IE10 )
Automatic thumbnail generation
Unique animated thumbnail preview
Grid or Custom Layout
Lightbox
- Navigation
- Keyboard Control
- 3 Animations
- Slideshow

Direct Link Demo

JKIT : JQUERY BASED UI TOOLKIT

A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things!

Direct Link Demo

KARTOGRAPH : JQUERY INTERACTIVE MAP APPLICATIONS WITHOUT GOOGLE MAPS

Kartograph is a new framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.
The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

Direct Link Demo

Friday 29 November 2013

FLARE : JQUERY OPTICAL FLARE FX

This is a plugin for jQuery which animates a colored optical flare to slide across elements. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.
Features:

Cool movie-style effect also used in games such as Sleeping Dogs.
Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
Uses modern CSS techniques.
Customizable glow color, speed, glow radius, and trigger event.
First Optical flare effect without use of images.

Direct Link Demo

BEHAVE.JS : ADD IDE STYLE BEHAVIORS TO PLAIN TEXT AREAS

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in.
Features:

Supports Partial IE6, IE7+, Firefox 8+, Safari 4+, Chrome X+, Opera 12
No Dependencies
Custom Code/Behavior Fencing
Hard and Soft Tabs
Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes
Auto delete a paired character
Overwrite a paired character
Multi-line Indentation/Unindentation
Automatic Indentation

Direct Link Demo

CLEDITOR : WYSIWYG HTML EDITOR IN JQUERY

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.

Direct Link Demo

ANIMATE.CSS :A BUNCH OF PLUG-AND-PLAY CSS ANIMATIONS WITH JQUERY

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.A big ol’ goody bag filled with CSS animations for WebKit, Firefox and beyond.
To use animate.css in your website, simply drop the stylesheet into your document’s <head>, and add the class animated to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element. Super!
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules.

Direct Link Demo

Thursday 28 November 2013

ECHO.JS : SIMPLE JAVASCRIPT IMAGE LAZY LOADING

Echo.js, simple JavaScript image lazy loading via HTML5 data-attributes, superfast and standalone (jQuery free).Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image "src"attribute. This is also an asynchronous process which also benefits us.

Direct Link Demo

PULLOUTS : JQUERY SLIDE-OUT WIDGETS

PullOuts is a stand-alone script based on a popular WordPress plugin - PullOut Widgets, and can be used on any website that supports HTML and JavaScript.PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it's a block of text, images, shopping cart, login, search or subscription form, a video or any other content - you can make it a pullout.
Features :

Flexible pullout widget positioning on top, right, bottom or left side.
Multiple pullout triggers:
- on mouse click;
- on mouse hover;
- timer countdown;
- page count;
- when specified element appears on the screen.
Unlimited widget colors.
289 slick icons for pullout tabs.
32 sliding animation effects.
Multiple styles for pullout tabs: square, rounded corners, borders, combination of the above.
CSS3 vertical and horizontal tabs.
Pullout speed control.

Direct Link Demo

HOW TO CREATE TABS IN HTML USING JQUERY

HTML based tabs are widely used as a part of the modern ux practices as it's the most convenient way of presenting data and users can easily browse through larger sum of data without leaving the page or waiting for any postbacks.
Say goodbye to those long pages and implement HTML tabs today to improce your website's user experience.
I will be using jQuery to create the HTML Tabs today, don't worry it won't be a killer. I'll guide you through every step and I'm confident that by the time you're done with this tutorial you'll agree to the fact how easy it is to create tabs with just a few lines of jQuery's magical code.

Direct Link Demo

MELONHTML5 &AMP;#8211; JQUERY GRID SLIDER

Grid Slider is a light-weight, high performance plugin that lets you display multiple items in perfect grid layout. It comes with various options letting you configure it without manually changing code. You could also use its built-in API to intergrate it with your own app very easily.

Direct Link Demo

Wednesday 27 November 2013

JQUERY SEARCHABLE MAP TEMPLATE WITH GOOGLE FUSION TABLES

You want to put your data on a searchable, filterable map. This is a free, open source tool to help you do it.

Features :

clean, full screen layout
new mobile and tablet friendly using responsive design
address search (with variable radius)
geolocation (find me!)
new RESTful URLs for sharing searches
results count (using Google’s Fusion Tables API)
ability to easily add additional search filters (checkboxes, sliders, etc)
all done with HTML, CSS and Javascript – no server side code required

Direct Link Demo

FIXIE.JS : AUTOMATICALLY ADDS FILLER CONTENT TO HTML DOCUMENTS

Fixie.js is an open source tool that automatically adds filler content to HTML documents.Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.
By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

Direct Link Demo

YUNERO : JQUERY PLUGIN DISPLAYS A VIDEO FEED FOR YOUTUBE CHANNEL UPLOADS

Now you can bring your Youtube uploads to your websites with “Yunero” – a new jQuery plugin that creates a widget on your website. Just specify your youtube channel URL and this widget will display the recent uploads from your channel. You may also specify your youtube playlist URL and video feeds from your playlist will be displayed. A subscription box for you is also shown to attract social people.

Direct Link Demo

SIMPLE JQUERY FULLSCREEN IMAGE GALLERY

A fullscreen image gallery made with jQuery and CSS.
The gallery features fullscreen images in various modes and custom thumbnail scrolling script.

Direct Link Demo

Tuesday 26 November 2013

STRATUS 2 : JQUERY POWERED SOUNDCLOUD PLAYER

Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog.You can add tracks to Stratus right from your page. Simply give a SoundCloud track link the class of stratus and the player will do the rest. This works great for the discography section of your site.

Direct Link Demo

CODINGJACK'S JQUERY 3D CAROUSEL

CodingJack's 3D Carousel is a Real 3D using CSS3 3D Transforms carousel plugin with jQuery,Html5 & Css3
The carousel is supported on iOS and Android and includes touch swipe functionality. It looks great on a tablet and will even work on a smartphone. But because the carousel can appear small on smaller screens, I've included two special options for smartphones:

Option to display a thumbnail grid instead (the "fallback" presentation)
Option to transform the grid fallback into a responsive layout. View either preview from your phone for an example.

Direct Link Demo

PHERY : PHP + AJAX + JQUERY INTEGRATION

Straightforward and powerful AJAX library with direct integration and mapping of all jQuery functions in PHP, the mapping is extended to custom functions set by $.fn, can create elements just like $(”) does, as phery creates a seamless integration with jQuery AJAX to PHP functions.

Direct Link Demo

Monday 25 November 2013

FILTER-ME : JQUERY PLUGIN TO FILTER IMAGES USING CANVAS

jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files. jDataView is used to read the Photoshop file, from which we create a Monotonic Spline Curve representing its data. From this curve the new pixel RGB values can be calculated. These values are then applied using HTML5′s canvas element.
Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.

Direct Link Demo

WORDSMITH : JQUERY PLUGIN THAT ADDS ON-DEMAND WORD DEFINITIONS

Wordsmith is a jQuery plug-in that adds on-demand word definitions to your site.Wordsmith is easily added to your existing web page by including jQuery, the Wordsmith javascript file and then by simply calling the Wordsmith plug-in with the selector(s) you wish to attach Wordsmith.

Direct Link Demo

PULL OFF AWESOME SCROLL EFFECTS WITH STROLL.JS

Stroll.js is a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I'll show you how it works.
Stroll.js is a neat little JavaScript library that brings a bunch of eye-catching animations to the scroll action on list items. The idea is that you have a group of items in a scrollable list and you use Stroll.js to make browsing that list more interesting.

Direct Link Demo

PATHJS : SIMPLE, LIGHTWEIGHT ROUTING FOR WEB BROWSERS

PathJS is a lightweight, client-side routing library that allows you to create “single page” applications using Hashbangs and/or HTML5 pushState.
Features:

Lightweight
Supports the HTML5 History API, the ‘onhashchange’ method, and graceful degredation
Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
Well Tested (tests available in the ./tests directory)
Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
Independant of all third party libraries, but plays nice with all of them

Direct Link Demo

Sunday 24 November 2013

JQUERY TEXT HIGHLIGHTER AND FILTER PLUGIN

When someone types anything in it then a set area on your page becomes responsive and only displays part of that area which contains the word or string typed by the user.

Direct Link Demo

GOOGLE MAPS SLIDER WITH JQUERY

I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.
I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

Direct Link Demo

BUZZ! : A JQUERY HTML5 AUDIO LIBRARY

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade gracefully on non-modern browsers.

Direct Link Demo

MEDIATABLE : JQUERY RESPONSIVE TABLE PLUGIN

MediaTable listen to screen size to define visible or hidden columns using CSS media query.You can choose what column to view with the automagically columns menu. This is a usefull solution to display big data table into small screen devices allowing the user to display relevant data at the beginning then to choose what data to display.

Direct Link Demo

Saturday 23 November 2013

HOVEREX : JQUERY IMAGE HOVER ANIMATION PLUGIN

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.
Features:

Over 36 animations
Over 18 build-in templates
Responsive able
Easy to customize
Include two version
Build in 8 animate queue,and you can customize easy
Inline Zoom Support. Can be set the zoom range and zoom change step.And mousewheel control support.
Image Slider Support. Support mousewheel control,and pre/next buttons

Direct Link Demo

SOCIAL LIKES : JQUERY LIKE BUTTONS OF POPULAR SOCIAL NETWORK

Beautiful "like" buttons with counters for popular social networks: Facebook, Twitter, LiveJournal, etc. Uses jQuery.
Features:

Easy to install.
Beautiful and all in one style.
Won't explode your page's layout.

Direct Link Demo

JQUERY UI BOOTSTRAP : BOOTSTRAP-THEMED KICKSTART FOR JQUERY UI WIDGETS

A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.
Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.

Direct Link Demo

MASKEW : A JAVASCRIPT LIBRARY FOR SKEWING THE SHAPES OF ELEMENTS

Maskew is a JS library for skewing the shapes of elements without distorting their contents. It is mobile friendly. There is no dependencies but a modern browser. It is less than 5k in size.

Direct Link Demo

Friday 22 November 2013

JQUERY MENU W/ DROP DOWN TUTORIAL WITH DEMO

In today's tutorial is about a menu which has all the decent and stylish animated functionality, what you may be looking for. I'll not go into details of HTML and CSS, I'm assuming you know about that or you can copy the HTML and CSS from below.

Direct Link Demo

WEBCAMSWIPER : JQUERY FLIP BOOK

An experiment/hack using getUserMedia to watch for swipes left and right with a hand. This could be applied to many different uses. Flipping through pictures in an image carousel, moving to the next item in a list, flipping pages of a book or magazine, etc.

Direct Link Demo

BACON IPSUM JQUERY PLUGIN

I whipped up a little Bacon Ipsum jQuery plugin that uses our API to generate some meaty goodness. When you're mocking up a design, now you can use this plugin in your HTML rather than static text.

Direct Link Demo

Thursday 21 November 2013

STYLESELECT : JQUERY CUSTOM LOOKING SELECTBOX

This jQuery plugin replaces the standart select element with a custom looking selectbox. Plugin has keyboard support.

Direct Link Demo

JQUERY PANZOOM : PLUGIN FOR PANNING AND ZOOMING ELEMENTS USING CSS3

Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.
Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.

Direct Link Demo

JQBARGRAPH : JQUERY BAR GRAPH PLUGIN

jQuery plugin for creating bar graphs from your data. jqBarGraph is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, ..., valueN], label].

Direct Link Demo

JQUERY HOTSPOT MAP & POWERFUL ANNOTATIONS AND TOOLTIPS

Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It's an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!
One of the most powerful features of this plugin is the editor that it comes with. You don't need to manually specify coordinates and dimensions of each spot on the image. It's all visual - click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click Generate and you will see a preview of the final result!

Direct Link Demo

Wednesday 20 November 2013

SHAKE.JS : & SHAKE & EVENT JAVASCRIPT PLUGIN FOR MOBILE WEB BROWSERS

A custom ‘shake’ event JavaScript plugin for mobile web browsers using device accelerometer.Your web browser must support the devicemotion event for this plugin to work. Shake.js uses built-in feature detection to determine if it can run in your web browser. It will terminate silently on non-supporting browsers.
Supported Browsers:

iOS Safari 4.2.1 (and above)
Android 4.0.3 (default browser)
Opera Mobile (Android)
BlackBerry PlayBook 2.0
Firefox for Android
FirefoxOS Devices

Direct Link Demo

CREATE A SLIDING NAVIGATION MENU WITH JQUERY

Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.
To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.

Direct Link Demo

CONTENTFLOW : JAVASCRIPT FLEXIBLE COVERFLOW SLIDER

ContentFlow is a flexible Coverflow^TM / ImageFlowlike flow written in javascript, which can handle any kind of content.
With ContentFlow it is now possible to have any number of flows within one web-page. Each separately configurable, satisfying different visual needs.

It’s easy to implement and to extend.
It can auto generate reflections (clientside)!
You can add and remove content items on the fly
You are free to define your own methods for displaying content and interacting with it.
You can control all aspects of the flow without loosing the ease of use.

ContentFlow can handle different kinds of control, like keyboard and mouse, and can be used with and without a reflection. For a complete list of features and compatibilities take a look at the feature list.

Direct Link Demo

JQUERY PRICE FORMAT PLUGIN

jQuery Price Format is a plugin to format input text fields as prices. For example, if you type 123456, the plugin updates it to US$ 1,234.56. It is costumizable, so you can use other prefixes and separators (for example, use it to get R$ 1.234,55).

Direct Link Demo

Tuesday 19 November 2013

JQUERY.SUGGEST : SIMPLE INLINE AUTOSUGGEST JQUERY PLUGIN

jQuery.suggest, a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.
If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.

Direct Link Demo

SIMPLECART(JS) & JAVASCRIPT SHOPPING CART

No databases, no programming, no headaches. A simple javascript shopping cart in under 20kb that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.
SimpleCart(js) will automatically populate the div with all the items in the cart. You can change the appearance of your cart or what columns are in the cart by checking out Cart Header Formatting.

Direct Link Demo

MINIMALISTIC SLIDESHOW GALLERY WITH JQUERY

In today's tutorial we will create a simple and beautiful slideshow gallery with jQuery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

Direct Link Demo

RESPONSIVE IMG : JQUERY RESPONSIVE IMAGE PLUGIN

This jQuery Plugin make your existing images responsive without creating new images.Responsive Img is a solution to all which combines a jQuery plugin with a PHP image pre-processor.The plugin enables the page to change the src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.
Images are only created when requested for the first time and this process won't be repeated for future requests to perform better.

Direct Link Demo

Monday 18 November 2013

JSIGNATURE : JQUERY PLUGIN FOR DRAW SIGNATURE IN BROWSER

jSignature is a jQuery plugin which simplifies creation of a signature capture field in the browser window, allowing a user to draw a signature using mouse, pen, or finger.
jSignature captures signature as vector outlines of the strokes. Although jSignature can export great bitmap (PNG) too, extraction of highly scalable stroke movement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering.
A extra effort (through smoothing and pressure simulation) is made to make the strokes look pretty on the screen while these are drawn by the signor.All major desktop, tablet and phone browsers are supported. HTML5 Canvas element is used by default. We fall back on Flash-based Canvas element emulator (FlashCanvas) when actual Canvas is not supported by the browser (Iinternet Explorer v.8 and lower).

Direct Link Demo

EASIE.JS : CSS3 LIKE EASINGS FOR JQUERY ANIMATIONS

Css3-like easings for jQuery animations

Tweak the shape of easings
Compatible with Css3 easings
Small (less than 2kB minified)
Fast (uses lookup tables)

Direct Link Demo

ZUPER RESPONSIVE MULTITOUCH SLIDER IN JQUERY

Zuper Slider uses unobtrusive javascript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider. When we create the Zuper Slider is lightweight, fast loading, mobile ready, responsive, easy to use,has multiple skins and much more. Zuper Slider is the most complex and powerful slider that you can use. Saves development time - Powerful features - Simple implementation - Fully customizable.
Mobile Ready Zuperslider is mobile ready. Touch gestures navigation for iOS, Android and other touch devices. Its main feature is that has the touch technology implemented for mobile devices.

Direct Link Demo

Subscribe to: Posts (Atom)