Best jQuery Responsive Plugins & Tutorials with Demo

    TabLooper : jQuery Responsive Loop Tab Metro UI

    TabLooper : jQuery Responsive Loop Tab Metro UI

    TabLooper is a Responsive Tab jQuery Plugin that is used to create tabs for your sites with responsive layout, support unlimited tabs, combine inline and AJAX content for best performance, move tab content by touch swipe event ( on mobile devices ) or left/right keys ( on desktop/laptop ) or simple click on buttons ( all devices ).

    Features:

    • Responsive Design
    • Unlimited Tabs.
    • Effects for Each Tab Content.
    • Combine Inline and AJAX Content.
    • Support Touch Swipe to move Tab Content ( Mobile Devices ).
    • Support Left/Right Keys to move Tab Content ( Desktop/Laptop ).
    • Click on Buttons to move Tab Content ( All Devices ).
    • Count Total of Tab.
    • Metro UI Style

    Metro Menu : jQuery Stylish Menu

    Metro Menu : jQuery Stylish Menu

    Metro Menu will help you to create a powerful stylish menu.This plugin is responsive and customizable. You can change the color, animation, position, closing methods and more.

    Features:

    • Infinite Menu Options
    • Infinite SubMenu Options
    • Infinite color
    • more than 100 different images
    • You can control the way that the Metro Menu will disappear
    • Support 1 main menu and every option can store a submenu with infinite sub menu icons

    SortTables : jQuery Responsive Tables

    SortTables : jQuery Responsive Tables

    SortResponsiveTable including: sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function.

    Other features include alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting.

    Cool kitten : A jQuery Parallax scrolling responsive framework

    Cool kitten : A jQuery Parallax scrolling responsive framework

    A parallax scrolling responsive framework with jQuery.It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.The best way to have a website with abilities to be viewed in every computer, tablet and mobile.The last web trend! It makes a beautiful visual effect that brings a second life to every slide.

    Unslider : The super-tiny jQuery slider

    Unslider : The super-tiny jQuery slider

    jQuery slider that just slides.No fancy effects or unnecessary markup, and it’s less than 3kb.Fluid, flexible, fantastically minimal.You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.Use any HTML in your slides, extend with CSS. You have full control.If you want to, you can add keyboard arrow support.

    lthough it’s lightweight, Unslider comes with a range of options to customise your slider.If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

    Features:

    • Ready to Responsive and Adaptive
    • Simple to use
    • Cross Browsers
    • Allow multiple connections
    • Auto Size(on/off)
    • Inhirit Padding(on/off)
    • Supports thirty animation effects from jQuery Easing
    • Overlay Style: classic,rolling(top,bottom,right,left),double(vertical,horizontal),four

    Flexisel : jQuery Responsive Carousel Plugin

    Flexisel : jQuery Responsive Carousel Plugin

    As long as there has been jQuery there have been image carousels created with jQuery. The famous jCarousel has been out since 2006, the same year the first version of jQuery was released. However, with the explosion of users now using their mobile devices for their internet browsing — on iPhones, iPads, and the like — it becomes necessary for jQuery plugins to support a good user experience on these devices. Enter Flexisel, the responsive image carousel with options specifically available for adapting the carousel for mobile and tablet devices.

    Check out the demo here. Resize your browser window to see how you the plugin can adjust to the window width.

    FractionSlider : jQuery parallax slider plugin

    FractionSlider : jQuery parallax slider plugin

    FractionSlider is a jQuery plugin for image/text-sliders.It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated).

    Unlimited Grid Layout in CSS & JavaScript

    Unlimited Grid Layout in CSS & JavaScript

    During my work as a frontend developer I coded many sites with a full page layout, both before and after the Flash decline.

    Coding this type of layout was, every time, one step forward towards a better and more maintainable CSS structure; however, even if every single length was expressed as a relative and flexible unit, we need to know the number of pages.

    For example: if we have an horizontal structure of 6 pages we set the pages’ container width to 600% and every single child page width to 16.66%. But if the number of pages changed to 5 or 7 we have to edit the CSS.

    sizeyThingy : jQuery plugin that provides your Browser Size

    sizeyThingy : jQuery plugin that provides your Browser Size

    A little jQuery plugin that provides a quick way of seeing what size your browser is, helps with Responsive design.