jQuery JResponsive

JResponsive is a jQuery Layout plugin.

Created by Dtuyenle

efficient, dynamic and responsive layout mangement using JQuery animation to move elements around to fit the browser window

Not what you're looking for? Click here to view more Layout jQuery plugins

Update: I am currently improving JResponsive so that it can support different width and height for different divs

Auto add inline css for container and item

Make jresponsive usable for multiple containers

If you don't want to create content_array manually. You can let Jresponsive take care of that for you by not defining content_array property.

$("#container_id").jresponsive({
  transormation: 'animation', 
  min_size: 100,
  max_size: 250,
  height:250,
  hspace:10,
  vspace:10,
  class_name: 'item',
  content_array: content
});

Note: Make sure when you struture your html from the beginning, follow the pattern:

I would appreciate if someone could tell me how to escape html inside pre tag, GitHub making me frustrated.

div id ="container_id"
    div class="class_name"
    div class = "class_name"
    ........

Create divs first inside the container then push them all into the array passed to JResponsive:

var array = [];
array = $('#container .content').map(function(){
    return $(this).html();          
});
$('#container').empty();
var length = array.length;
for(var i = 0; i ' + array[i] + '';           
};

JResponsive now will resize images inside the container automatically based on the initial propotion of the container width and the image width.

JResponsive now supports callback function as below

$("div").jresponsive({
  .......
},callback);
function callback(){
  ......
}

Introduction notes

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by "packing" them in tightly. One of the very famous website that using this type of layout is Pulse.

Simplicity is the ultimate sophistication

A simple jQuery plugin that allows you to add a dynamically-resized layout to any page or element, customize the layout the way you want with or without top,right,left or bottom navigations.

Usage is simple!

Just include this script after jQuery. Requires jQuery 1.5+. Use $('...').jresponsive({...}) instead of jQuery's $('...').animate. It has the same syntax as animate.

$("div").jresponsive({
  transormation: 'animation', 
  min_size: 100,
  max_size: 250,
  height:250,
  hspace:10,
  vspace:10,
  class_name: 'item',
  content_array: content
});

JResponsive provides the following transformations for use with

transfromationproperty

animation transition

fade fade in and out

Supported browsers

JResponsive works well with all of the current modern browsers. JResponsive uses JQUERY library.

IE 8+
Firefox 4+
Safari 5+
Chrome 10+
Opera 11+
Android browser

If any issues found

If for any reason, you need JResponsive to be supported for older versions of any browsers in the list, please let me know i will try as hard as i can to make it work.

Recipes

Example setting

JResponsive is a JQuery plugin which means you can use id $('#grid').JResponsive({..}) or class $('.grid').JResponsive({..}) as reference.

$('#grid').JResponsive({
        transfromation: 'default',
            min_size: 100,
            max_size: 250,
            height: 250,
            nav_name: '#navigation',
            class_name: 'item',
            content_array: content,
});

transformation

Define custom transformation through transfromation property. JResponsive currently supports 2 custom transformation transfromation: 'animate' transfromation: 'fade'

$('#grid').JResponsive({
        transformation: '',
});

min_size

This is the minimun width of each of the element that it is allowed to shrink, because when window width changed, it depends on how much it changes elements will change the width or change position to fit the container. min_size: 100

$('#grid').JResponsive({
      min_size: 100,
});

max_size

The maximun width of each of the element that it is allowed to reach. Based on this property, JResponsive will calculate how many elements will fit the container. max_size: 300

$('#grid').JResponsive({
      max_size: 250,
});

height

This is the height of each element inside the container. If set as 0, the height will be always equal the width of the element. height: 0

$('#grid').JResponsive({
      height: 200,
});

hspace

Horizontal gap between elements

$('#grid').JResponsive({
      hspace: 40,
});

vspace

Vertical gap between elements

$('#grid').JResponsive({
      vspace: 40,
});

item_name

The class name of each of the element inside the container div. This will give users total control over the design of the layout. You can use class: item_name: '.item' or id item_name: '#item'

$('#grid').JResponsive({
      item_name: '.item',
});

content_array

This is where user will pass an array containing all of the elements that will be stored inside the container div. Each of the array element will become an item positioned inside the container div. Users can use any html tag for each of the element. Build the array from any source before passing it to JResponsive. content_array: content

var content = [];
content[0] = '<div class="item-bg"><div class="bg-color"></div><div class="item-info"><div class="title">Kyocera Revolution Series 7-Inch Serrated Slicing Bread Knife</div><div class="price">$34.95</div></div></div>';
content[1] = '<div class="item-bg"><div class="bg-color"></div><div class="item-info"><div class="title">Kyocera Revolution Series 7-Inch Serrated Slicing Bread Knife</div><div class="price">$34.95</div></div></div>';
$('#grid').JResponsive({
          content_array: content,
});

If you don't want to create content_array manually. You can let Jresponsive take care of that for you by not defining content_array property.

$("#container_id").jresponsive({
  transormation: 'animation', 
  min_size: 100,
  max_size: 250,
  height:250,
  hspace:10,
  vspace:10,
  class_name: 'item',
  content_array: content
});