Best jQuery Core Java Script Plugins & Tutorials with Demo

    firstImpression.js: A micro-library for detecting new visitors

    firstImpression.js: A micro-library for detecting new visitors

    firstImpression.js is a micro/nano-library (1 kb minified) that answers the simple question, “Has this user visited this site before?” The detection doesn’t require much logic, so the majority of the code is just a Plain JavaScript port of the popular jquery.cookie plugin.

    Fixie.js : Automatically adds filler content to HTML documents

    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.

    RGraph: HTML5 Javascript charts library

    RGraph: HTML5 Javascript charts library

    RGraph is a HTML5 Javascript charts library that supports over 20 different types of charts. Using the new HTML5 canvas tag, RGraph creates these Javascript charts in the web browser, meaning quicker pages and less web server load. Using RGraph is an easy way of speeding up your website.

    Drag and Drop table content with JavaScript

    Drag and Drop table content with JavaScript

    Content of HTML table cells can be dragged to another table cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn’t fire events to the elements beneath the dragged object.

    MathJax : JavaScript Display engine for Mathematics with Demo

    MathJax : JavaScript Display engine for Mathematics with Demo

    MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.MathJax renders mathematics dynamically so that formulas and symbols are nicely integrated into the surrounding text – with matching font size, margins, and baseline. So, in other words: it should look right.

    MathJax supports two typesetting styles: inline and paragraph (or “display”) equations. For inline equations, MathJax tries hard to maintain the inter-line spacing. This means things like fractions and roots are vertically compressed, and smaller fonts are used. Paragraph equations are shown as a separate paragraph and can be displayed with more space and slightly larger fonts.

    TinyBox2 : JavaScript Modal Windows with Demo

    TinyBox2 : JavaScript Modal Windows with Demo

    TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

    Dragdealer JS : JavaScript 2D drag and Tap Plugin with Demo

    Dragdealer JS : JavaScript 2D drag and Tap Plugin with Demo

    Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency.

    CamanJS : Image Manipulation in Javascript with example

    CamanJS : Image Manipulation in Javascript with example

    CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

    CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

    sigma.js : A lightweight JavaScript graph drawing library with Demo

    sigma.js : A lightweight JavaScript graph drawing library with Demo

    sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. sigma.js is mostly inspired by Gephi and the maps of Antonin Rohmer from Linkfluence (one nice example here) – thanks to him also for his wise advices.It has been especially designed to:

    • Display interactively static graphs exported from a graph visualization software – like Gephi
    • Display dynamically graphs that are generated on the fly

    Leaflet : JavaScript library for mobile-friendly interactive maps

    Leaflet : JavaScript library for mobile-friendly interactive maps with Demo

    Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade to form the core of its next generation JavaScript API. Weighing just about 21kb of gzipped JS code, it still has all the features you will ever need for your web mapping needs, while providing a fast, smooth, pleasant user experience.

    It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, utilizing cutting-edge technologies included in HTML5 and CSS3. The focus is on usability, performance, small size, A-grade browser support, flexibility and an easy-to-use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.