GitHub

JIROjs is a jQuery plugin that allows you to make responsive javascript. Respond to width, height, scroll or something custom. JIROjs handles initialisation, ordering and execution of custom JavaScript in response to all or one of these.

  • Flexible yet powerful
  • A great accompaniment to css media queries
  • Responsive web design has never been so easy
  • The free and open source JIROjs makes any responsive design a joy to implement

Only ~5.5KB when minified and ~2KB minified and gzipped!

###Demos Horizontal menu to drop down. (To Do)
Side menu that follows when scrolled. (To Do)
Text that scales up for bigger divs. (To Do)

How to use me

JIROjs is a jquery plugin and initialising it is simple.

Insert after jQuery like this:

<!-- jQuery -->
	<script type="text/javascript" src="scripts/jquery-x.x.x.min.js"></script>
<!-- jiro -->
	<script type="text/javascript" src="jiro-1.1.1.min.js"></script>

Make sure the objects being used have been loaded by the browser.

After that you can use one of three simple methods to achieve the results you want.

###Methods

####Switch method

$(selector).jiro('addSwitch',breakPoint,{over:function,under:function});
$(selector).jiro('addSwitch',{bp:breakPoint,*options*},{over:function,under:function});

This lets you run a function when the property (default is width) goes over or under the given 'break point'.

options
event
default event:'resize'
Allows you to specify the event that triggers execution of the function argument. Always a string.

e.g

function displayWidth(){
	return function(event){
		var $this=this;
		$this.text($this.width());
	}
}

Note the use of 'this' to refer to the target element specified in the jQuery selector.

prop
default prop:'width'
Allows you to set which property is monitored for triggering of under and over breakpoints. This is a string representing a function that returns a number. The function has to be a child of the jQuery function. For example 'width' represents

Read the original on github.com ↗