100+ Best jQuery Plugin & Tutorial of June 2017

sideToggle : jQuery plugin for Toggling Elements Sideways

sideToggle : jQuery plugin for Toggling Elements Sideways

This is a small jQuery plugin that toggles elements sideways, rather than the up-and-down default of jQuery’s toggle. There are three versions available for use; one of them uses an extra Javascript library called Velocity.js that offers a performance gain over jQuery’s .animate(), but it likely won’t be necessary for small use.

Local Weather App using JSON, jQuery & OpenWeatherMap APIs

Local Weather App using JSON, jQuery & OpenWeatherMap APIs

Built a simple local weather app using JSON, jQuery, and APIs (ipinfo.io and OpenWeatherMap).

A-table.js : Simple Table UI for generating Table Html

A-table.js : Simple Table UI for generating Table Html

A-table.js is a simple Table UI for generating table Html.

jQuery Page Tour Plugin

jQuery Page Tour Plugin

JQuery-powered tour library that displays information about the page the user is on.

Features:

  • Spotlights DOM objects
  • Displays a title and description of each DOM object.
  • Places animated targets around the DOM object to add emphasis on where to look.
  • Programmatically can move to next/previous items in the tour.
  • Items can be ordered.
  • Recalculates positions after window resizes.

AOS : Animate on Scroll JavaScript Library

AOS : Animate on Scroll JavaScript Library

Aos is a small library to animate elements on your page as you scroll.

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.

jQuery Images Compare Plugin

jQuery Images Compare Plugin

A jquery plugin for comparing two images.

Features:

  • Effort to put appearance via css (easier to skin / override)
  • Touch friendly, mouse drag, with a big thanks to Hammerjs.
  • Responsive
  • You can listen to change event to add some of your logic
  • You can change the value from external code
  • Animation option when changing the value
  • Optional alternative interaction modes : drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings)

Wikipedia Viewer : jQuery Wikipedia Search Engine

Wikipedia Viewer : jQuery Wikipedia Search Engine

A simple Wikipedia search engine. Used Wikipedia API, JavaScript, and jQuery.

IconCaptcha : Anti-Bot Icon Captcha with jQuery & PHP

IconCaptcha : Anti-Bot Icon Captcha with jQuery & PHP

IconCaptcha is a faster and more user-friendly captcha than most other captchas. You no longer have to read any annoying text-images, with IconCaptcha you only have to compare two images and select the image which is only present once.

Besides being user-friendly, IconCaptcha is also developer-friendly. With just a few steps you can get the captcha up and running. Even developers new to JavaScript and PHP can easily install IconCaptcha. The demo page contains all the code needed to get the captcha working.

Features:

  • User Friendly: The captcha uses easily understandable images instead of hard to read texts to complete the captcha.
  • Server-side validation: Any validation done by the captcha will be performed on the server-side instead of the client-side.
  • Events: Events are triggered at various points in the code, allowing you to hook into them and execute custom code if necessary.
  • Themes: Select the design of the captcha without having to ever touch the stylesheet.
  • SCSS: The project contains a SCSS file, allowing you to easily style and compile the stylesheet.
  • Supports IE: The captcha supports Internet Explorer 8 and up.

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

Performs a smooth 2D/3D transition from one HTML element A to another element B.

Features:

  • Runs a single transition or a sequence of transitions;
  • Transition effect is automatically computed between two slides;
  • Fallbacks to browsers that do not support 3D transformations and CSS3 animations;
  • Highly customizable:
    • Any markup you want. Only restriction is sliders to be contained in a parent blocked element;
    • Strong event driven support;
    • Single transition or a sequence of transitions (movie mode);
    • Transition duration, easing function animation and zoom vertexes;
    • Optional user zoomming and panning between each transition.
  • Responsive design, suitable for any window sizes;