Position <ul><li>The  Position  object provides a series of methods that help with element positioning and layout-related ...
<ul><li>clone :: Position </li></ul><ul><li>clone(source, target[, options]) -> [Number, Number]   Clones the position and...
<ul><li>cumulativeOffset :: Position </li></ul><ul><li>cumulativeOffset(element) -> [Number, Number]   Returns the offsets...
<ul><li>overlap :: Position </li></ul><ul><li>overlap(mode, element) -> Number   Returns a Number between 0 and 1 correspo...
overlap :: Position …Cont <ul><li>Example </li></ul><ul><li>  </li></ul><ul><li>var element = $( 'some_positioned_element'...
<ul><li>page :: Position </li></ul><ul><li>page(element) -> [Number, Number]   Returns the X/Y coordinates of element rela...
<ul><li>prepare :: Position </li></ul><ul><li>prepare()   Calculates document scroll offsets for use with Position.withinI...
<ul><li>relativize :: Position </li></ul><ul><li>relativize(element)   Turns element into an relatively-positioned element...
within :: Position …Cont <ul><li>Example </li></ul><ul><li>  </li></ul><ul><li>var element = $( 'some_positioned_element' ...
<ul><li>withinIncludingScrolloffsets :: Position </li></ul><ul><li>withinIncludingScrollOffsets(element, x, y) -> Boolean ...
Upcoming SlideShare
Loading in …5
×

Position

384 views
331 views

Published on

Prototype Javascript

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
384
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Position

  1. 1. Position <ul><li>The Position object provides a series of methods that help with element positioning and layout-related issues. These are mainly used by third party UI libraries like script.aculo.us. </li></ul><ul><li>absolutize :: Position </li></ul><ul><li>absolutize(element) </li></ul><ul><li>  </li></ul><ul><li>Turns element into an absolutely-positioned element without changing its position in the page layout </li></ul>
  2. 2. <ul><li>clone :: Position </li></ul><ul><li>clone(source, target[, options]) -> [Number, Number]   Clones the position and/or dimensions of source onto target as defined by the optional argument options .   </li></ul><ul><li>Note that target will be positioned exactly like source whether or not it is part of the same CSS containing block. </li></ul><ul><li>Options </li></ul>Number by which to offset target’s top CSS propety. 0 offsetTop Number by which to offset target’s left CSS property. 0 offsetLeft clones source’s height onto target. true setHeight clones source’s width onto target. true setWidth clones source’s top CSS property onto target. true setTop clones source’s left CSS properly onto target. true setLef Description Default Name
  3. 3. <ul><li>cumulativeOffset :: Position </li></ul><ul><li>cumulativeOffset(element) -> [Number, Number]   Returns the offsets of element from the top left corner of the document.   </li></ul><ul><li>Adds the cumulative offsetLeft and offsetTop of an element and all its parents. </li></ul><ul><li>  </li></ul><ul><li>Note that all values are returned as numbers only although they are expressed in pixels. </li></ul><ul><li>offsetParent :: Position </li></ul><ul><li>offsetParent(element) -> HTMLElement   Returns element’s closest positioned ancestor. If none is found, the body element is returned.   </li></ul><ul><li>he returned element is element’s CSS containing block. </li></ul>
  4. 4. <ul><li>overlap :: Position </li></ul><ul><li>overlap(mode, element) -> Number   Returns a Number between 0 and 1 corresponding to the proportion to which element overlaps the point previously defined by Position.within . mode can be set to either vertical or horizontal .   </li></ul><ul><li>Imagine a block-level element (i.e., with dimensions) and a point x, y measured in pixels from the top left corner of the page. Calling Position.within will indicate whether that point is within the area occupied by element. </li></ul><ul><li>  </li></ul><ul><li>Now imagine an element of equal dimensions to element with its top left corner at x, y. Position.overlap indicates the amount these two boxes overlap in either the horizontal or vertical direction. </li></ul><ul><li>  </li></ul><ul><li>Note that Position.within must be called right before calling this method. </li></ul><ul><li>Cont… </li></ul>
  5. 5. overlap :: Position …Cont <ul><li>Example </li></ul><ul><li>  </li></ul><ul><li>var element = $( 'some_positioned_element' ); </li></ul><ul><li>  </li></ul><ul><li>Position.cumulativeOffset(element); </li></ul><ul><li>// -> [100, 100] (element is 100px from the top and left edges of the page) </li></ul><ul><li>element.getDimensions(); </li></ul><ul><li>// -> { width: 150, height: 150 } </li></ul><ul><li>  </li></ul><ul><li>Position.within(element,  175 ,  145 ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>Position.overlap( 'horizontal' , element); </li></ul><ul><li>// -> 0.5 (point is halfway across the element's length) </li></ul><ul><li>  </li></ul><ul><li>Position.overlap( 'vertical' , element); </li></ul><ul><li>// -> 0.3 (point is 3/10ths of the way across the element's height) </li></ul>
  6. 6. <ul><li>page :: Position </li></ul><ul><li>page(element) -> [Number, Number]   Returns the X/Y coordinates of element relative to the viewport.  Note that all values are returned as numbers only although they are expressed in pixels . </li></ul><ul><li>positionedOffset :: Position </li></ul><ul><li>positionedOffset(element) -> [Number, Number]   Calculates the element’s offset relative to its closest positioned ancestor (i.e., the element that would be returned by Position.offsetParent(element).   </li></ul><ul><li>Calculates the cumulative offsetLeft and offsetTop of an element and all its parents until it reaches an element with a position of static. </li></ul><ul><li>  </li></ul><ul><li>Note that all values are returned as numbers only although they are expressed in pixels . </li></ul>
  7. 7. <ul><li>prepare :: Position </li></ul><ul><li>prepare()   Calculates document scroll offsets for use with Position.withinIncludingScrollOffsets . </li></ul><ul><li>realOffset :: Position </li></ul><ul><li>realOffset(element) -> [Number, Number]   Calculates the cumulative scroll offset of an element in nested scrolling containers.   </li></ul><ul><li>Adds the cumulative scrollLeft and scrollTop of an element and all its parents. </li></ul><ul><li>  </li></ul><ul><li>Used for calculating the scroll offset of an element that is in more than one scroll container (e.g., a draggable in a scrolling container which is itself part of a scrolling document). </li></ul><ul><li>  </li></ul><ul><li>Note that all values are returned as numbers only although they are expressed in pixels . </li></ul>
  8. 8. <ul><li>relativize :: Position </li></ul><ul><li>relativize(element)   Turns element into an relatively-positioned element without changing its position in the page layout . </li></ul><ul><li>within :: Position </li></ul><ul><li>within(element, x, y) -> Boolean   Indicates whether the point x, y (measured from the top-left corner of the document) is within the boundaries of element. Must be called immediately before Position.overlap .   </li></ul><ul><li>This function uses Position.cumulativeOffset to determine element’s offset from the top of the page, then combines those values with element’s height and width to identify the offsets of all four corners of the element. It then compares these coordinates to the x and y arguments, returning true if those coordinates fall within the bounding box of element. </li></ul><ul><li>Cont… </li></ul>
  9. 9. within :: Position …Cont <ul><li>Example </li></ul><ul><li>  </li></ul><ul><li>var element = $( 'some_positioned_element' ); </li></ul><ul><li>Position.cumulativeOffset(element); </li></ul><ul><li>// -> [100, 100]  (item is 100px from the left and top edges of the page) </li></ul><ul><li>Element.getDimensions(element); </li></ul><ul><li>// -> { width: 150, height: 150 } </li></ul><ul><li>  </li></ul><ul><li>Position.within(element,  200 ,  200 ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>Position.within(element,  260 ,  260 ); </li></ul><ul><li>// -> false </li></ul>
  10. 10. <ul><li>withinIncludingScrolloffsets :: Position </li></ul><ul><li>withinIncludingScrollOffsets(element, x, y) -> Boolean   Indicates whether the point x, y (measured from the top-left corner of the document) is within the boundaries of element . Used instead of Position.within whenever element is a child of a scrolling container. Must be called immediately before Position.overlap and immediately after Position.prepare .   </li></ul><ul><li>This method handles an edge case of Position.within: when element is the child of a scrolling container. (Scriptaculous, for instance, uses it whenever a Draggable’s container is scrollable.) For performance reasons, this method should not be used unless you need this specific edge case. </li></ul><ul><li>  </li></ul><ul><li>You must call Position.prepare first, since it calculates offsets that are used by this method. </li></ul>

×