Showcase Of Fresh And Free jQuery Plugins And Tutorials

App Showcase with Grid Overlay

( Demo | Download )

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.

Thumbnail Grid with Expanding Preview

( Demo | Download )

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Mini Help System with jQuery

( Demo | Download )

In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.

jQuery Animated Bar Plugin: jqBar

( Demo | Download )

This is a simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.

Charts For Your App with jQuery and xCharts

( Demo | Download )

Make Pretty Charts For Your App with jQuery and xCharts.

iOS-Style Content Slider using jQuery

( Demo | Download )

In this tutorial I want to focus on one useful plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items.

Create a Sticky Navigation Header Using jQuery Waypoints

( Demo | Download )

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

Interactive Infographic with SVG and CSS Animation

( Demo | Download )

Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.

PUtting CSS Clip to Work: Expanding Overlay Effect

( Demo | Download )

A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.

Slider Pagination Concept

( Demo | Download )

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

Make a Google Powered Shopping Search Website

( Demo | Download )

In this tutorial, we will be making a simple product search engine. Using jQuery and PHP, we will tap into Google’s Shopping Search API and return a list of items available for purchase, along with prices, photos and other useful information.

How to Create a Simple Multi Item Slider

( Demo | Download )

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

Responsive & Tough Friendly Audio Player

( Demo | Download )

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.

Calendario: A Flexible Calendar Plugin

( Demo | Download )

A jQuery calendar plugin for creating flexible calendars.

Simple Effects for Drop Down Lists

( Demo | Download )

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

How to Make a Tumblr-powered News Ticker

( Demo | Download )

In this tutorial, we are going to use it as the foundation of a news publishing system. We are going to develop a simple widget which cycles through the most recent posts on a Tumblr blog, and presents them as news items to your users. Adding news will be done by creating new blog posts in your Tumblr dashboard.

Create Attractive Coming Soon Template with CSS 3D and Javascript

( Demo | Download )

We are going to make an attractive coming soon html template with CSS3, CSS 3D transform and jQuery. Let’s go a little wild with CSS3 even though some old browsers won’t support it. However, for CSS 3D transform part, we will make it degrades gracefully. Instead of the awesome 3D flipping effect, we will be substituted with just a simple hide and show effect.

jQuery Responsive Horizontal Accordion Image Slider: Raccordion

( Demo | Download )

This is a multi purpose responsive accordion image slider plugin raccordion. Its a horizontal image slider that adjusts according to the size of the browser width. raccordion slider adds variety and style.

3D Flipping Circle with CSS3 and jQuery

( Demo | Download )

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

How to Make a Mac OSX-like Animated Folder with CSS3

( Demo | Download )

In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows. In addition, we are going to use jQuery UI and its drag and drop interactions to build a pretty interactive demo.

Create a Beautiful Password Strength Meter

( Demo | Download )

In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin.

TiltShift.js

( Demo | Download )

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

Vertical Showcase Slider with jQuery and CSS Transition

( Demo | Download )

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.

Custom Drop Down List Styling

( Demo | Download )

A tutorial on how to create some custom drop-down lists. We’ll show you five examples with different looking drop-down menus and lists for various purposes.

Creative Web Typography Styles

( Demo | Download )

Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.

Live Album Previews with CSS3 and jQuery

( Demo | Download )

Here we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.

Slicebox Revised

( Demo | Download )

Slicebox, the jQuery 3D image slider plugin, has been updated. We’ve done some major improvements and added new features.

Fullscreen Video Slideshow with Bigvideo.jg

( Demo | Download )

A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.

Fullscreen Pageflip Layout

( Demo | Download )

A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

Responsive CSS Timelinge with 3D Effect

( Demo | Download )

A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

Creative CSS Loading Animations

( Demo | Download )

In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.

Basic Ready to Use CSS Styles

( Demo | Download )

This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements.

Hexaflip: A Flexible 3D Cube Plugin

( Demo | Download )

HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.

