Search code examples
jqueryjquery-uipositionuislider

jquery position function/object

I've seen this similar code on two sites now used in correlation with jquery slider 

function reCenterButton() {
    $(".button").position({
        "my": "center center",
        "at": "center center",
        "of": $("#button-box")
    });
};

can someone tell me what the name/value pairs mean in the position function object

seen it here http://jsfiddle.net/william/RSkpH/1/
and here http://css-tricks.com/examples/ButtonMaker/

I can't seem to find it when i look up documentation for the position() is it part of slider function?

Solution

  • This is new in jQuery UI 1.8. You can use it for fast positioning.

    Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

    my (String)

    Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    at (String)

    Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    of (Selector, Element, jQuery, Event)

    Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"

    offset (String)

    Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.

    collision (String)

    When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".

    • flip to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.

    • fit so the element keeps in the desired direction, but is re-positioned so it fits.

    • none not do collision detection.

    using (Function)

    When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.

    More Information