Magic jQuery : Free, simple and advanced jQuery templates

Limit elements

$(document).ready(function () {
	$("#orange").align(window);
	$("#orange").limit({bottom:{at:1, offset:10, selector:"div"});
});

Limit : Documentation

The function limit specify for each desired direction the elements by which the calling element's movement is limited.

In other words when the matched element would begin collision with a limit element (including the offset and parameters) it is aligned to this limit with the specified offset and other parameters and unaligned as soon as the collision ends.

if you want to limit by the window (the element will never get out) then write window.

two syntaxes accepted :
  • Or just specify any jQuery selector of element to which it is aligned to.
    If various elements match a selector (ex : "div"), the limit function will use the best matching element.
  • Or specify
{my:XX, at:XX, offset:XX, selector;a_jQuery_Selector}
  • my : any float, this is normalized percentages of the target's dimension for this direction
  • at : any float, this is normalized percentages of the limiting element's dimension for this direction
  • offset : in positive or negative PX, add this value to the calculated position
  • selector : any jQuery selector, will choose the first one
Event triggered
When a limit is activated, the element on which it is applied trigger an event "limit". The data of the events contains the new activated limits. When a limit is unactivated it triggers an event "unlimit", the data of the events contains the unactivated limits.

Limit elements : examples

If you want that the element with the id "myElement" doesn't go outside the visible screen :
$("#myElement").limit(window);

you want to limit the bottom of <div id="myDiv"></div> to the top of <div id="footer"></div> and its top to to the bottom of <div id="header"></div>, you would write
$("#myDiv").limit({bottom:{at:1, selector:'#footer'}, top:{at:1, selector:'#header'}});

limit full syntax

Here are the 3 possible syntaxes. Use the combination of any depend on your needs.
You can then specify any of the directions, for complex case : all parameters are optional except selector

$("#myElement").limit({
  • top : {
    • my: value, //any float:0:top, 1:bottom
    • at: value, //any float:0:top, 1:bottom
    • offset: value //any positive or negative value
    • selector: anySelector //any jquery selector
    • },
  • right : {
    • my: value, //any float:0:right, 1:left
    • at: value, //any float:0:right, 1:left
    • offset: value //any positive or negative value
    • selector: anySelector //any jquery selector
    • },
  • bottom : {
    • my: value, //any float:0:bottom, 1:top
    • at: value, //any float:0:bottom, 1:top
    • offset: value //any positive or negative value
    • selector: anySelector //any jquery selector
    • },
  • left : {
    • my: value, //any float:0:left, 1:right
    • at: value, //any float:0:left, 1:right
    • offset: value //any positive or negative value
    • selector: anySelector //any jquery selector
    • }
});
$("#myElement").limit({
  • top : a_selector,
  • right : a_selector,
  • bottom : a_selector,
  • left : a_selector,
});
$("#myElement").limit(a_selector);
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 !