Animated CSS3 Photo Stack

( Demo | Download )

In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.

Make a Web App with Instagram-like Filters

( Demo | Download )

In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it.

Dropbox File Uploader With Twitter Bootstrap

( Demo | Download )

Here we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.

How to grab Dribbble feed with jQuery and CSS3

( Demo | Download )

As a web developer, third party API integration is something you will have to face. Especially with the current trend, we have facebook, twitter, flickr etc. Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.

Photo Booth Strips with Lightbox

( Demo | Download )

A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.

How to Build a ToDo Application with Web SQL and jQuery

( Demo | Download )

This tutorial will take you through the step by step development of building a ToDo App entirely powered by Web SQL. You will learn about getting started with Web SQL, understanding transactions, following best practices and how to write re-usable functions.

Best jQuery Plugins of the Week [3rd August-9th August]

http://thedesignblitz.com/best-jquery-plugins-week/

Let me begin this article with an obvious question. Did you all check the jQuery plugins Best jQuery Plugins of the Week [27th July - 2nd August] we came up with last week. It’s Saturday and we are here yet again with the list of best jQuery plugins which we promised to come up with each passing week.

Promising to help you in proper web designing, the jQuery plugins let you expand your horizon as sometimes your knowledge of programming can limit the design perspective not enabling you to give wings to your creative talent.

With the ever increasing competition in the designing world clients these days are seeking nothing but the best. Here jQuery plugins come into play for these form the strong base for designing and development. As of now let me not take too much of your time and start with this weeks’ list of best jQuery plugins.

Best jQuery Plugins of the Week

1. jQuery URL Shortener

As the name clearly indicated this jQuery plugin helps in shortening URLs using Google URL shortener API.

Download | Demo

2. Bootstrap Tokenfield

Bootstrap Tokenfield is an advanced tagging/tokenizing plugin for input fields with a focus on keyboard and copy-paste support.

Download | Demo

3. Retinize

Retinize is a jQuery plugin that upscales images to look correctly on retina screens and is particularly useful for pixel art when you don’t want to store an upscaled version.

Download | Demo

4. jQuery Scrollbox

Its a simple and lightweight jQuery plugin that lets users scroll a list like carousel or traditional marquee.

Download | Demo

5. jQuery Scanner Detection

Its a small plugin that helps keeps the track of when the scanner viz barcode, QR Code are being used.

Download | Demo

6. jQuery finderSelect

This jQuery Plugin activates file explorer type selecting to all elements supports Ctrl+Click, Command+Click, Ctrl+Drag, Command+Drag and Shift+Click.

Download | Demo

7. Yet Another DataTables Column Filter (Yadcf)

Yadcf is a jQuery plug-in enables the user to easily add filter components to table columns and works on top of the DataTables jQuery plug-in.

Download | Demo

8. jQuery noInput

Its a jQuery plugin for displaying inline labels similar to HTML 5′s placeholders that enables you to style the placeholder text.

Download | Demo

9. HeapBox

As a webdesigner or a webdeveloper you know how hard it is to deal with native HTML forms look or functionality. Heapbox is a jQuery powered by jQuery that helps write JavaScript.

Download | Demo

10. QUAIL

Quail is a plugin that focuses on checking content against accessibility guidelines.

Download | Demo

With this we come to an end of this weeks list keeping you all anticipating as to how many cool jQuery plugins we will come up with next week.

Mean: A scalable JavaScript boilerplate

15 Responsive jQuery Navigation Plugins

http://inspiretrends.com/responsive-jquery-navigation-plugins/

Constructing a responsive website is not at all any easy task however; the most difficult part is preparation and coding of responsive website’s navigation. Unfortunately, as of now we do not have a universal solution for this difficult part as now because it all depends on the way of the menu you are about to use. Also, a lot depends on your website i.e., if it’s a small or large website. For small websites, most people will prefer a menu with a drop down or a small toggle menu. However, for large websites such as e-commerce ones, you will have to go for a navigation which is known as drawer style.

