Code Samples

Saturday, December 10, 2016

Simple Loading Overlay Example

Download plugin from here

<!DOCTYPE html>
<html>
<head>
    <title>Loading Overlay Example</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="loading-overlay.js"></script>
    <style type="text/css">
        .loading {
            margin-left: 10%;
            margin-top: 20%;
            width: 80%;
            height: 200px;
            border: 1px solid blue;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="loading">
    <br/>HTML DIV ELEMENT
</div>
<script type="text/javascript">
    $(".loading").LoadingOverlay("show");
    setTimeout(function () {
        $(".loading").LoadingOverlay("hide");

        setTimeout(function () {
            $.LoadingOverlay("show");

            setTimeout(function () {
                $.LoadingOverlay("hide");
            }, 3000);
        }, 1000);
    }, 3000);
</script>
</body>
</html>

Make A Real-Time Chat Room using Node Js Server and Socket.io

Start using node js follow link

Download full code example from here

var http = require('http'),
    connect = require('connect'),
    express = require('express'),
    app = express(),
    ent = require('ent'),
    server = http.createServer(app),
    io = require('socket.io').listen(server);

app.use(express.bodyParser());

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/login.htm');
});
app.get("/login", function(req, res) {
    res.writeHead(302, {Location: '/'} );
    res.end();
});
app.post("/login", function(req, res) {
    var userName = "", group = "";
    try { userName = ent.decode(req.body.userName).trim(); } catch(e) {}
    try { group = ent.decode(req.body.group).trim(); } catch(e) {}
    if(userName.length == 0) {
        res.writeHead(302, {Location: '/?Error=Need User Name'} );
        res.end();
        return;
    }
    if(group.length == 0) {
        res.writeHead(302, {Location: '/?Error=Need Group'} );
        res.end();
        return;
    }
    res.writeHead(302, {Location: '/chat?UserName=' + userName + "&Group=" + group} );
    res.end();
});
app.get("/chat", function(req, res) {
    res.sendfile(__dirname + '/chat.htm');
});
//Static resource setup
app.use(express.static(__dirname + '/public'));

io.sockets.on('connection', function (socket) {
    socket.on('new_client', function (UserName, Group) {
        socket.UserName = UserName;
        socket.Group = Group;
        socket.join(Group);
        console.log(UserName + " connected on group=" + Group);
        socket.broadcast.to(socket.Group).emit('message', {UserName: UserName, message: " Connected!!!"});
    });

    socket.on('message', function (message) {
        socket.broadcast.to(socket.Group).emit('message', {UserName: socket.UserName, message: ent.encode(message)});
    });

    socket.on('disconnect', function() {
        try {
            if(socket.UserName !== undefined) {
                socket.broadcast.emit('message', {UserName: socket.UserName, message: " Disconnected!!!"});
            }
        }
        catch(ex) { }
    });
});

var PORT = 9999;
server.listen(PORT, function () {
    //Callback triggered when server is successfully listening.
    console.log("Server listening on: http://localhost:%s", PORT);
});

Wednesday, December 7, 2016

First HTTP Server in Node.js

1. Download node server from here or here and extract to a local folder
2. Download NPM (Node Package Manager) from here or here and extract to a local folder
3. Configure environment PATH Variable. Open command prompt and do the following:
C:\Users\pritom>set PATH=%PATH%;C:\Users\..\NODE_FOLDER;C:\Users\..\NPM_FOLDER

C:\Users\pritom>echo %PATH%
...;C:\Users\pritom\Desktop\codes\node_1\node-v7.2.1-win-x64;C:\Users\pritom\Desktop\codes\node_1\npm-4.0.5

C:\Users\pritom>node --version
v7.2.1

4. Create a file named "server.js" in a local folder with following contents:

//Lets import the HTTP module
var http = require('http');

//Lets define a port we want to listen to
const PORT = 5555;

//We need a function which handles requests and send response
function handleRequest(request, response) {
    response.end('Node js server browse at: [[http://localhost:' + PORT + request.url + ']]');
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function () {
    //Callback triggered when server is successfully listening.
    console.log("Server listening on: http://localhost:%s", PORT);
});

5. Now navigate to the folder using command prompt and type "node server.js" will output:
Server listening on: http://localhost:5555

6. Hit "http://localhost:5555" in your browser and see the result.....

Friday, December 2, 2016

Google Chrome - Clear Cache for Specific Website

1. First follow the image below:

2. Now click right button on reload button marked in below image and then click on "Empty Cache and Hard Reload"

Thursday, December 1, 2016

Angularjs: Calling a function when ng-repeat has finished

