Magic jQuery : Free, simple and advanced jQuery templates

setPosition : fixed, absolute position

$(document).ready(function () {
	//setPosition("absolute") button execute : $("#orange").setPosition("absolute");
	//setPosition("fixed") button execute : $("#orange").setPosition("fixed");
	//setPosition(null) button execute : $("#orange").setPosition(null);
});

setPosition : Documentation

The function setPosition specify a new position (like the position in CSS) with a translate offset option.
Technically, there is a Ghost inserted at the exact place and dimensions of the element beeing moved, the layout is not modified.
This function will simulate the CSS position attribute even for browsers which don't normally accept it (such as ie6, iPhone, iPad or other mobile's browsers).

The requiered parameter can be null, "absolute" or "fixed" (extra offset is optional).
Event triggered
When setPosition is called the element on which it is applied trigger an event "position". The data of the event contains the new position ("absolute", "fixed" or null)

setPosition full syntax

You can translate the element as specified in the offset parameter which is optional and each offset is optional.

$("#myElement").setPosition({
  • position : "absolute" | "fixed" | null,
  • /* left overwrite right and top overwrite bottom if both are specified */
  • offset : {
    • top: value,
    • left: value,
    • bottom: value
    • right: value
    • }
});
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 !