background preloader

50 Amazing jQuery Plugins That You Should Start Using Right Now

50 Amazing jQuery Plugins That You Should Start Using Right Now
jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Dialogs The browser's built-in dialogs are easy to use but are ugly and non-customizable. 1. Alertify (github) is small library for presenting beautiful dialog windows and notifications. alertify.alert("Message"); alertify.confirm("Message", function (e) { if (e) { } else { } }); 2. jQuery Avgrund jQuery Avgrund (github) is another cool dialog solution. Forms Forms are tedious and boring. 3. iCheck iCheck (github) is a jQuery plugin that enhances your form controls. 4. Long Press is a jQuery plugin that eases the writing of accented or rare characters. 6.

jquery Tutorials with CSS BlueprintUI: jQuery Responsive Modal with CSS3 BlueprintUI Responsive Modal is a super simple fully featured jQuery modal plugin with more than 30 CSS3 powered animation possibilities and 7 home made themes to use it. Features: Responsive Design – The layout adpats to the viewing environment. Display Product Information on a Hover over Thumbnails using jQuery Product List - This could be your portfolio list, product list, image list, etc. Blueprint : Tooltip Menu with CSS3 & JavaScript This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. Menufication : jQuery Responsive Fly-Out Menu with CSS3 Navigation is one of the most important aspects of a website. Menufication is a user-friendly, customizable jQuery-plugin to transform your sites navigation to a responsive fly-out menu in Facebook fashion. Features: Utilizes CSS3-tranforms for optimal and native-like performance. Natural Language Form with Custom Input Elements in CSS3 & JS jQuery HoverMenu

iPicture - Tooltip your images 200+ Best Ajax with jQuery Tutorials with Example and Demo 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 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 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 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. jQuery Async : Plugin to Animate buttons when an asynchronous process Voting System Youtube Style With jQuery & PHP Features:

45 New jQuery Plugins for Web Developers inShare2 We always work hard to get the best and freshest information for our readers and now it’s a good time to share with you some new and cool jQuery plugins. For those, who use these plugins in everyday work or some projects this showcase might be very handy! RefineSlide RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). Complexify Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons. Tablecloth.js This is a jQuery plugin that helps you easily style HTML tables along with some simple customizations. jQuery Picture jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. ddSlick A free light weight jQuery plugin that allows you to create a custom drop down with images and description. JQVMap Quake Slider jQuery RWD Image Maps Real Shadow noty

Select2 Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection. val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []. Example: alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA"); Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. Gets or sets the selection. data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []. Reverts changes to DOM done by Select2. Opens the dropdown. Closes the dropdown. Notifies Select2 that a drag and drop sorting operation has started. change val added object

jQuery jQuery UI jQuery Mobile | jQuery Mobile scrollorama Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. Target an element and animate its properties. The animation parameters you can use are: Hook into the onBlockChange event. scrollorama.onBlockChange(function() { alert('You just scrolled to block#'+scrollorama.blockIndex); }); Note: If you are not using the pinning feature, it is recommended you disable it. scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"

Related: