Best jQuery Ajax Plugins & Tutorials with Demo

    Tweet to Unlock with jQuery & PHP

    Tweet to Unlock with jQuery & PHP

    In this tutorial article, let’s create simple “Tweet to Unlock” feature for your web page using jQuery Ajax and PHP.

    Events are triggered when user successfully tweets the page, to capture some information from Twitter, we can add a “listeners” to the actions users perform in Web Intents. Once we know the user has Twitted the page, we can make an Ajax request to a PHP file, which will respond to this request  by sending the unlocked data to user browser. Here’s complete code example of a page which has some content to be unlocked by Twitting.

    Smooth Diagonal Fade Gallery with CSS3 Transitions & jQuery

    Smooth Diagonal Fade Gallery with CSS3 Transitions & jQuery

    In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.

    CSS3 capable browsers will show a smoothly animated diagonal fade effect, while older browsers will fall back to a simpler but still perfectly usable non-animated version of the gallery.

    Waterfall : jQuery Pinterest Like Layout Plugin

    Waterfall : jQuery Pinterest Like Layout Plugin

    Waterfall is a powerful and customizable jQuery plugin for creating dynamic and responsive Pinterest like layout which supports infinite ajax scroll.

    Facebook Like System with Jquery, MySQL and PHP

    Facebook Like System with Jquery, MySQL and PHP

    Facebook like system is one of the best implementation in social network systems, may be in future based on like data Facebook going to launch semantic search engine. In this post I have explained how to implement like/unlike system database design and web implementation with PHP and jquery.

    CRUD with PHP and jQuery for a Better User Experience

    CRUD with PHP and jQuery for a Better User Experience

    We already have a PHP CRUD tutorial in this blog and now we are going to add some AJAX functions to it with the help of jQuery. This will enable smoother user experience and faster loading of page data because your whole page won’t have to refresh every time.

    This tutorial will only focus on creating, reading, updating and deleting records from a MySQL database with the help of PDO and jQuery.

    Mini AJAX File Upload Form with jQuery

    Mini AJAX File Upload Form with jQuery

    In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.

    jQuery Async : Plugin to Animate buttons when an asynchronous process

    jQuery Async : Plugin to Animate buttons when an asynchronous process

    jQuery Async is a library made to easily animate clickable buttons triggering asynchronous processes such as Ajax requests This library is made on top of jQuery and Bootstrap.

    Voting System Youtube Style With jQuery & PHP

    Voting System Youtube Style With jQuery & PHP

    Voting system can be important part of any website, especially if you want to keep track of user ratings. Let’s create a cookie based voting system, similar to YouTube like & dislike buttons (Thumbs up & Thumbs down), which can be applied to any content in php and jQuery.

    Filter.js : jQuery client-side JSON objects filter

    Filter.js : jQuery client-side JSON objects filter

    Filter.js is client-side JSON objects filter to show/hide html elements. Multiple filter criteria can be specified and used in conjunction with each other.

    StreamTable.js : The next generation search filter in jQuery

    StreamTable.js : The next generation search filter in jQuery

    StreamTable.js streams data for tables in the background, updates and renders them using templating frameworks like Mustache.js, HandleBars.js.

    Sometimes we want to show thousands of records in a table. This can take too long for the page to render and make the page unusable till the entire table is populated. To counter this we could populate the table using an Ajax call. In both cases, the users have to wait until all the table rows are populated. Additionally, user cannot do any operations on the table like search, pagination etc.

    The idea behind StreamTable.js is to initially populate minimum rows (maybe 10 or 20) and after that in stream data silently in the background and update the table. This ensures that the page loads immediately and is also usable immediately for all operations.