Learning jQuery

Due to the proliferation of smartphones and tablets, responsive website design is now a must have for any website. Creating responsive design offers many technical challenges mainly due to different device sizes and the wide variety of browsers. Thankfully, powerful client side frameworks and libraries make it easy to create a responsive design. All sections or elements on the web page have to be responsive whether it’s images, tables, grids, sliders or any other element. In this post, find a compiled list of 15 of the newest jQuery plugins which are suitable for a responsive website. These jQuery plugins allow you to create responsive modal windows, image galleries, grids, tables, responsive image viewing, timelines, time picker, hamburger navigation menues, content sliders and several other functionalities. Enjoy!

1. SmartPhoto

https://github.com/appleple/SmartPhoto



 

 

 

 

 

 

 

SmartPhoto is a responsive jQuery plugin which works as an image viewer, especially on mobile devices. It supports intuitive gestures such as pinch-in, pinch-out, drag and swipe for a better image viewing experience. It uses the accelerometer to move the images. It also works on the desktop and can be triggered by keyboard arrows to toggle between previous and next images. It also allows you to control the animation speed for switching images.

2. iziModal

https://github.com/dolce/iziModal



iziModal is a simple jQuery plugin for creating elegant, responsive, flexible and lightweight modal windows with CSS3 animations. It allows you to create a custom modal titl, subtitle and icon for modal windows. Features include:

• iFrame and AJAX supported.
• Use ESC key to close the modal.
• Focus can be set on the first input when opened.
• Automatically open on page load.
• Custom transition effects.
• Auto closes the modal window.
• Supports various events to handle things.
• Various other options and API to play with.

3. Restive.js

https://github.com/obihill/restive.js



Restive.js is a designer-friendly jQuery toolkit for responsive web design. The main reason restive.js exists is to make it easier for web designers to add responsive and/or mobile-friendly enhancements to their web pages. This toolkit addresses the issues faced using CSS3 media queries for making mobile and desktop friendly website. Using this toolkit, as a web designer you don’t have to manage media queries for different viewport dimensions. Restive.js makes thing simpler and based on the device and orientation, it automatically applies the CSS classes to the HTML elements. It supports four options:

• Breakpoints – This option is used to define supported resolutions in an array.
• Classes – This option accepts an array of CSS class names that need to be added to the selector.
• turbo_classes – This tells restive.js to add some additional classes when certain conditions are met.
• force_dip – tells restive.js to consider pixels as device-independent (important for retina devices).

4. GridTab

https://github.com/gopalraju/gridtab



GridTab is a responsive and lightweight jQuery plugin for creating grid based responsive tabs. GridTab supports two layout modes, grid and tab. By default, it uses the grid layout. It offers various settings to control the layout of grid and tabs like padding, border colour, padding between content, content background, showing the closing button, showing arrows and active tab colour. Features include:

• Lightweight and based on CSS3 flexbox
• Set Grid for each breakpoint
• Switch between Grid and Tab layout
• Next, previous and close controls
• Scroll to current tab
• Custom selectors
• Right-To-Left Support

5. Timeline

http://ryanfitzgerald.github.io/vertical-timeline/



Vertical Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what is required, so it can be styled to suit your specific needs. You can also add dates to the timeline by utilizing data attributes, and it supports fade/slide animation to load the timeline.

6. Slider

https://github.com/codezero-be/jquery-slider



The Slider is a small, responsive jQuery slider plugin which allows scrolling horizontally through a group of slides. It isn't necessary to have an image in the slider, you can use any HTML content in a slide. Slides can have a default background or you can write your own style to set a specific background image. It also supports background zoom when you hover over it. If you use images, Slider supports auto width images, full width images, image captions and a zoom icon when you hover over the image. You can also control the speed of the slides and enable a swipe gesture for mobile devices.

7. HR TimePicker

https://github.com/hidaytrahman/hr-timePicker