So, one thing is for sure that solutions differ and today we will cover all styles and their solutions for your convenience and these solutions will be found in jQuery plugins. Below are 15 Responsive jQuery Navigation Plugins.

You May Like : 15 Tabs Navigation Tutorials with jQuery & CSS

jQuery Sidr

Sidr is a plugin that is user-friendly and will accomplish the task of creating a responsive side menu just like Facebook. It will help you in creating menus on both side of your page, so use it according to your convenience.

Navgoco: Multilevel Slide Menu

Are you tired of unordered list of links? Well, Navgoco is indeed a perfect solution for you as it will turn those lists into vertical and beautiful multi-level side navigation.

Responsive Menus Flexnav

FlexNav is basically used to create a robust drop-down menu. It is also the chief example for jQuery and of course media queries that are being used in mobiles. It supports touch as well as keyboard.

Smart Menus jQuery

I consider this plugin to be a great one as it has a lot of features. It will allow you to create both vertical and horizontal responsive list based menus. The good news is that it will work on almost any device.

jQuery Menu-Aim

this plugin is basically for drop-down menus. This will help your system in detecting it a user is hovering over an item in a dropdown list or is finding a way into contents of a submenu. Menu-aim plugin determines the directions of the users and act accordingly.

Side Toggle Menu

If you want to add sideways menu bar within your layout, Side Toggle menu is the best option for you. It works two ways; moving over the page or by overlapping the page.

jQuery slimMenu

It is basically a lightweight jQuery plugin and helps users’ in creating navigation menus on multiple levels.

jPanelMenu

This is my personal favorite as I love animated style menu and that too when they are paneled and this is exactly what jPanelMenu is all about. I am sure you are aware of such menus; they are seen all over Mobile Facebook and Twitter. As far as transitions are concerned, they are controlled by CSS and you get to witness flawless transitions.

Responsive Flaunt.js

If you are looking to build a nested navigation out of the box which should be responsive as well, Flaunt.js is the best option for you.

Naver Responsive Navigation

This is one of the best plugins if you are looking to turn a simple navigation into a mobile version that is user friendly. It works automatically so less effort.

TinyNav.js

It is extremely a lightweight plugin i.e., 368 bytes that will help you in converting <ul> and <ol> menus. These will convert the menus into dropdown that offers selection as well.

Responsive-menu

If your browser is at mobile width, this tiny plugin will convert the site’s navigations into a mobile one.

HorizontalNav

This is an interesting plugin because it spans a parallel navigation appropriate for the entire width of its container and also provides an option to the user i.e., if the user wants to go for a responsive version or not.

jQuery.mmenu

You can create amazingly slick and sleek sliding menus and that too with using a single stroke of JavaScript and it is following:

