CODEWITHSUNDEEP
javascripthtmlcssangularjs-ng-repeatopacity
Ricky Dam
Ricky Dam

Reputation: 1895

How to lower opacity on everything else on screen except the selected ng-repeat item?

I've looked everywhere on StackOverflow and there doesn't seem to be anyone else solving this issue or I'm just using the wrong wording or keywords which results in me not finding what I want. If that's the case and this is a duplicate, I would be glad if you could link me to a case like this. Thanks.

I have an HTML/CSS, AngularJS, PHP and MySQL project.
POST and GET requests work perfectly.
What I'm trying to do is similar to what is already done on Google Keep.
When the user clicks on the blue pencil, I want the opacity on the selected item to be 100% but all the parents divs and sibling divs at opacity value 0.3 or something.

I would like to try and avoid jQuery if possible.
I believe I read somewhere that it is bad practice to use a whole bunch of frameworks together and that when you use a framework, that you should stick with it.

I have no idea how to approach this problem.
I don't even know where to start.

Could you please also provide me with a working example JSFiddle or Plnkr please?

Any help or suggestion would be greatly appreciated!
Thanks in advance!

What I want

What I want

What I have

What I have

HTML 

<body ng-app="myApp">
  <font face="Source Sans Pro">

    <div class="left">
      <center>
        <div ng-controller="insertController">
          <h2> What I learned today </h2>
          <form>
            Date <br>
            <input type="text" ng-model="date"><br><br>
            Content <br>
            <textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
            <input type="button" value="Submit" ng-click="insertdata()">
          </form>
        </div>
      </center>
    </div>

    <div class="right">
      <center>
        <div ng-controller="fetchController"><br>
          <span ng-repeat="item in results">
            <div class="card">
              <div class="theText">
                <span class="bold-underline">{{item.date}}</span><br>
                {{item.content}}
              </div>
              <div ng-controller="deleteController">
                <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
              </div>
              <div ng-controller="editController">
                <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
              </div>
            </div>
            <br><br>
          </span>
        </div>
      </center>
    </div>
  </font>
</body>

EDIT
I just got it working.

Got it working

New HTML 

<div class="right">
  <center>
    <div ng-controller="fetchController"><br>
      <span ng-repeat="item in results">
          <div ng-controller="fadeController">
            <div class="card" ng-class="cardFade">
              <div class="theText">
                <span class="bold-underline">{{item.date}}</span><br>
                {{item.content}}
              </div><!-- theText -->
              <div ng-controller="deleteController">
                <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
              </div><!-- deleteController -->
              <div ng-controller="editController">
                <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
              </div><!-- editController -->
            </div><!-- card -->
          </div><!-- fadeController -->
        <br>
      </span><!-- ng-repeat -->
      <div class="overlay"></div>
    </div><!-- fetchController -->
  </center>
</div><!-- right -->

New CSS 

.someCSS {
  background-color: white;
  z-index: 200;
  opacity: 1;
}

.noCSS {
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
  z-index: 100;
  pointer-events: none; /* required to be able to click buttons under overlay */
}

fadeController.js 

app.controller("fadeController", function($scope, $http, resultsService) {
  $scope.cardFade = "noCSS";
  $scope.editThisItem = function(item) {
    if($scope.cardFade === "noCSS") {
      $scope.cardFade = "someCSS";
    }
    else if($scope.cardFade === "someCSS") {
      $scope.cardFade = "noCSS";
    }
    else {
      alert("FATAL ERROR!");
    }
  };
});

Upvotes: 0

Views: 271

Answers (1)

ShukiB
ShukiB

Reputation: 76

you can add a div as overlay

<div class="overlay"></div>

.overlay {
    backgound-color: gray;
    opacity: 0.5;
    z-index: 100; //<= so the overlay with cover the page
}

next you will need to add a css class like this

.someCss {
    z-index: 101; // <=so it would be on top on the overlay
}

and it will be added to the ng-repeat element when you click on the blue pencil.

I would even go and make the class as ng-class ng-class

so it would be something like this:

  <span ng-repeat="item in results">
    <div class="card" ng-class="{someCss : item.selected}">
      <div class="theText">
        <span class="bold-underline">{{item.date}}</span><br>
        {{item.content}}
      </div>
      <div ng-controller="deleteController">
        <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
      </div>
      <div ng-controller="editController">
        <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
      </div>
    </div>
    <br><br>
  </span>

and now on the blue pencil click you can add the property selected or change it

Upvotes: 1

Related Questions