The magic weapon to get the position of element in front

In front-end development, we often need to locate an element. such as tooltip, PopOver, or modal, maybe we need to position them around the dependent element or in the center of the screen scrolling screen. This is not a difficult thing for a code farmer to develop at the front end. Calculates the offset of the dependent element and sets the left and right of the element. For a slightly more complex scenario we may need to consider the ancestor elements that are positioned.

But often not all things are so simple. The author recently encountered a problem in the development of the project: the HTML here is embedded, from the Jpedal commercial software generated automatically from the PDF file, in order to show the style, Jpedal unified use Position:absolute and relative to locate the PDF element. However, due to business needs, we need to manipulate this kind of HTML. One requirement is to display the Action toolbar near each paragraph of text.

For this kind of unknown DOM positioning, then we need to traverse its DOM tree to calculate its relative position. Behavior, the following code:

    function isStaticPositioned(element) {      return (getStyle(element, ‘position‘) || ‘static‘ ) === ‘static‘;    }    var parentOffsetEl = function(element) {      var docDomEl = $document[0];      var offsetParent = element.offsetParent || docDomEl;      while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent) ) {        offsetParent = offsetParent.offsetParent;      }      return offsetParent || docDomEl;    };

Here, we will query the nearest ancestor element in the DOM tree in which it is located, based on the element recursively, before calculating their relative position. Positioned

This is a source of $position services from Angular-ui Bootstrap. This is the magic weapon that this article will refer to to get location elements. Its source location in Https://github.com/angular-ui/bootstrap/blob/master/src/position/position.js.

The $position service provides us with 3 useful location services: position, offset, and positionelements. Position is an object that calculates the location of a specific element, returns a width, height, top, left, and positionelements returns an element relative to its dependent container element, an object with a top and a left.

In order to test this write API, I wrote a specific instruction in Jsbin:

Javascript:

angular.module("com.ngbook.demo", [‘ui.bootstrap.position‘]).directive(‘position‘, [‘$position‘, function($position){    return {        restrict: ‘EA‘,        templateUrl: ‘/position.html‘,        scope:{            title:"@"        },        link:function(scope, elm, iAttrs){        scope.data =  $position.position(elm);       }    };}]);

Html:

<script type="text/ng-template" id="/position.html">   <table class="table">       <thead>           <th colspan="2"></th>       </thead>    <tbody>       <tr ng-repeat="field in [‘width‘, ‘height‘, ‘left‘, ‘top‘]">       <td></td>       <td></td>     </tr>    </tbody>   </table> </script>

So we can test this type of API as follows:

<position title ="no positioned parent"></position><div style="position: relative;padding:50px;">    <position title ="relative parent"></position>     <div style="position: absolute;top:250px; padding:50px;">         <position title="relative->absolute parent"></position>     </div> </div> <div style="position: absolute;top:0px;left:250px; padding:50px;">         <position title="absolute parent"></position> </div>

The effect can be Jsbin Demo:

You can also see a test of it in the official documentation: Https://github.com/angular-ui/bootstrap/blob/master/src/position/test/test.html.

Simply put: If we need to get the positioning information of an element, we can use the $position. Position (Element), and get the positioning relative to the fixed element, you can use $position.positionelements (hostEl, Targetel, Positionstr, Appendtobody). Where Positionstr is a horizontal and vertical string, such as: "Top-left", "Bottom-left". Its default value is center. The toolbar is displayed in the upper-left corner of a text paragraph, as expected by the author project:

$position.after($toolbar);var elPosition = $position.positionElements($paragraph, $toolbar, “top-left”);$toolbar.css({left: elPosition.left + ‘px‘, top: elPosition.top + ‘px‘});

Of course, do not forget to set position:absolute for toolbar elements;

The magic weapon to get the position of element in front