Best jQuery Core Java Script Plugins & Tutorials with Demo

    SwipeView : Infinite Carousels For Mobile Web with JavaScript

    SwipeView : Infinite Carousels For Mobile Web with JavaScript

    SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It’s memory conservative as it uses only three elements at any given time, it’s smooth as velvet since it takes advantage of hardware acceleration, it’s bandwidth friendly with its 1.5kb minified/gzipped footprint.

    Treesaver.js : Creating magazine-style layouts with JavaScript

    Treesaver.js : Creating magazine-style layouts with JavaScript

    Treesaver is a JavaScript framework for creating magazine-style layouts that dynamically adapt to a wide variety of browsers and devices. Designers use standards-compliant HTML and CSS for both content and design, no JavaScript programming is required.

    Key features and aspects:

    • Fast and compact: The JavaScript is under 25K gzipped (important for mobile).
    • Highly compatible: Works with most modern browsers, and degrades gracefully for older browsers (or those with JavaScript disabled).

    Meny : A CSS 3D fold-in menu concept

    Meny : A CSS 3D fold-in menu concept

    Meny is a three dimensional and space efficient menu concept. CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu.

    Chirp.js : Simply Tweets on your website with Javascript

    Chirp.js : Simply Tweets on your website with Javascript

    Chirp.js is a simple way to Tweets on your website with javascript.Chirp js ia very lightweight, Templating and Client-side caching features.

    How to create an animated old letter in JavaScript

    How to create an animated old letter in JavaScript

    Today we will create an animated old letter. In this letter, we will use an animated pen. When the pen dries out – we’ll dip it in the ink. And even more, we add the feature to emulate the errors that will be erased during typing. Now let’s look at the implementation.

    Flickr Badge v2 : Displaying your flickr photos

    Flickr Badge v2 : Displaying your flickr photos

    Displaying your flickr photos without leaving or slowing down your web site.Here you can download a script to add a flickr badge like the following to any HTML document or blog with some HTML and a JavaScript include.

    To add a badge all you need to do is add the link inside a DIV with the class flickrbadge and the script does the rest for you. You can use as many badges as you want in the same document. You can also only show pictures of your photo stream tagged with a certain tag.

    How to Make an Interactive Network Visualization with JavaScript

    How to Make an Interactive Network Visualization with JavaScript

    In this tutorial, we will focus on creating an interactive network visualization that will allow us to get details about the nodes in the network, rearrange the network into different layouts, and sort, filter, and search through our data.Learn how to make one using D3 and JavaScript. This visualization is a JavaScript based web application written using the powerful D3 visualization library. jQuery is also used for some DOM element manipulation. Both frameworks are included in the js/libs directory of the source code.

    In this example, each node is a song. The nodes are sized based on popularity, and colored by artist. Links indicate two songs are similar to one another.

    Try out the visualization on different songs to see how the different layouts and filters look with the different graphs.

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.

    • The script can be used as an HTML5 input range polyfill solution
    • Introduces a gradient filled “range bar” for quick visual feedback
    • iOS Touch screen friendly
    • Arrives with a new CSS3 skin that degrades gracefully in older browsers
    • A small network footprint – only two HTTP requests and a total size (minified and gzipped) of about 11k
    • Unobtrusive & namespace friendly
    • Conforms to the WAI-ARIA defined role of “slider”
    • Keyboard accessible
    • Mousewheel compatible
    • Responsive design friendly

    GridNic : lightning fast JavaScript grid/spreadsheet

    GridNic : lightning fast JavaScript grid/spreadsheet

    SlickGrid is a JavaScript grid/spreadsheet component.It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

    Some highlights:

    • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
    • Extremely fast rendering speed
    • Supports jQuery UI Themes
    • Background post-rendering for richer cells
    • Configurable & customizable
    • Full keyboard navigation
    • Column resize/reorder/show/hide
    • Column autosizing & force-fit
    • Pluggable cell formatters & editors
    • Support for editing and creating new rows.
    • Grouping, filtering, custom aggregators, and more!
    • Advanced detached & multi-field editors with undo/redo support.
    • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

    NVD3 : Re-usable charts for d3.js

    NVD3 : Re-usable charts for d3.js

    This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.