Skip to contents

Position an element relative to another

Source: R/position.R
jqui_position.Rd

Wrapper of the jQuery UI .position() method, allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.

Usage

jqui_position(
  ui,
  my = "center",
  at = "center",
  of,
  collision = "flip",
  within = JS("$(window)")
)

Arguments

ui

Which element to be positioned. Can be a string of jQuery_selector or a JS() wrapped javascript expression that returns a jQuery object. Only the first matching element will be used.

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 be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.

at

String. Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See the my option for full details on possible values. Percentage offsets are relative to the target element.

of

Which element to position against. Can be a string of jQuery_selector or a JS() wrapped javascript expression that returns a jQuery object. Only the first matching element will be used.

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, e.g., "flip", "fit", "fit flip", "fit none".

  • "flip": Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.

  • "fit": Shift the element away from the edge of the window.

  • "flipfit": First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.

  • "none": Does not apply any collision detection.

within

Element to position within, affecting collision detection. Can be a string of jQuery_selector or a JS() wrapped javascript expression that returns a jQuery object. Only the first matching element will be used.