Best jQuery Responsive Plugins & Tutorials with Demo

    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    July 20, 2012 | CSS2 / CSS3.0, Plugins, Responsive, Slider
    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

    Features :

    • Hardware accelerated : using CSS3 for supported iOS, Android and WebKit browsers.
    • Responsive support : to work with the most dynamic desktop and mobile sites.
    • Tons of API callbacks : Tons of API callbacks.
    • Auto-sliding : Set your slider to automatically transition and pause on hover.
    • FF/Safari/Chrome/IE7+ : Full modern browser support for desktop.

     

    Read More Demo

    Doubletake : jQuery plugin for responsive images

    July 15, 2012 | Plugins, Responsive, Web
    Doubletake : jQuery plugin for responsive images

    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.

    I’m using a couple of tools to help me resize the images on this page – a local copy of SLIR and the src.sencha.io web service. If you aren’t comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.

    Read More Demo

    jQuery responsive web

    July 15, 2012 | Plugins, Responsive, Web
    jQuery responsive web

    It is a simple jquery plugin helping design more responsive and adaptive websites and web applications with almost no setup.It adds dynamic classes to the <body> depending on the operating system, browser and resolution.For ideal responsive web design css is just not enough. it chokes at some point, or has cross-browser and cross-platform issues much more than the wonderful jquery framework.

    I have tried it with microsoft internet explorer v7 and v8, firefox, google chrome, safari, opera on windows, and also with an android device. works perfectly on all of them. on the android device (samsung galaxy s) handles the orientation change nicely too.

    Read More Demo

    sizeit.js : A javascript helper for responsive web design

    July 13, 2012 | Core Java Script, Responsive
    sizeit.js : A javascript helper for responsive web design

    sizeit.js is a JavaScript utility that detects the screen size and loads external css based on the settings you configure. Works kinda like media queries.

    In many cases, media queries do just fine, but not always. The reason I created sizeit was for building web apps. I need more control over the appearance and content than what CSS and media queries allow. Using JavaScript to handle size detection, this information is available for application scripts as well as templating tools like jQuery Templates or Mustache.

    Other reasons for using sizeit.js? Media queries are not supported in older browsers. By dynamically loading external CSS based on window size, sizeit.js eliminates the need to load extra css for all the various screen sizes. JavaScript can’t hook into media queries, which are purely a CSS convention, so I’ve seen examples of using both together. With sizeit.js, all your screen size detection is handled in one spot.

    Read More Demo

    jQuery Responsive Thumbnail Gallery Plugin

    July 13, 2012 | Gallery, Plugins, Responsive
    jQuery Responsive Thumbnail Gallery Plugin

    jQuery Plugin for creating image galleries that scale to fit their container.

    Read More Demo

    Slider Revolution Responsive jQuery Plugin

    June 30, 2012 | Plugins, Premium, Responsive, Slider
    Slider Revolution Responsive jQuery Plugin

    Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

    This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS !

    Read More Demo

    Responsive 3D Panel Layout in jQuery & CSS3

    June 28, 2012 | CSS2 / CSS3.0, Plugins, Responsive
    Responsive 3D Panel Layout in jQuery & CSS3

    Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

    Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

    Read More Demo

    jQuery Dynamic Grid: The Engine

    June 27, 2012 | Animation, Plugins, Premium, Responsive, Web
    jQuery Dynamic Grid: The Engine

    Dynamic Grid is a jQuery plugin for generating an animated, responsive and great looking grid for your content – be it images, news feed, text and what not.

    With the help of some sophisticated algorithms the script fills the grid with cells with (optionally) random heights on every page load, and thus giving the widget a unique layout every time someone loads your page! Additionally, the algorithm is smart enough to prevent cells from being too big for the total size of the widget. Which means at any point in time, there is no cell that is only partially shown or hidden. It just works like it should!

    Number of options:

    • Number of columns
    • Number of rows
    • Random/fixed cell height
    • Padding between columns
    • Fluid/fixed width
    • Height
    • Easing effect
    • Animation speed
    • Animation interval
    Read More Demo

    Responsly.js : A set of CSS3 responsible widgets for jQuery

    June 20, 2012 | CSS2 / CSS3.0, Plugins, Responsive, Web
    Responsly.js : A set of CSS3 responsible widgets for jQuery

    Dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come!.Responsive designs are cool! Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.
    Features

    • Works from large monitors to laptops, to tablets to mobiles.
    • Pure CSS styling
    • CSS3 based transitions (hardware accelerated where possible).
    • Animations work on all modern browsers including mobile, (IE degrades gracefully by losing transitions).
    • Minimal dependence on jQuery for convenience ( can substitute Zepto, or pure JavaScript).
    • Simple lightweight design, adds little to your download size
    • Compartmentalized, so use only what you want
    • Best used with a responsive CSS framework like 1140px or 320plus
    • Can be heavily customized by editing CSS
    Read More Demo

    jQuery Picture : Responsive images plugin

    June 15, 2012 | jQuery Mobile, Plugins, Responsive, Web
    jQuery Picture : Responsive images plugin

    jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

    Read More Demo