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

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"
........

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

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

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
});

animation transition

fade fade in and out

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 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.

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,
});

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

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

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,
});

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,
});

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,
});

Horizontal gap between elements

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

Vertical gap between elements

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

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',
});

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
});

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"
........

Make sure you specify css for main container and each item

#container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
}
.item {
position:absolute;
}