NR.js

Edit New

NR.js

[24] The NodeRect.js JavaScript library is available at <https://suika.suikawiki.org/www/css/noderect/NodeRect.js>.

NR

[4] Public class method

NR.resetIndex

[5] Private class attribute

NR.index

Members common to NR.Rect, NR.Vector, and NR.Band

[10] Class constant

NR.type.invalid

[12] Instance attributes

invalid
label
index

[8] Instance methods (rendering)

getRenderedLeft ()
getRenderedTop ()
getRenderedWidth ()
getRenderedHeight ()

[9] Instance methods (stringify)

getFullLabel ()
toString ()

NR.Rect

[6] Constructor and public class methods

new NR.Rect (top, right, bottom, left, width, height)
One of top, bottom, and height and one of left, right, and width can be omitted. If one of arguments that cannot be omitted is not a number, then the invalid flag is set.
NR.Rect.trbl (top, right, bottom, left)
NR.Rect.trblCSS (element, top, right, bottom, left)
Same as NR.Rect.trbl except that top, right, bottom, left are interpreted as CSS <length> in the context of element.
NR.Rect.tlwh (top, left, width, height)
NR.Rect.wh (width, height)
top = 0, left = 0
NR.Rect.whCSS (element, width, height)
Same as NR.Rect.trbl except that width, height are interpreted as CSS <length> in the context of element.

[1] Instance attributes

top
right
bottom
left
width
width == right - left; width > 0
height
height == bottom - top; height > 0

[29] Instance methods (properties)

isZeroRect ()
Return if width == 0 and height == 0.

[7] Instance methods (operations)

add (NR.Vector)
top += arg.y; left += arg.x
add (NR.Band)
top -= |arg.top|; right += |arg.right|; bottom += |arg.bottom|; left -= |arg.left|
subtract (NR.Vector)
top -= arg.y; left -= arg.x
subtract (NR.Band)
top += |arg.top|; right -= |arg.right|; bottom -= |arg.bottom|; left += |arg.left|
getTopLeft ()
new NR.Vector (left, top)

NR.Vector

[11] Constructor

new NR.Vector (x, y)

[2] Instance attributes

x
y
width
|-x|
height
|-y|

[13] Instance methods (operations)

negate ()
new (-x, -y)
add (NR.Vector)
x += arg.x; y += arg.y
subtract (NR.Vector)
x -= arg.x; y -= arg.y

NR.Band

[15] Constructor

new NR.Band (t, r, b, l)

[3] Instance attributes

top
right
bottom
left

[14] Instance methods (oprerations)

add (NR.Band)
top = |top| + |arg.top|; ...
and (NR.Band)
top = arg.top != 0 ? this.top : 0, ...
getTopLeft ()
new NR.Vector (-|top|, -|left|). A vector that represents the top left corner of the outer edge from the top left corner of the inner edge.

NR.Element

[16] NR.Element.getPixelWH (element, width, height)

Converts two CSS <length>s into pixel-unit in the context of element. Return {width: pixel-width, height: pixel-height}.

NR.Element.getCumulativeOffsetRect

[18] NR.Element.getBoxAreas (element, window)

margin

Margin area of the element.

Supported browsers: All.

border

Border area of the element.

Supported browsers: All.

padding

Padding area of the element.

Supported browsers: All.

[19] NR.Element.getAttrRects (element)

offset

Box represented by offset* attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

client

Box represented by client* attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

scrollableArea

Box represented by scrollWidth and scrollHeight attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

scrollState

The point represented by scrollTop and scrollLeft attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

[17] NR.Element.getCumulativeOffsetRect (element, window)

Offset box of the element. If margin collapsing occurs for the html and/or body elements, the result is wrong.

Origin: position-absolute-origin.

Supported browsers: WebKit and Opera. In Gecko and WinIE the result might be incorrect.

[20] NR.Element.getRects (element, window)

contentBox

The content box generated by the element. It might be wrong when the paddingBox is wrong.

Origin: The position-absolute origin.

Supported browsers: All.

paddingBox

The padding box generated by the element. It might be wrong when the borderBox is wrong. In addition, if the element is the html element or the body element, the result might be wrong.

Origin: The position-absolute origin.

Supported browsers: All.

borderBox

The border box generated by the element.

  • If the element generates an inline box, the result might be wrong.
  • In Gecko standard mode with both html and body element has overflow property specified, the result might be wrong.
  • If the element is the html element or the body element, the result might be wrong.
  • In Safari and margin collapsing occurs for the html and/or body elements.
  • In Safari and its offset* attributes do not return reasonable values (e.g. td:first-child).

Origin: position-absolute-origin.

Supported browsers: All.

marginBox

The margin box generated by the element. It might be wrong when the borderBox is wrong.

Origin: position-absolute-origin.

Supported browsers: All.

boundingClient

The box returned by getBoundingClientRect method of the element.

Origin: Browser-dependent.

Supported browsers: Gecko, Opera, and WinIE.

margin, border, padding

Same as >>18 getBoxAreas.

[28] NR.Element.getRectsExtra (element, window)

boxObject

The box returned by getBoxObjectFor method.

Origin: Browser-dependent.

Supported browser: Gecko.

boxObjectScreen

The box returned by getBoxObjectFor method.

Origin: The top left corner of the screen.

Supported browser: Gecko.

textRangeBounding (instanceof NR.Rect)

