4

Estoy tratando de posicionar el cuadro azuldependiendo del cuadro al que le doy click, es decir que si le doy click al cuadro verde, el cuadro azul debe de bajar hasta donde esta el cuadro verde,no puede quedar arriba del todo, debe quedar como si le colocara la propiedad top: 500px; de css o algo así.

<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>

Este es el error de offsetTop que me muestra en 0

1 respuesta 1

3

He hecho los siguientes cambios a tu código:

  1. He añadido $event como parámetro en la funciones que se llaman desde el ng-click. Esto es para poder luego leer el elemento sobre el que se hizo click.
  2. Al elemento que queremos posicionar, le he añadido un ng-style (con valor "miEstilo") y en los estilos CSS le he puesto una posición relativa (para que al cambiar el top se mueva.
  3. En la función llamada, leo el elemento sobre el que se hizo click (con $event.currentTarget) y veo en qué posición desde arriba está situado (con offsetTop).
  4. Finalmente, cambio miEstilo para especificar el valor de top a tantos píxeles como se encuentre el elemento clickeado.

El código se ve así:

<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>

10
  • muchas gracias justamente lo que necesitaba.
    – zerokira
    Commented el 25 ene. 2018 a las 12:53
  • estoy aplicando tu respuesta pero me dice que no tiene offsetTop puedes mirar la pregunta editada para que veas la imagen...
    – zerokira
    Commented el 25 ene. 2018 a las 13:23
  • @Pablo ¿cómo están posicionados los elementos? ¿qué valor tiene en top?
    – Alvaro Montoro
    Commented el 25 ene. 2018 a las 13:26
  • pues no tienen nada en top, es '0'
    – zerokira
    Commented el 25 ene. 2018 a las 13:31
  • estoy usando una librería con bower_components, se llama angular-material-expasion-panel
    – zerokira
    Commented el 25 ene. 2018 a las 13:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.