Monday 6 June 2016

Create a Gray out above any element or in Div Tag in HTML5 using angular js (Custom element tag ngZLayer )



In this blog post we are going to see how to gray out above any element tags, using angular js, so to do we are going to create a custom element which will make the child element of that tag to Grayout using the property value as true, when the property value as false , it will remove the gray out above the div or element.


Steps to do :


add the following line
<script type="application/javascript" src="ang/ng-zLayer.js"></script>

place an element above the element which you want to grayout dynamically or statically .
<ng-z-layer value="second"></ng-z-layer>

set the value to true to gray out or false to display as normal




Code:
Html

<body ng-app="valueApp">
<div ng-controller="sample">

    <div>
        <input type="button" value="Change First Value" ng-click="ChangeF()">
        <input type="button" value="Change Sec Value" ng-click="ChangeS()">
    </div>
     <br/>

    <ng-z-layer value="first">
    <div style="background-color:darkblue;width400px;height200px;;margin10px">

        <form>
            <table style="margin10px">
            <fieldset style="color#ffffff">Employee Registration</fieldset>
           <tr><td> <label style="color#ffffff">user Name</label></td>
                <td><input type="text" /></td></tr>
           <tr><td> <label style="color#ffffff">Address</label></td>
                <td><input type="text" /></td></tr>
           <tr><td></td>
             <td><input type="button" value="Submit" style="color#000000"> </td></tr>
            </table>
        </form> 
    </div>
    </ng-z-layer>

    <ng-z-layer value="second">
    <div style="background-colororangered;width300px;height200px;margin:10px">
        <form style="margin10px">
            <fieldset>Student Registration</fieldset>
            <label>Student Name</label><input type="text" />
            <label>Class</label><input type="text" />
            <input type="button" value="Submit">
        </form>

    </div>
    </ng-z-layer>

    </div>
    </body>





Code
Javascript


var valueApp = angular.module('valueApp', []);
valueApp.controller('sample'function ($scope) {
    $scope.first = false;
    $scope.second = false;

    $scope.ChangeF = function () {
        $scope.first = !$scope.first;
    };

    $scope.ChangeS = function () {
        $scope.second = !$scope.second;
    };

});




/**
 * Created by Rajesh on 09-10-2014.
 */

angular.module('ngZLayer.directive', [])
.directive('ngZLayer'function () {

    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        link: function (scope, element, attrs, cntrl) {

            scope.ChangeVisible = function () {
                if (scope.value != undefined) {
                    if (scope.value == true) {
                        element.css('opacity''0.5');
                        element.css('pointer-events''none');
                        element.css('z-index''20');
                        element.css('display''block');
                        element.css('filter''alpha(opacity = 55)');
                        element.css('width', element.child().css('width'));
                        element.css('height', element.child().css('height'));
                    }
                    else {
                        element.css('opacity''1');
                        element.css('pointer-events''all');
                    }
                }
            };  


            scope.$watch('value'function () {
                if (scope.value != undefined) {
                    scope.ChangeVisible();
                }
            });

        }
    }
});

angular.module('ngZLayer', ['ngZLayer.directive']);




Output:



Before Gray out





After Gray out dynamically in button click










From this post you can learn how to gray out above any element using the custom element tag ngZLayer.







No comments:

Post a Comment