RollerDerby February 2016

angularjs:-Image loader coming on the first div

Hi I wanted to implement a loader which when the user clicks on a profile should hide after a given time..I have actually implemented a timeout function which as soon as the user clicks on the button the div hides after a specific time.

The loader is coming on the left and not on the respective div which is causing issues in the UI

The below is my code snippet:-

   $scope.totalNumberOfProfile = totalNumberOfProfile;
        $scope.categoryOfProfile = "Member Who Shortlisted You";

        $scope.custom = true;
        $scope.alertDisplayed = false;
        $scope.connect = function(profile) {

            $timeout(function() {
                $scope.totalNumberOfProfile--;
                profile.show = false;
                profile.status = "connect";
                document.getElementById("myDiv").style.display="block";
                //console.log($scope.totalNumberOfProfile);
                if ($scope.totalNumberOfProfile == 0) {
                    $scope.custom = false;
                    $scope.alertDisplayed = true;
                    $timeout(function() {
                        $scope.alertDisplayed = false;
                    }, 2000)
                };
            }, 600)



        };

The html of the code is:-

<div owl-carousel-item="" ng-repeat="profile in updatedProfile | filter:isoffice" ng-if="profile.show">

                    <!-- Panel in owl carousel -->
                    <div id="discover " ng-class="discover_image" ng-switch on="profile.member">

                        <li style="margin-left:0px; margin-right:0px">
                            <div class="thumbnail_photo">
                                <button class="close" ng-click="remove(profile)"><span class="glyphicon glyphicon-remove"></span></button>
                                <a href="#/discover/{{profile.basic.username}} " target="_blank">&l        

Answers


Sanjay Nishad February 2016

You should add these CSS property with your loader div.

#myDiv {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
}

Post Status

Asked in February 2016
Viewed 3,255 times
Voted 12
Answered 1 times

Search




Leave an answer