HR TimePicker is a simple, lightweight and easy to use plugin for implementing responsive time pickers. This plugin creates a time picker dropdown which allows users to select hours and minutes. It supports custom colour combination and custom arrows.

8. fitToParent

https://github.com/drewbaker/fitToParent



fitToParent is a jQuery plugin that will resize an element to fit its parent container while maintaining its original aspect ratio. This plugin first checks for size passed as plugin options, if not found then it uses the size of the parent element. It is an ideal choice for responsive iframes, images and YouTube/Vimeo videos. While using this plugin, remember to attach fitToParent() to the window resize event which re initializes the plugin on resize event.

9. Hamburger-nav

https://github.com/sprintify/hamburger-nav



Hamburger-nav is a simple, lightweight and responsive jQuery and CSS based plugin which automatically converts the desktop optimized menu into a Hamburger style menu. The hamburger style menu is ideal for mobile devices as it is toggleable and fits nicely in mobile device frames. It also uses CSS3 animation to open/close the menu.

10. Responsive Miller column

https://github.com/dsharew/responsive-miller-column



Responsive Miller column is a jQuery plugin that implements Miller Columns with a responsive design. Miller columns (also known as Cascading) are a browsing/visualization technique that can be applied to tree structures. The columns allow multiple levels of the hierarchy to be open at once, and provide a visual representation of the current location. It is closely related to techniques used earlier in the Smalltalk browser, but was independently invented by Mark S. Miller in 1980 at Yale University. You can get more information about miller columns here. The plugin is responsive, supports material design and makes columns editable.

11. jQuery Calendar

https://github.com/benhall14/jquery-calendar



jQuery calendar is a simple, lightweight and responsive jQuery plugin for generating a calendar with a choice of 8 responsive colour schemes, or you can use your own style sheets. You can override the original content at will, including text (ex - months and days on the calendar). This plugin also allows you to easily create and mark events on the calendar. To create events, create an array with a start date, end date and the name of the event and pass the same at the time of initializing the calendar.

12. Glider

https://github.com/Steve-Fenton/jquery-glider



Glider is a responsive content slider plugin for jQuery that supports auto play, custom slider controls, infinite looping, auto resizing based on the existing CSS and LTR/RTL text support. The biggest USP of this plugin is to have support for left-to-right and right-to-left languages. The settings can be defined via HTML 5 data attributes. It supports various events for capturing data at slide transitions and the slider control can be placed anywhere on the page and with any kind of style (not necessarily inside the slider).

13. Swapping Wall

https://github.com/oleksiisinkov/SwappingWall.jquery



Swapping Wall is a responsive and simple jQuery plugin for creating a simple wall gallery with cool animations for randomly swapping items. This plugin is suitable for creating a live wall, or displaying a portfolio of artistic work. You can define the number of items in a row, and you can also set the time and duration for swapping images.

14. resTable

https://codefog.github.io/restables/



resTable is a jQuery plugin that allows you to easily make your table responsive. The default implementation of this plugin will convert columns into rows for smaller screens, but there are configurable options as well. You can merge two or more columns, move the columns to a different position, or span a column to multiple columns. This plugin creates a clone of the actual table and rearranges the table layout accordingly. So the actual table is hidden and the cloned table is visible. While cloning the table, clone callback can be used to add extra text to the columns.

15. Modallery

https://github.com/lhcgoncalves/bootstrap-modallery



Modallery is a lightweight, responsive lightbox jQuery plugin which magically creates an image gallery with simple setup. As this plugin shows the images in a bootstrap modal, it is dependent on bootstrap. To create, add the CSS class .modallery on every image you want to show with a data attribute data-to referring to the image that should open. You can also add captions to the model images.

<h2>Conclusion</h2>

To sum it up, these jQuery plugins allows you to make different sections of a website responsive. These plugins allow you to create responsive modal windows, content sliders, grids, tables, image walls, calendars, time pickers, image galleries and hamburger navigation menus. These plugins help you to overcome challenges faced in creating a responsive design for your website.