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