Best jQuery Responsive Plugins & Tutorials with Demo

Produce Big, Bold & Responsive Headlines with jQuery SlabText

Produce Big, Bold & Responsive Headlines with jQuery SlabText

SlabText is a jQuery plugin for producing big, bold & responsive headlines . The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Response JS : jQuery plugin for mobile-first progressive enhancement in HTML5

Response JS : jQuery plugin for mobile-first progressive enhancement in HTML5

Response JS is a lightweight jQuery 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 media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

jQuery Slideshow plugin : ResponsiveSlides.js

jQuery Slideshow plugin : ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work 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. Only dependency is jQuery and that all the images are same size.

jQuery Elastic Image Slideshow with Thumbnail Preview

jQuery Elastic Image Slideshow with Thumbnail Preview

Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques.

jQuery Heads-Up Grid

jQuery Heads-Up Grid

Built with HTML, CSS & JavaScript, The Heads-Up Grid is a responsive overlay grid for in-browser website development. It has been created to make it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements.

Convert a Menu to a Dropdown for Small Screens with jQuery

Convert a Menu to a Dropdown for Small Screens with jQuery

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

wmuSlider, a jQuery responsive slider

wmuSlider, a jQuery responsive slider

A responsive jquery slider.

Responsive Image Gallery with Thumbnail Carousel

Responsive jquery Image Gallery with Thumbnail Carousel

Today we want to show you 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, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

Elastislide – A Responsive jQuery Carousel Plugin

jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide’s properties.

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

jQuery Slider Plugin Flexslider

jQuery Slider Plugin Flexslider

In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.