JResponsive

Super-smooth transition layout for jQuery

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. If you have any issue or any suggestion to make JResponsive better, please go in GitHub and create a new issue. I will try to get it done asap.

How to use JResponsive

News Update

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. click here for more details.

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. $('...').jresponsive({...},callback) define callback function function callback(){...}

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: 40,vspace: 20,class_name: 'item',content_array: content});

Transformations

JResponsive provides the following transformations for use with transfromation property

  • animation transition
  • fade fade in and out

Interactive Example

Here is an interactive example Resize browser window or change the parameters to see how it works.

All you need for HTML is to setup an empty div tag.

Minimun Setup for CSS

Build an array to pass to JResponsive.

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. As you can see below no content_array is defined.

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

Call JResponsive and Adjust options

$(function(){

$('#example').jresponsive({

min_size: ,

max_size: ,

height: ,

hspace: ,

vspace: ,

transformation: ,

class_name: 'item',

content_array: content,

},callback);

});

Browser support

Supported browsers

See JResonsive in action. 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

What about older browsers?

Since most of the current browsers being used work just fine with JResponsive, so i don't find any reason for supporting older versions.

							If there are any problems with current modern browsers. Please go to GitHub and put in an issue ticket. I will try to get it solved as soon as possible.
						

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

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

Example setting

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

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

transformation

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

							$('#grid').JResponsive({
								min-size: 100,
							});
						

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({
								max-size: 300,
							});
						

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({
								height: 200,
							});
						

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({
								hspace: 80,
							});
						

hspace

This is the horizontal space between elements. hspace: 80

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

vspace

This is the vertical space between elements. vspace: 20

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

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'

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

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

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. click here for more details.

Head over to the JResponsive GitHub project page for more info and downloads, or to the support if you find any issues or questions.

JResponsive is authored and maintained by Tuyen Le with help from its users who contributed testing cases.

Copyright 2012-2013, Tuyen Le Released under the MIT License .