Best jQuery Web Plugins & Tutorials with Demo

    Building a jQuery/PHP Powered Chat Room

    Building a jQuery/PHP Powered Chat Room

    In this tutorial we are going to build a little chat program that is really easy to get up and running on any server running PHP. No database is required – as the chat will store itself in a simple text file.

    PHP – Will handle all the server side stuff
    jQuery/JavaScript – Will handle the client side stuff. This is an AJAX-y application, meaning that messages pop onto the screen (both yours and others) without needing any page refresh.
    Text File – Stores the chat

    domsearch.js : jQuery plugin for searching the DOM

    domsearch.js : jQuery plugin for searching the DOM

    A jQuery plugin for searching the DOM.It lets you search within an element (e.g.: a table or a list), narrowing down the inner elements using LiquidMetal, which is way better than whatever else you could come up with.

    Create.js : Make anything editable with jQuery

    Create.js : Make anything editable with jQuery

    Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

    Features:

    • Making RDFa-annotated content on pages editable
    • Managing collections of content (add, remove)
    • Local, in-browser storage and retrieval of unsaved content
    • Adaptable connector for communicating with the back-end system
    • Running workflows (approval, etc.) for content items
    • Browsing and reverting content history
    • Easy rebranding of the interface with some CSS

    jQuery Tagit Plugin

    jQuery Tagit Plugin

    The jQuery Tagit Plugin transforms an html unordered list into a unique tagging plugin.

    Features:

    • Convenient way for users to enter a list of items
    • Fully integrated with jQuery ui auto complete
    • Automatically adds current input as tag if input loses focus
    • Easy to use public methods
    • Easy to theme (single css file)
    • Customizable trigger keys
    • Backspace on empty input deletes previous tag
    • Ability to provide initial tags on creation though options
    • Ability to provide initial tags on creation via list items
    • Option to toggle usage of a hidden select so the tags can be sent using a normal form!
    • Ability to re-arrange tags by drag and drop!
    • Optional ThemeRoller compatibility!
    • Fully HTML5 Data-attributes compliant!

    jQuery Notification Bar

    jQuery Notification Bar

    In this tutorial we will create a neat and simple notification bar which allows you to integrate the notifications on your website. It can be used to create alert, success, error, warning, confirmation messages as an alternative to the standard alert dialog or to notify the visitors about the latest updates etc.

    Once the page is loaded, our notification bar will slide down automatically. When we click the close button in the bar, it should slide up and a button should appear to show the bar again.

    uSquare – Universal responsive grid html5/jquery

    uSquare - Universal responsive grid html5/jquery

    uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

    While we developed uSquare responsive grid plugin we carefully thought about its responsive layout. We wanted to make sure that all elements are visible and accessible with all resolutions for responsive layout.

    Java MySQL Insert Record using jQuery

    Java MySQL Insert Record using jQuery

    If you know Java concepts, you can easily understand any kind of language very quickly. If you want to became a good programmer, I strongly suggest start with J2EE programming. I heard that many people feels that it’s though After long time I decided to write about J2EE programming with Jquery in a simple and better understanding way, hope you like it.

    jQuery Fubar – How To Create A Website Toolbar in jQuery

    jQuery Fubar – How To Create A Website Toolbar in jQuery

    Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features.

    In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

    Tooltipster : jQuery Tooltip Plugin

    Tooltipster : jQuery Tooltip Plugin

    Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

    • Supports HTML tags inside the tooltip
    • Lightweight and degradable
    • Extremely flexible & fast to set up
    • Easily styled with 100% CSS – no images needed
    • Plays nicely with IE

    blackCalculator : jQuery plugin for Create a Calculator

    blackCalculator : jQuery plugin for Create a Calculator

    blackCalculator is a jQuery plugin for create a calculator. It supports CSS customization, easy translation, two options of calculators, cross-browser, allow and disallow keyboard!