Magic jQuery : Free, simple and advanced jQuery templates

Magic jQuery is a small 35kB compresed jQuery plugin. It is free, optimized, simple and flexible. This is compatible from ie6 until mobile browsers such as iPad, iPhone etc...The idea is to give to the designer/developper

  • Easy layout manager features

    such as align, limit and position.
  • Easy User Interaction features

    such as any kind of fully configurable menu (menu, tab, carrousel...), inner-page messages or popIn/popOut for highlighting elements.

Code for the complex example above

$(document).ready(function () {
	$("#blue").align({left:{my:0.5, at:1,offset:-20, selector:'#pink'}, bottom:{at:1, selector:"#pink"}});
	$("#blue").limit({
		top:{selector:window, offset:30}, 
		left:{at:0,selector:"#orange", offset:30}, 
		bottom:{at:1,selector:"#yellow", offset:30}, 
		right:window
	});
	
	$("#red").align({top:{at:1, selector:'#blue'}, left:{at:1,selector:"#blue"}});
	$("#red").limit({right:window, bottom: window});	
	
	$("#yellow").align({top:{my:0.2,at:1,selector:'#red'}, left:{at:1, selector:"#red"}});
	$("#yellow").limit({right:window, bottom: window});
	
	$("#orange").align({top:window, bottom:window, left:window, right:{at:2.5, selector:'#pink'}});
	$("#orange").limit({right:{at:1,selector:'#blue'}});
	$(window).resize();
}); 
Try Magic jQuery : Add this to your code
  • <script type="text/javascript"
  • var overrideResizable = true; //override resizable function of jQuery UI (if used) to resize in all directions
  • </script>
  • <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  • <script type="text/javascript" src="http://www.jquery-css.com/js/magic.min.js" ></script>
  • <script type="text/javascript" >
  • $(document).ready(function () {
  • //your code here
  • });
  • </script>

Magic jQuery Templates & Layout : give me feedback !