A web design can be said to be responsive only when it get adapted to the different operating system and the platforms used by the visitors to access the website. Responsive design is a set of techniques and tools used for making websites fit for every screen, small and big. Web designers around the world have realized the importance of designing websites in this way.
More than ever, mobile devices including mobile phones, smartphones and tablets have become increasingly popular for web browsing.So it is the most essential web design trend in recen years.
Today we bring together many responsive jQuery plugins to use in your web design projects.Of course there are hundreds of tool and plugins for responsive design but we have just selected some of them.We will share new tools regularly.
So here is the list of responsive jQuery plugins.
TurboTabs : Responsive Tabs jQuery Plugin
TurboTabs is responsive Tabs jQuery Plugin with plenty of options. HTML markup is very simple to follow , jQuery will do all the magic.
Plugin Source
Slidea : A jQuery Smarter Responsive Slider Plugin
Slidea by Pixobyte is a super fast and intuitive multi-purpose content slider which completely leaves the competition behind.
Plugin Source
Ideabox : jQuery Multipurpose Step Form
Ideabox is a jQuery plugin for multipurpose step form wizard.
Plugin Source
Secondary sliding Navigation with CSS3 & jQuery
A bold, secondary menu that slides over the main navigation.
Plugin Source
jQuery CSS3 Responsive Slider with Editor
AZSlider is a quality-designed content and image slider harnessing the power of HTML5 and the control of CSS3. AZSlider contains everything you need to build a modern, eye catching slider for your website.
Plugin Source
jQuery Bootstrap Fullscreen Select
Bootstrap select for mobile devices, originally made for select controls in Cordova/PhoneGap mobile applications.A custom fullscreen select / multiselect for Bootstrap using BUTTONS or User defined elements, designed for mobile devices.
Plugin Source
Full-Screen Pushing Navigation
A full page menu, that replaces the current content by pushing it off the screen with CSS3 and jQuery.
Plugin Source
Flickity
Touch, responsive, flickable galleries.
Plugin Source
Elastislide
Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.
Plugin Source
Flexible Slide-to-top Accordion
A simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in.
Plugin Source
Blueberry
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Plugin Source
FitText
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Plugin Source
Response JS
Response JS is a lightweight jQuery (or Zepto) plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes.
Plugin Source
jQuery Masonry
Masonry is a dynamic grid layout plugin for jQuery
Plugin Source
Isotope
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.
Plugin Source
ScrollDeck.js
A jQuery plugin for making scrolling presentation decks
Plugin Source
Responsive Image Gallery with Thumbnail Carousel
Learn how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide.
Plugin Source
Photo Swipe
PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.Compatible with lots of mobile devices and all popular JavaScript libraries and development frameworks.
Plugin Source
ResponsiveSlides.js v1.54
ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images.It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.
Plugin Source
Fitvid.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Plugin Source
Responsly.js
Written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available.
Plugin Source
wmuSlider
A jQuery responsive slider with touch support and AJAX image gallery.
Plugin Source
rlightbox – a jQuery UI mediabox
rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos.
Plugin Source
Responsive Images
The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions.
Plugin Source
Pull Down for Navigation
A simple and effective way of removing a button from the interface and a great use of touch screen input. This technique has been widely adopted amongst a range of different apps.
Plugin Source
Glisse.js
Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.
Plugin Source
jQuery Anystretch
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes
Plugin Source
Responsive Thumbnail Gallery
jQuery Plugin for creating image galleries that scale to fit their container.
Plugin Source
Flexslider
FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported
Plugin Source
TinyNav.js
TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts dropdowns for small screen. It also automatically selects the current page.
Plugin Source
Simple Responsive Menu
If you’re on a mobile phone or if you narrow the browser window you’ll see a menu button appear which upon pressing displays the considerably unexciting menu and pressing it again retracts it.
Plugin Source
Backstretch
A simple jQuery plugin that allows you to add a dynamically-resized background image to any page.
Plugin Source
Doubletake
Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.
Plugin Source
Automatic Image Montage with jQuery
With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
Plugin Source
fancyBox
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
Plugin Source
Breakpoints.js
Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
Plugin Source
Camera
Camera is a responsive slideshow based on Diapo slideshow but improved a lot.
Plugin Source
bgStretcher
bgStretcher is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).
Plugin Source
jQSlider
jQSlider follows a new approach in sliding content. Where most slider-plugins are moving the whole list of slides when animating, jQSlider animates only the list with two visible slides at the time. But the most important difference is, that it is not cloning the first (respectively last) slides to realize a circular movement.
Plugin Source
jQuery Flex Vertical Center
This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.
Plugin Source
Dialog
A responsive, accessible dialog jQuery plugin for presenting information and prompting for user action.
Plugin Source
