Showing posts with label Java Script Function. Show all posts
Showing posts with label Java Script Function. Show all posts

Feb 27, 2016

Calling AngularJS Function From Outside The Scope

Sometimes you may want to call a function in angular scope from outside the scope. For an example will say you have an AngularJS Controller which contains a function to do something. And you have another button outside the this controller. You can use below method to do it so.

 Lets see initially how our controller looks like.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr/>
</body>
<script type="text/javascript" >
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });
</script>
</html>

 Now lets say you wanted to call the "sayHello()" function from outside the controller. First what you should do is get the scope of the controller which contains the method you wanted call to a variable. In order to that first you should have sort of an identification to the controller. Simply you can give id to the container which contains the controller. Then you can simply apply it to the scope. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div id="mySec" ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr>
    <br />
    <input type="button" value="Say Hello From JQuery" onclick="callAngularFunction()">
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });

    function callAngularFunction() {
        var scope = angular.element(document.getElementById("mySec")).scope();
        scope.$apply(function () {
            scope.sayHello();
        });
    }
  
</script>
</html>

Hope you had what you are looking for.
By at No comments:
Labels: , , , , , , ,

Oct 17, 2015

Getting The Direction Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the direction.

 Have a look on the code. It's simply created using Html and JavaScript.

 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
    <title>Getting The Direction Between Two Markers In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 75%;"></div>
    <div>
        <strong>From Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="fromLat" />
        <span>Longitude : </span>
        <input type="text" id="fromLng" />
        <br /><br />
        
        <strong>To Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="toLat" />
        <span>Longitude : </span>
        <input type="text" id="toLng" />
        <br /><br />

        <div id="direction"></div>
    </div>
    <script type="text/javascript">
        var map;
        var fromLat = 6.928940573589038;
        var fromLng = 79.87219331750487;
        var toLat = 6.929110981212029;
        var toLng = 79.87013338098143;

        var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
        var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

        loadMap();
        setFromMarker();
        setToMarker();

        function loadMap() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(fromLat, fromLng),
                zoom: 15
            });
        }

        function setFromMarker() {
            var fromMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(fromLat, fromLng),
                icon: fromIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(fromMarker, 'dragend', function (event) {
                fromLat = event.latLng.lat();
                fromLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setToMarker() {
            var toMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(toLat, toLng),
                icon: toIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(toMarker, 'dragend', function (event) {
                toLat = event.latLng.lat();
                toLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setLatLngDetails() {
            $("#fromLat").val(fromLat);
            $("#fromLng").val(fromLng);
            $("#toLat").val(toLat);
            $("#toLng").val(toLng);
            getDirection();
        }

        function getDirection() {
            var fromLocation = new google.maps.LatLng(fromLat, fromLng);
            var toLocation = new google.maps.LatLng(toLat, toLng);
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [fromLocation],
                destinations: [toLocation],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, callback_direction);
        }

        function callback_direction(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert('Error was: ' + status);
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                var str = '';

                for (var i = 0; i < origins.length; i++) {
                    var results = response.rows[i].elements;
                    if (results[0].status != 'ZERO_RESULTS') {
                        for (var j = 0; j < results.length; j++) {
                            str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                        }
                    } else {
                        str = 'No Direction Found.';
                    }
                }

                $("#direction").html(str);
            }
        }
   
    </script>
</body>
</html>

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.
  • google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
  • google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
  • google.maps.TravelMode.TRANSIT requests directions via public transit routes.
  • google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.


Check My Other Articles About Google Maps.

 1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

By at No comments:
Labels: , , , , , , , , , , , ,

Getting The Direction Between Two Locations Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting four text fields to enter the from locations and to locations latitude and longitude. You can enter the locations latitude and longitudes of from and to locations and click the "Get Direction" button. After clicking the button you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 <head>
  <title>Getting The Direction Between Two Locations Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <input type="button" value="Get Direction" onclick="getDirection()"/>
   <br/><br/>
   <div id="direction"></div>
  </div>
  
  <script type="text/javascript">

      function getDirection() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var service = new google.maps.DistanceMatrixService();
          service.getDistanceMatrix({
              origins: [fromLocation],
              destinations: [toLocation],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
          }, callback_direction);
      }

      function callback_direction(response, status) {
          if (status != google.maps.DistanceMatrixStatus.OK) {
              alert('Error was: ' + status);
          } else {
              var origins = response.originAddresses;
              var destinations = response.destinationAddresses;
              var str = '';

              for (var i = 0; i < origins.length; i++) {
                  var results = response.rows[i].elements;
                  if (results[0].status != 'ZERO_RESULTS') {
                      for (var j = 0; j < results.length; j++) {
                          str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                      }
                  } else {
                      str = 'No Direction Found.';
                  }
              }

              $("#direction").html(str);
          }
      }
  </script>
 </body>
</html>

Just check the code in browser, you will get the following output.
When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.
  • google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
  • google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
  • google.maps.TravelMode.TRANSIT requests directions via public transit routes.
  • google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.


Check My Other Articles About Google Maps.

 1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

By at No comments:
Labels: , , , , , , , , , ,

Restrict To Enter Only Decimal Using Java Script

In this article I'm going to show guys, how to restrict a text field only to enter decimal values. And most importantly you can tell the function how many decimal places you want to restrict.

Have a look on the code. It's simply created using Html and JavaScript.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<body>
    <label>One Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,1)" />
    <br />

    <label>Two Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,2)" />
    <br />

    <label>Five Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,5)" />