[js]$(“#nav”).mmenu();[/js]

It is as simple as that. This single line makes things smooth and convenient for you.

MeanMenu

This media query will help you in converting a simple menu into a mobile responsive one. It is basically a lightweight JS, which can convert a simple menu into a mobile one.

.

11 Javascript ToolKit For Creating Charts and Graphs

http://inspiretrends.com/11-javascript-toolkit-for-creating-charts-and-graphs/

This article is basically your guide to the most popular and an effective JavaScript toolkit for creating charts and graphs. We will give you an overview of what these toolkits can actually do for you. If you are a developer, I am sure you have find yourself repeating some old cold again and again. If this happens with you more than often, toolkits are absolutely perfect for you. This article is basically intended to help JavaScript developers so that they can make their work a lot simpler.

These toolkits will definitely simplify your work when it comes to development and that too in a lot of ways. These toolkits are also known as frameworks and some call them libraries however, name doesn’t really matter. The best part is that they are meant to ease the tasks of a developer and make things productive. Let us now take a look at the JavaScript Toolkit for creating charts and graphs.

FusionCharts Suite XT – JavaScript Charts for the Grown-ups

Demo || Download

FusionCharts Suite XT gives you delightful JavaScript charts that work across devices and platforms. It’s the most comprehensive solution out there with 90+ chart types, complete with interactive features like tool-tips, drill-down, zoom, scroll, and more. It comes with comprehensive docs, and readymade demos, allowing you to create your first chart in under 15 minutes.

Aristochart

DEMO || Download

Aristochart is definitely one of the best toolkits available for creating charts and graphics. The best thing is that is can be customized and is very flexible line charting library. Your focus can remain on aesthetic and Aristochart can take care of the backend data. It also offers a wide range of themes for your selection.

Morris.Js – Pretty Time-Series Line Graphs

DEMO || Download

Morris.js is one of the most effective JavaScript toolkits. It is basically a library that controls the graphs. Morris.js is a simple API and it is for drawling line, bar, area and of course donut charts. You will find how convenient this is after using it.

JKit : JQuery Based UI Toolkit

DEMO || Download

JKit, is definitely an easy to use toolkit. It is a cross platform and jQuery based toolkit. Although its small in size but will offer you all the needed features. It makes life simple and removes complications from the development process.

D3.Js – JQuery 3D Plugin

DEMO || Download

if you are looking to manipulate documents according to data, D3.js JavaScript’s library is the best option for you. It will help you in bringing your data to life with the help of HTML, SVG and CSS. The best thing is that it does not tie you to proprietary framework.

Rickshaw – JavaScript toolkit for creating interactive time series graphs

DEMO || Download

if you are looking to create interactive graphs, Rickshaw will provide you with all the needed elements. Since it is all based on d3 underneath, you will be able to draw graphs with SVG and styles with CSS. You can also customize your own techniques and the best thing is that it is free and open source.

sDashboard – Simple & light weight Dashboard framework in jQuery

DEMO || Download

sDashboard is basically a jQuery plugin and it converts assorted objects into a dashboard. Every object that has been converted will be rendered as a widget and a developer can drag it. This plug-in has built in support for interpreting datatable’s and flotr3 charts. It also offers a lot of other features that can simplify your life.

Highcharts – Interactive JavaScript charts for your webpage

DEMO || Download

This is basically a charting library and is written totally in pure JavaScript. This will offer you interactive charts for your website. Highcharts supports most of the chart types and it includes line, spline, column, bar and a lot more.

jqPlot – A Versatile and Expandable jQuery Plotting Plugin

DEMO || Download

jqPlot is basically a charting plugin and it creates some beautiful pie, line and bar charts. It has a lot of features and offers wide variety of chart styles, offers customizable formatting and a lot more. It has been tested on all famous browsers such IE 7 and onwards, Firefox, safari and Opera.

jQuery Spidergraph Plugin – Dynamic, interactive spidergraphs in HTML5

DEMO || Download

Looking to create spidergraphs in HTML5? Well, your search ends with jQuery Spidergraph. This is basically a plain and easy to use module and it helps developers in creating goodlooking and attractive spidergraphs. Other features includes, illustrating scaled quantitative data for several subjective attributes and overlaying multiple data.

Dygraphs JavaScript Visualization Library

DEMO || Download

Producing interactive, zoomable charts is not an easy task. However, dygraphs can definitely help you in doing this. It is basically an open source JavaScript library that proves to be benficial. It is basically designed to display slid data and users can obviously explore the data in order to interpret it.

MAKE PRETTY CHARTS FOR YOUR APP WITH JQUERY AND XCHARTS

DEMO || Download

I have always believed that charts are a great way to present data in a less complicated way. Creating a professional admin panle won’t be easy without charts. Also, setting them up is a tricky job, isn’t it? However, libraries such as xCharts are making lives a lot easier. You can use it for building some pretty AJAX-powered charts so what are you waiting for? Go ahead, explore it and live a simple, less complicated life.

16 Free jQuery Data And Time Plugins

Check this list of 16 free jQuery Data and Time Plugins and pick the ones you like the best. Here goes the list..

JQuery Age

Demo || Download

This one is a really cool jQuery plugin that has the ability of formatting and tracking dates and times as human readable text.

FLIPCLOCK.JS – JQUERY PLUGIN TIMER, CLOCK, COUNTDOWN WITH FLIP EFFECT

Demo || Download

This one is a really easy to use plugin that helps you create a nice looking clock / timer / countdown with flip effect. It is customizable and has a proper extendible API. It can be used as a clock, a timer, a countdown with an amazing flip effect. It is themeable using pure CSS and has a clean syntax. Overall it is a really cool plugin.

TimeTo – jQuery plugin timer countdown digital clock

Demo || Download

TimeTo is a simple, elegant yet very efficient plugin which allows creating a countdown digital clock easily and quickly. It’s countdown include days, hours, minutes and seconds.

Webshims – polyfills jQuery with many HTML5 features

Demo || Download

Webshims is a modular capability-based polyfill loading library that extends jQuery with HTML5 features offer some amazing features. It allows for HTML5 audio/video/track implementation, basic CSS support, geolocation, and localStorage/sessionStorage.

jQuery Plugin Date Picker & Date Range Selector

Demo || Download

This one is a really cool date picker and date range selector plugin and offers scrollable months instead of paged. It allows date dragging, range shifting by dragging, selecting month or week etc. It also boasts support for popups, various date formats, setting holidays or disabled days, defining minimum range and custom scrollbar etc.

PICKADATE.JS – JQUERY PLUGIN THAT CREATES A RESPONSIVE AND MOBILE FRIENDLY DATE SELECTION WIDGET

Demo || Download

It is a sophisticated yet easy-to-use responsive date selection widget. Its customization is possible with CSS. On the whole it is a handy and effective widget.

JQuery Countdown

Demo || Download

JQuery Countdown plugin allows setting a div or span for showing a countdown to a certain time. It is highly-customizable and provides various different options.

Colorful Clock With CSS & JQuery

Demo || Download

As the name suggests, this jQuery plugin allows creating a bright, colorful and lively jQuery & CSS clock. It is quite interesting and lets you track those precious last seconds of an event etc.

HTML CLOCKS USING JAVASCRIPT AND CSS ROTATION

Demo || Download

It is a really cool clock with some really cool effects and an awesome look. It does not have any Adobe Flash files, rather work on <div> and <img> tags and functions by rotating them though JavaScript using CSS transform property.

Jqtimeline – Customizable JQuery Timeline Plugin

Demo || Download

This interesting timeline is quite user-friendly and highly customizable. This simple plugin allows creating a timeline for some specific events. Adding or removing events on the go is very easy.

JQRangeSlider, JQDateRangeSlider & JQEditRangeSlider

Demo || Download

This JavaScript slider selector supports dates and is especially really suitable for touch devices as it enhances the user experience.

Moment.Js : JavaScript Date Library

Demo || Download

Moment.Js is a beautiful and really amazing yet a lightweight JavaScript date library that lets you parse, validate, manipulate, and format dates easily and quickly.

JQuery Mobile Date Navigation Plugin

Demo || Download

As the name suggests, this plugin is perfect for mobile devices. It offers navigation between date range, either by a set range such as week, month and year.

JQUERY.PAYMENT

Demo || Download

jQuery Payments is a nice library which can help you create credit card forms, validate inputs and format numbers. It makes the checkout process a lot easier and better.

CODROPS

Demo || Download

Modern browsers support Scalable Vector Graphics (SVG) file format very well. The most amazing feature of this file type is that it is totally scalable to any size and has the ability to look good on any resolution or screen density without deterioration in quality. CODROPS lets you handle those files easily and quickly and allows for animation and interaction using CSS and JavaScript.

Minical – Lightweight Datepicker Plugin

Demo || Download

Minical, as the name hints, is a very minimalistic and lightweight datepicker Plugin that allows for easy customization. It boasts full keyboard support and its value is changeable from the date format defined in the plugin.