<!DOCTYPE html>
<html>
<head>
    <title>Angularjs: Calling a function when ng-repeat has finished</title>
    <style type="text/css">
        div.log {
            border: 2px solid gray;
            color: black;
            padding: 10px;
            font-size: 20px;
            font-family: monospace;
        }
        div.log div {
            padding: 10px;
        }
    </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("MyController", function($scope) {
            $scope.items = [];
            $scope.items.push({"name": "Pritom"});
            $scope.items.push({"name": "Kumar"});

            var log = $(".log");
            $scope.log = function(e) {
                log.prepend("<div>" + e + "</div>");
            }
        })

        app.directive("myCustomValidation", function($timeout) {
            return {
                restrict: "A",
                require: "ngModel",
                link: function(scope, elem, attrs, ctrl) {
                    /**
                     * If you dont use $timeout then nothing found.
                     * You can try yourself.
                     */
                    $timeout(function () {
                        scope.$apply(function () {
                            scope.log(elem.val())
                        })
                    })
                }
            }
        })
    </script>
</head>

<body>
<div data-ng-app="myApp" data-ng-controller="MyController">
    <div>
        <div ng-form="myForm" data-ng-repeat="item in items">
            <div style="border:1px solid blue;padding:10px;">
                <input type="text" name="name" ng-model="item.name" ng-maxlength="10"
                       my-custom-validation required style="width:100%;"/>
            </div>
        </div>
        <div class="log"></div>
    </div>
</div>
</body>
</html>

Result using $timeout:

Result without using $timeout:

Monday, November 28, 2016

JavaScript noUiSlider Example

Download nouislider.css & nouislider.js before try the example below.

noUiSlider code example

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="nouislider.css" rel="stylesheet">
    <script src="nouislider.js"></script
</head>

<body>
<div style="width: 90%; margin-left: 5%; padding-top: 30px;">
    <div class="parent">
        <h3>
            <i>NoUiSlider_1 = <span class="slider_value"></span></i>
            <input type="button" class="reset_1" value="Reset"/>
            <input type="button" class="disable disable_1" value="Disable"/>
            <input type="button" class="enable enable_1" value="Enable" style="display: none;"/>
        </h3>
        <div class="slider slider_1"></div>
    </div>
    <div class="parent">
        <h3>
            <i>NoUiSlider_2 = <span class="slider_value"></span></i>
            <input type="button" class="reset_2" value="Reset"/>
        </h3>
        <div class="slider slider_2"></div>
    </div>
    <div class="parent">
        <h3><i>Slider Example</i></h3>
        <div style="width: 120px;" class="slider-toggle"></div>
    </div>
</div>
</body>

<script type="text/javascript">
    createSimpleSlider();
    createToggleSlider();

    function createSimpleSlider() {
        for(var i = 1; i <= 2; i++) {
            var range = $('.slider_' + i)[0];

            noUiSlider.create(range, {
                start: 40,
                tooltips: [ true ],
                connect: [true, false],
                range: {
                    'min': 0,
                    'max': 100
                },
                format: {
                    to: function ( value ) {
                        return parseInt(value);
                    },
                    from: function ( value ) {
                        return value;
                    }
                }
            }).on('update', function( values, handle ) {
                var target = $(this.target);
                var slider_tooltip = target.find(".noUi-handle");
                if(values[handle] > 50) {
                    slider_tooltip.addClass("half_way_pass");
                }
                else {
                    slider_tooltip.removeClass("half_way_pass");
                }

                var slider_value = target.closest(".parent").find(".slider_value")[0];
                slider_value.innerHTML = values[handle];
            });

            $('.reset_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider")[0].noUiSlider.set([15]);
            })

            $('.disable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").attr("disabled", "disabled");
                target.hide();
                target.closest(".parent").find(".enable").show();
            })

            $('.enable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").removeAttr("disabled");
                target.hide();
                target.closest(".parent").find(".disable").show();
            })
        }
    }

    function createToggleSlider() {
        var toggleSlider = $('.slider-toggle')[0];

        noUiSlider.create(toggleSlider, {
            start: 0,
            range: {
                'min': [0, 1],
                'max': 1
            },
            format: {
                to: function ( value ) {
                    return parseInt(value);
                },
                from: function ( value ) {
                    return value;
                }
            }
        });

        toggleSlider.noUiSlider.on('update', function( values, handle ) {
            var target = $(this.target);
            var slider_tooltip = target.find(".noUi-handle");
            if(values[handle] > 0) {
                slider_tooltip.addClass("half_way_pass");
            }
            else {
                slider_tooltip.removeClass("half_way_pass");
            }

            var slider_value = target.closest(".parent").find(".slider_value")[0];
            slider_value.innerHTML = values[handle];
        });
    }
</script>