</body>
<script type="text/javascript">
    function restrictToDecimal(el, evt, dec) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split('.');
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        //Restrict To Enter One Period
        if (number.length > 1 && charCode == 46) {
            return false;
        }

        //Getting The Character Position Entered
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
            return false;
        }

        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }
</script>
</html>

If you want use following single JavaScript to do it.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function restrictToDecimal(el, evt, dec) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    //Restrict To Enter One Period
    if (number.length > 1 && charCode == 46) {
        return false;
    }

    //Getting The Character Position Entered
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
        return false;
    }

    return true;

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

}

By at No comments:
Labels: , , , , ,

Nov 15, 2014

JavaScript Window Events


Java Script Provides Many Functions Related To Browser Window Such As Getting The Width and Height Of The Browser.

 Following Java Script Functions Help Us To Get Many Things Related Browser Window.

 Window Width  
Following Script Will Returns The Browser Windows Width.

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;


Window Height
Following Script Will Returns The Browser Windows Height.

 var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;


Open A New Window
Following Java Script Function Will Open A New Browser. You Can Give The Parameters For The New Window Size.

function openWindow() {
    myWindow = window.open('', '', 'width=400, height=200');
}


Closing A Window
Following Java Script Function Will Close The Existing  Opened Browser.

function closeWindow() {
myWindow.close();
}

 Re-sizing The Window To A Given Width and Height
Following Java Script Function Will Re size The Existing Opened Browser To The Given Width and Height.

function resizeWindowTo() {
myWindow.resizeTo(400, 400);
myWindow.focus();
}
Re-sizing The Window By A Given Width and Height
Following Java Script Function Will Re size The Existing Opened Browser By The Given Width and Height.

function resizeWindowBy() {
myWindow.resizeBy(-100, -100);
myWindow.focus();
}
Moving The Window To A Given X and Y Position In The Browser
Following Java Script Function Will Move The Existing Opened Browser To The Given X and Y Position.

function moveWindowTo() {
myWindow.moveTo(300, 100);
myWindow.focus();
}
You Can Use Many Functions Such As You Want To Re-size The Window and Place In A New Position.Following Example Contains All The Above Window Events In A Page.

JavaScript Window Events.html
<html>
  <head>
<title>JavaScript Window Events</title>
<script>
         var myWindow;

          function getWindowSize(){
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            alert("Window Size : " + windowWidth  + "px," + windowHeight + "px");
         }

function openWindow() {
myWindow = window.open('', '', 'width=400, height=200');
}

 function resizeWindowTo() {
myWindow.resizeTo(400, 400);
myWindow.focus();
}

function resizeWindowBy() {
myWindow.resizeBy(-100, -100);
myWindow.focus();
}

function moveWindowTo() {
myWindow.moveTo(300, 100);
myWindow.focus();
}

function closeWin() {
myWindow.close();
}
      </script>
   </head>
<body>
       <button onclick="getWindowSize()">Get Window Size</button><br/>
       <button onclick="openWindow()">Open A New Window</button><br/>
<button onclick="resizeWindowTo()">Re size The Window To 400px, 400px</button><br/>
<button onclick="resizeWindowBy()">Re size The Window By 100px, 100px</button><br/>
<button onclick="moveWindowTo()">Change Window Position</button><br/>
<button onclick="closeWin()">Close The Window</button><br/>
   </body>
</html>
By at No comments:
Labels: , , , , , , , , , ,
Subscribe to: Posts (Atom)

JWT Token Decode Using Jquery

When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share...