Thursday, November 17, 2016

Example

Html Content

<div class="load-more-option"></div>

CSS Content

<style type="text/css">
    .load-more-option, .load-more-option:before, .load-more-option:after {
        border-radius: 50%;
        width: 2.5em;
        height: 2.5em;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: load_more_options 1.8s infinite ease-in-out;
        animation: load_more_options 1.8s infinite ease-in-out;
    }
    .load-more-option {
        color: #37829e;
        font-size: 10px;
        margin: 80px auto;
        position: relative;
        text-indent: -9999em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    .load-more-option:before, .load-more-option:after {
        content: '';
        position: absolute;
        top: 0;
    }
    .load-more-option:before {
        left: -3.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    .load-more-option:after {
        left: 3.5em;
    }
    @-webkit-keyframes load_more_options {
        0%,
        80%,
        100% {
            box-shadow: 0 2.5em 0 -1.3em;
        }
        40% {
            box-shadow: 0 2.5em 0 0;
        }
    }
    @keyframes load_more_options {
        0%,
        80%,
        100% {
            box-shadow: 0 2.5em 0 -1.3em;
        }
        40% {
            box-shadow: 0 2.5em 0 0;
        }
    }
</style>

Another Example Given Below

Example

HTML Content

<div class="loader"></div>
<div class="loader2"></div>

CSS Content

.loader {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid lightgray;
  border-top: 4px solid #3498db;
  border-bottom: 4px solid #3498db;
  animation: spinxxx 2s linear infinite;
  -webkit-animation: spinxxx 2s linear infinite;
}
.loader2{
  width: 80px;
  height: 80px;
  margin: 16px;
  margin-top: -107px;
  margin-left: 20px;
  border-radius: 50%;
  border: 4px solid lightgray;
  border-top: 4px solid #3498db;
  animation: spinxxx2 2s linear infinite;
  -webkit-animation: spinxxx2 2s linear infinite;
}

@-webkit-keyframes spinxxx {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinxxx {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes spinxxx2 {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes spinxxx2 {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

Wednesday, November 16, 2016

Angular-js infinity scroll to load more data on window or other element scrolling

<!DOCTYPE html>
<html>
    <head>
        <title>Infinite scrolling to load more data using angular-js</title>
        <style type="text/css">
            div.scroll-test {
                height: 100%;
                background: #123213;
                color: #fff;
                overflow: auto;
                margin: 0 auto;
                padding: 0.5em;
            }
        </style>
        
        <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        
        <script type="text/javascript">
            var app = angular.module("myApp", []);
           
            app.controller("ScrollController", function($scope, $http) {
                $scope.items = ["You have to scroll down to load more items..."];
                $scope.loading = false;
                $scope.counter = 0;
                $scope.rows = 1;
                
                var s = "----------------------------------------------------";
                s += "-------------------------------------------------------";
                s += "-------------------------------------------------------";
                
                $scope.loadMore = function() {
                    if(!$scope.loading) {
                        $scope.loading = true;
                        $http({
                            method: "GET",
                            url: "http://localhost/scroll/data.html?counter=" + ($scope.counter++)
                        }).success(function(data, status, header, config) {
                            $scope.loading = false;
                            data = data.split("\n");
                            for(i = 0; i < data.length - 1; i++) {
                                $scope.items.push(($scope.rows++) + "=" + data[i]);
                            }
                            $scope.items.push(($scope.rows++) + s);
                        });
                    }
                };
                
                var params = {};
                window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
                    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
                });
                var type = params.type === undefined ? '' : params.type;
                
                $scope.window = true;
                if(type == 'window') {
                    //Initializing the list
                    $scope.loadMore();
                }
                else if(type == 'div') {
                    $scope.window = false;
                    $("div.scroll-test").height(window.innerHeight - 130);
                    //Initializing the list
                    $scope.loadMore();
                }
                else {
                    $scope.items.push("You have to define 'type' parameter in url & value would be 'window' or 'div' as ?type=window");
                }
            });
            
            app.directive("windowScroll", function ($window) {
                return function(scope, element, attrs) {
                    angular.element($window).bind("scroll", function() {
                        if(scope.window && $window.pageYOffset + $(window).height() + 50 >= $(document).height()) {
                            scope.$apply(attrs.windowScroll);
                        }
                    });
                };
            });
           
            app.directive("divScroll", function() {
                return {    
                    restrict: 'A',
                    link: function(scope, element, attrs) {
                        var raw = element[0];
                        element.bind("scroll", function() {
                            if(!scope.window && raw.scrollTop + raw.offsetHeight + 50 >= raw.scrollHeight) {
                                scope.$apply(attrs.divScroll);
                            }
                        });
                    }
                }
            });
        </script>
    </head>

    <body>
         <div data-ng-app="myApp" data-window-scroll="loadMore()" data-ng-controller="ScrollController">
             <div>
                 <div class="scroll-test" data-div-scroll="loadMore()">
                     <p data-ng-repeat="item in items">
                         {{item}}
                     </p>
                 </div>
                <h1><i>INFINITE SCROLLING IN ANGULAR-JS<span data-ng-show="loading"> (Loading items...)</span></i></h1>              
             </div>       
         </div>
    </body>
</html>

jQuery get params from url

var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
});
console.log(params);

Tuesday, November 15, 2016

GIT: Updates were rejected because a pushed branch tip is behind its remote

git push -f

The -f makes this a "forced push" and overwrites the branch on the working branch on the server. That would be gone wrong when you are working with other team members. But you can force push when you sure that your local state is correct then it should be fine. You risk losing commit history if that is not the case.

GIT: How to show changed made on files on branch by commit

It will display file changes between two commits (file names only):
git diff OLDER_COMMIT RECENT_COMMIT --name-status

It will display file changes between two commits:
git diff OLDER_COMMIT RECENT_COMMIT

It will display file changes between local changes and specific commit:
git diff COMMIT_NUMBER

Monday, November 14, 2016

Git, see list of latest commits

To see list of commits:
git log

List of commits with file name & status:
git log --name-status

List of previous n commits
git log --name-status -n 2

List of commits by author name:
git log --name-status --author=Pritom (Case sensitive)

List of commits search by file name:
git log --name-status -n 2 --author=pritom | grep "Search"

GIT: How to show the changes on specific commit

Type the following to git bash to show all changes:
git show COMMIT_NUMBER

To show difference between a specific file type:
git show COMMIT_NUMBER file_location/file_name

Type following to show file list changed on the commit:
git show COMMIT_NUMBER --name-status

Will output following:
M location/file_name (Modified)

A location/file_name (Added New)

Pages

Thursday, November 17, 2016

Stylish CSS3 Loader

Example

Html Content

CSS Content

Another Example Given Below

Example

HTML Content

CSS Content

Wednesday, November 16, 2016

Angular-js infinity scroll to load more data on window or other element scrolling

jQuery get params from url

Tuesday, November 15, 2016

GIT: Updates were rejected because a pushed branch tip is behind its remote

GIT: How to show changed made on files on branch by commit

Monday, November 14, 2016

Git, see list of latest commits

GIT: How to show the changes on specific commit