CODEWITHSUNDEEP
javascriptangularjs
trap
trap

Reputation: 2640

Position in AngularJs

I am using an eyeTracker, and want to change the UI, dependent on the Eyetrackerpositon.

I want to define areas in my Site. And if the eyeTrackerPosition is (stands) in the area, then i want to change for example the color of the area.

In this case the areas are the directives.

But how does it works with the positions? Because I need than the screen coordinates.

Do you have any idea how it is possible?

How can I query if the position contains the area? With an array?

Upvotes: 0

Views: 77

Answers (2)

trap
trap

Reputation: 2640

Hi I used the method you suggested. 

myApp.directive('hasFocus', function ($interval) {
return {
    restrict: 'A',
    scope: {
    },
    templateUrl: '123/Scripts/directives/route.html',
    link: function (scope, element, attrs) {
        $interval(function () {
            var rect = element[0].getBoundingClientRect();

            x = rect.left;
            y = rect.top;
            w = rect.right - rect.left;
            h = rect.bottom - rect.top;

           // element.text(x + ", " + y + ", " + w + ", " + h);

        }, 3000);
     }
   };
});

And it is working.

But now I the positions of my panel in the link. the panel i defined in the route.html.

route.html:

<div class="panel panel-primary">

<div class="panel-heading">Panel heading</div>      <!-- i want this position-->
<div class="panel-body">
    <!--table-->
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 0

LoremIpsum
LoremIpsum

Reputation: 4428

A good starting point to determine the position/size of an HTML element is to use getBoundingClientRect. It returns an object that contains left, top, width and height for any DOM element. More on this here : https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Upvotes: 1

Related Questions