Best jQuery Web Plugins & Tutorials with Demo

JavaScript Mindmap

JavaScript Mindmap

Requires jQuery for basic shortcuts ($) and stuff.Requires Raphael for drawing.jQuery UI may be used to allow draggable nodes.The basic principles of a force directed layout controlling nodes are as free as the birds in the trees.It’s relatively easy to build a mindmap. Take a collection of HTML nodes, and position them absolutely. Use a Force Directed Layout to link them together and yet keep them apart.
Once you’ve got that, you need to add some filters, to define which nodes are properly connected. All nodes should repel, to prevent overlap, but connected nodes should have a string between them. This is where you use a springy force (hooke’s law) to pull them together.

Drawing lines in HTML is not an easy feat. IE has/had VML, all browsers (except Android) support SVG (albeit slowly), and all except IE support Canvas. I tried using a diagonal line in a JPG, stretching it to fit. It looks daft. I then switched to Canvas, and now I’m on SVG (using Raphael to support IE VML too). So it works everywhere except Android.

Annotator : jQuery Copy-Editor of the web

Annotator : jQuery Copy-Editor of the web

Inline annotation for the web in pure Javascript.The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable.Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page.

Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.

jQuery Sticky Header

jQuery sticky header

In this tutorial we will create sticky header that is initially on its original place above the content, but as soon we start scrolling down the long page, it sticks at the top of the page.When scrolling up the page, the sticky header stops sticking and returns to its original position. We will use jQuery to create the sticky header.

jSignature : jQuery plugin for draw signature in browser

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).

Tipue Search : A jQuery site search engine

Tipue Search : A jQuery site search engine

Tipue Search is a jQuery site search engine. It includes advanced features such as word stemming but is designed to be easy to install.Tipue Search is very fast, as the processing is all at the client end.

Bacon Ipsum jQuery Plugin

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.

Redactor : Fantastic WYSIWYG-editor on jQuery

Redactor : Fantastic WYSIWYG-editor on jQuery

You must have noticed – a stylish editor. He looks equally well in any interface on any website. Are we wanting more, if the editor is already falling in love with his chosen interface?Inside you will find a clear, logical code. A good API. Customization available. All the tools to customize the editor for their needs. Be careful, your imagination can go a long way.

Drag a file from your computer out the window and insert a file, it immediately appears as a link directly to the text.Just drag the window and your image will already be in the editor.Clicking on any image editor, you can easily configure whether text wrap around the picture on the right or left.

elFinder : jQuery File manager for web

elFinder : jQuery File manager for web

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

Features:

  • All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
  • High performance server beckend and light client UI
  • Local file system, MySQL, FTP volume storage drivers
  • Background file upload with Drag & Drop HTML5 support
  • Standard methods of file/group selection using mouse or keyboard
  • Move/Copy files with Drag & Drop
  • Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
  • Quicklook, preview for common file types
  • “Places” for your favorites
  • Calculate directory sizes
  • Thumbnails for image files
  • Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
  • Flexible configuration of access rights, upload file types, user interface and other
  • Simple client-server API based on JSON

jQuery Experimental page layout inspider by Flipboard

jQuery Experimental page layout inspider by Flipboard

Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.