pos-view #
Description ##
Pos-view is an HTML custom element that displays a set of values related to an element's positioning.
There are two floating windows in which the information is output:
+ position (pos)
+ offset hierachy (offset)
$3
The following values of an element are displayed:
+ the "client" values of the element:
+ clientLeft
+ clientTop
+ clientWidth
+ clientHeight
+ the "offset" values of the element:
+ offsetLeft
+ offsetTop
+ offsetWidth
+ offsetHeight
+ the "scroll" values of the element:
+ scrollLeft
+ scrollTop
+ scrollWidth
+ scrollHeight
+ the result of element.getBoundingClientRect:
+ x
+ y
+ top
+ right
+ bottom
+ left
+ width
+ height
$3
This window shows the hierarchy of the offset values. Starting from the observed element (see parameter "sourceID"), the hierarchy is determined recursively via "offsetParent". The following values are returned for each level:
+ offsetLeft
+ offsetTop
+ offsetWidth
+ offsetHeight
$3
There is also (optionally) another floating window (win-start) from which the other two windows can be toggled on and off.
Parameter ##
$3
Id of the element whose position information is to be output.
$3
#### noWinStart - no parameter value ####
By default, a small window is displayed with which you can hide and show the other two windows. If the "noWinStart" parameter is passed, then this window is not displayed. In this case at least one of the following parameters must be set "posWin" or "offsetWin" see below.
#### winPos #####
If the "winPos" parameter is passed, the position window is displayed.
If the "noWinStart" parameter was not passed, the window with the position information, can be called from the start window. Then the "winPos" parameter does not necessarily have to be passed. However, if it is passed, the window is also displayed immediately.
#### winOffset #####
If the "winOffset" parameter is passed, the window with the offset hierarchy is displayed.
If the "noStartWin" parameter was not passed, then the window with the offset hierarchy can be called from the start window. then the "winOffset" parameter does not necessarily have to be passed. However, if it is passed, the window is also displayed immediately.
$3
Parameters to position the windows for the first time.
If no positioning parameter is passed, the windows are automatically placed:
+ winStart: above the observed element
+ winPos:
+ if winStart exists: To the right of winStart and so that the bottom line is level with winStart
+ if winStart does not exist: above the observed element
+ winOffset:
+ if winPos exists: To the right of winPos and so that the bottom line is level with winPos
+ if winPos does not exist:
+ if winStart exists: To the right of winStart and so that the bottom line is level with winStart
+ if winStart does not exist: above the observed element
+ winStartLeft
+ winStartTop
+ winPosLeft
+ winPosTop
+ winOffsetLeft
+ winOffsetTop
The value of the attribute must be a unitless number. The number is interpreted as pixels.
If you put a plus or minus sign in front of the number (without spaces)
, then the value is used to add or subtract it from the automatically calculated value.
You can also specify only one of the values (left or top), the other will then be assigned automatically (see above).
You can also set the position for just one window. The other windows then also use the automatic positioning.
For example, if you specify winStartLeft and winStartPos, then the positioning of winPos and winOffset orients itself to the position of winStart.
$3
If you don't use any of the following attributes, then all rows are displayed.
#### posAllOn - no parameter value ####
If this attribute is passed, the meaning of the following attributes "posClient", "posOffset", "posScroll", "posBoudrect" is reversed.
#### posClient - no parameter value ####
The effect of this parameter depends on whether the "posAllOn" parameter was passed.
If only "posClient" is passed, then the line with the client values is displayed.
If "posAllOn" was also passed, then the row with these values will be hidden.
#### posOffset - no parameter value ####
The effect of this parameter depends on whether the "posAllOn" parameter was passed.
If only "posOffset" is passed, then the line with the offset values is displayed.
If "posAllOn" was also passed, then the row with these values will be hidden.
#### posScroll - no parameter value ####
The effect of this parameter depends on whether the "posAllOn" parameter was passed.
If only "posScroll" is passed, then the line with the scroll values is displayed.
If "posAllOn" was also passed, then the row with these values will be hidden.
#### posBoudrect - no parameter value ####
The effect of this parameter depends on whether the "posAllOn" parameter was passed.
If only "posBoudrect" is passed, then the line with the client values is displayed.
If "posAllOn" was also passed, then the row with these values will be hidden.
This values are generated by "getBoundingClientRect" call by the "sourceID" element.
Styling ##
$3
In order to be able to highlight individual values, a "part" attribute was assigned to all elements.
The following is a list of all values relating to the position window:
#### Line offset ####
+ offsetLabel
+ offsetLeft
+ offsetTop
+ offsetWidth
+ offsetHeight
#### Line client ####
+ clientLabel
+ clientLeft
+ clientTop
+ clientWidth
+ clientHeight
#### Line scroll ####
+ scrollLabel
+ scrollLeft
+ scrollTop
+ scrollWidth
+ scrollHeight
#### Line boundRect ####
+ rectLabel
+ rectLeft
+ rectTop
+ rectWidth
+ rectHeight
+ rectX
+ rectY
+ rectRight
#### header ####
+ posLabelHead
+ posLeftHead
+ posTopHead
+ posWidthHead
+ posHeightHead
+ posXHead
+ posYHead
+ posRightHead
+ posBottomHead
$3
In order to be able to highlight individual values, a "part" attribute was assigned to all elements.
The following is a list of all values relating to the offset window:
The last entry in the offset hierarchy is the offset value of the observed element (sourceId).
This line has the number 0 in the part name.Then comes the parent, this has the number 1 in the part name.
And if there is another parent, then this has the number 2 and so on.
#### header ####
+ offsetHLabelHead
+ offsetHLeftHead
+ offsetHTopHead
+ offsetHWidthHead
+ offsetHHeightHead
#### Last row with offset of the observed element ####
+ offsetH-0Label
+ offsetH-0Left
+ offsetH-0Top
+ offsetH-0Width
+ offsetH-0Height
##### first (offset) parent of the observed element
+ offsetH-1Label
+ offsetH-1Left
+ offsetH-1Top
+ offsetH-1Width
+ offsetH-1Height
The window in general ##
More information about the display of the window itself can be found in the "floating-window" package, which is used as a frame for the content.
Here is the list of part attribut values:
+ floating-win
+ floating-win-main-frame
+ floating-win-head
+ floating-win-head-title
+ floating-win-head-closer
+ floating-win-body
$3
The following CSS directive highlights the value for "clientLeft".
``
css
::part(clientLeft) {
background-color: darkred;
color: white;
}
`
If is installed several times on the page and you want to style the custom elements differently,
you could, for example, combine the part selector with an id selector.
`
html
`
`
css
pos-view[id="view-1"]::part(clientLeft) {
background-color: darkred;
color: white;
}
``