Change position to the div when I click AngularJS

Question

Change position to the div when I click AngularJS

Navigation

#1 by (3 votes)

4

I am trying to position the box azul depending on the box to which I give click , that is, if I give click to the green box, the blue box should go down to where the green box is, not it can be at the top, it should be as if I put the property top: 500px; of css or something like that.

<html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function() {
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div style="height: 150px; background-color: blue;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

This is the error of offsetTop that shows me at 0

javascript jquery html css angularjs

asked by zerokira 24.01.2018 в 22:13

source

1 answer

Protect files with sensitive data in PHP Fatal error: Call to undefined function swal () - PHP

score 3 · Accepted Answer

I have made the following changes to your code:

I have added $event as a parameter in the functions that are called from ng-click . This is to be able to then read the element that was clicked on.

To the element that we want to position, I have added a ng-style (with value "myStyle") and in the CSS styles I have put a relative position (so that when changing the top moves.

In the function called, I read the element that was clicked (with $event.currentTarget ) and I see in which position it is located from above (with offsetTop ).

Finally, I change miEstilo to specify the value of top to as many pixels as the clicked element is.

The code looks like this:

<html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function($event) {

          $scope.miEstilo = {'top': $event.currentTarget.offsetTop + 'px'}
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div ng-style="miEstilo" style="height: 150px; background-color: blue; position: relative;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>