The box returned by bounding* attributes of TextRange object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

textRangeBoundingClient (instanceof NR.Rect)

The box returned by getBoundingClientRect method of TextRange object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

textRangeOffset (instanceof NR.Vector)

The point returned by offset* attributes of TextRange object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

NR.View

[30] NR.View.getBoundingClientRectOrigin (window, document)

The origin of the getBoundingClientRect method, measured by inserting an element into the document.

Origin: The position-absolute origin.

Supported browsers: WinIE, Opera, and Gecko.

[21] NR.View.getViewportRects (window)

canvasOrigin (instanceof NR.Vector)

The origin of the canvas.

Origin: The position-absolute origin.

Supported browsers: All.

boundingClientOrigin (instanceof NR.Vector)

The origin of the rect returned by the getBoundingClientRect method.

Origin: The position-absolute origin.

Supported browsers: All.

icb (instanceof NR.Rect)

The initial containing block.

Origin: The position-absolute-origin.

Supported browsers: All.

contentBox (instanceof NR.Rect)

The content area of the viewport (not including scrollbars and border area).

Origin: The position-absolute-origin.

Supported browsers: All.

scrollState (instanceof NR.Vector)

The top left corner of the inner edge of the viewport.

Origin: The top left corner of the canvas.

Supported browsers: All.

windowPageOffset (instanceof NR.Vector)

The point returned by window.pageXOffset and window.pageYOffset attributes.

Origin: The top left corner of the canvas.

Supported browsers: WebKit, Gecko, and Opera.

deOffset, deClient, deScrollableArea, deScrollState

The document element's boxes.

bodyOffset, bodyClient, bodyScrollableArea, bodyScrollState

The body element's boxes.

[27] NR.View.getViewportRectsExtra (window)

windowInner (instanceof NR.Rect)

The entire viewport, including scrollbars.

Origin: The top left corner of the viewport.

Supported browsers: WebKit, Gecko, and Opera.

windowScrollXY (instanceof NR.Vector)

The point returned by window.scrollX and window.scrollY attributes.

Origin: The top left corner of the canvas.

Supported browsers: WebKit and Gecko.

windowScrollMax (instanceof NR.Vector)

The point represented by (window.scrollMaxX, window.scrollMaxY).

Origin: N/A.

Supported browsers: Gecko.

document (instanceof NR.Rect)

The box represented by document.width and document.height attributes.

Origin: Browser-dependent.

Supported browsers: WebKit and Gecko.

[22] NR.View.getWindowRects (window)

outer (instanceof NR.Rect)

The rect representing the browser window.

Origin: The top left corner of the browser window.

Supported browsers: WebKit, Gecko, and Opera.

screenXY (instanceof NR.Vector)

The top left corner of the browser window.

Origin: The top left corner of the screen.

Supported browsers: WebKit, Gecko, and Opera (broken).

screenTL (instanceof NR.Vector)

The top left corner of the browser window.

Origin: The top left corner of the screen.

Supported browsers: WebKit, Gecko, and WinIE.

[23] NR.View.getScreenRects (window)

device (instanceof NR.Rect)

The rect representing the screen.

Origin: In Gecko, the origin of the screen coordinate space. In WebKit, Opera, and WinIE, the top left corner of the screen.

Supported browsers: All.

avail (instanceof NR.Rect)

The available area in the screen.

Origin: In WebKit and Gecko, the top left corner of the screen. In Opera and WinIE, the top left corner of the available area.

Supported browsers: All.

NR.Event

[31] NR.Event.getRects (event, window)

canvas (instanceof NR.Vector)

The mouse event location in the canvas.

Origin: The position-absolute origin.

Supported browsers: All.

viewport (instanceof NR.Vector)

The mouse event location in the viewport.

Origin: The position-absolute origin.

Supported browsers: All.

client (instanceof NR.Vector)

The clientX/clientY value.

Origin: The top left corner of the canvas visible area.

Supported browsers: All.

offset (instanceof NR.Vector)

The offsetX/offsetY value.

Origin: Browser-dependent.

Supported browsers: WebKit, Opera, WinIE.

[32] NR.Event.getRectsExtra (event)

screen (instanceof NR.Vector)

The screenX/screenY value.

Origin: The top left corner of the screen.

Supported browsers: All.

wh (instanceof NR.Vector)

The width/height value.

Origin: Browser-dependent.

Supported browser: NC4.

page (instanceof NR.Vector)

The pageX/pageY value.

Origin: Browser-dependent.

Supported browsers: Gecko, WebKit, Opera.

layer (instanceof NR.Vector)

The layerX/layerY value.

Origin: Browser-dependent.

Supported browsers: Gecko, WebKit.

xy (instanceof NR.Vector)

The x/y value.

Origin: Browser dependent.

Supported browsers: WebKit, Opera, WinIE.

NROnLoad

[26] If a function NROnLoad of the global scope is defined, it is invoked when all of the classes defined in the NodeRect.js are loaded.

Definition

[25] The position-absolute origin is the top left corner of the box that would be generated from a child element with position: absolute; top: 0; left: 0 of the body element. It is same as the origin of the canvas, according to the CSS 2.1 specification. However, in Gecko, it is instead the top left corner of the padding edge of the box generated by the root element.

Example

[33] See NodeRectViewer.js, an interactive user interface for the NR.js.

Known problems

[34] rtl support

[35] non-HTML elements

[36] iframe/frame

Updated: