Showing posts with label Java Script. 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.

<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.

<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.

Feb 13, 2016

[Fixed Solution] Check For The Existence Of Option In Select Using JQuery

In this article I'm going to show you all, how to check for <option>'s existence in a <select> tag. Their are many ways to do this. Lets see a simple way of it.

First lets have a look on my drop down.

<html>
<body>
    <select id="ddMember">
        <option value="Nifal">Nifal</option>
        <option value="Asjad">Asjad</option>
        <option value="Dinesh">Dinesh</option>
    </select>
</body>
</html>

Now lets say you wanted to check for the existence of the member "Gowtham" in the above drop-down. Use below java script codes to check it.

1	var isExist = $('#ddMember option:contains("Gowtham")').length;

Above code will check for the given option. If value is not exist it will return zero(0). Otherwise it will return some other number, depending on the occurrences.

Lets say, you wanted check for a option and if not available you wanted add it to your drop-down, simply use your below codes to do it.

1
2
3

if($('#ddMember option:contains("Gowtham")').length){
  $('#ddMember').append("<option value="Gowtham">Gowtham</option>");
}

Hope you found, what you looked for.

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.

<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

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.

<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.

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.

<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.

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
    }

}

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>

Nov 5, 2014

JQuery Mobile Panels

You Can Use JQuery Mobile Panels To Show Content Over The Current Content.Panels Will Slide Out From The Left Or The Right Side Of The Screen. Following Html Page Will Help You Use JQury Mobile Panels In Your Mobile Web Site.

Normally Panels Are Open By Calling Link. If You Want You Can Open A Panel By Event Also.

NOTE : Always Keep Your Panels Bottom Of The Body Tag.

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script>
function openPanel(){
$.mobile.activePage.find('#myPanel1').panel("open");
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<input type="button" value="Open Panel Using Java Script" onclick="openPanel()"/>
<a href="#myPanel2" >Open Panel Using href Link</a><br/>
<a href="#myPanel3" >Open Panel From Right Side</a><br/>
<a href="#myPanel4" >Open Panel From Left Side</a>
</div>
<div data-role="panel" id="myPanel1">
<h2>This Panel Is Open Using Java Script</h2>
<p>You Can Close The Panel By Clicking Outside The Panel Or Pressing The Esc Key Or By Swiping</p>
</div>
<div data-role="panel" id="myPanel2">
<h2>This Panel Is Open Using href Link</h2>
<p>You Can Close The Panel By Clicking The Button Below</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
</div>
<div data-role="panel" id="myPanel3" data-position="right" data-dismissible="false">
<h2>This Panel Is Positioned To Right Side</h2>
<p>You Can't Close The Panel By Clicking Outside The Panel.</p>
<p>You Can Close The Panel By Swiping</p>
</div>
<div data-role="panel" id="myPanel4" data-position="left" data-display="overlay">
<h2>This Panel Is Positioned To Left Side</h2>
<p>Panel Displays Over The Content</p>
</div>
</div>
</body>
</html>

Currency Conversion Using Yahoo API in Java Script

When You Want To Convert Currency From One Currency To Another, You Need To Use A Currency Conversion. Their Are Many APIs Which Allows To Convert Currency. In This Example I Will Demonstrate You To Use Yahoo API To Convert Currency.

Below Html Pages Uses The Yahoo API To Get The Currency Rate,

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function getRate(){
var sFrom = $("#sFromCurrency" ).val();
var sTo = $("#sToCurrency" ).val();
var url = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D%27http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+sFrom+sTo+"%253DX%26f%3Dl1n%27%20and%20columns%3D%27rate%2Cname%27&format=json";
$.ajax({
url: url,
type: "POST",
async: false,
processData: true,
data: "",
contentType: "application/json",
dataType: "jsonp"
}).done(function (data) {
$("#rate").html(data.query.results.row.rate);
});
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div id="CurrencyFrom">
<span>Currency From </span>
<select id="sFromCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="LKR">LKR</option>
<option value="AUD">AUD</option>
</select>
</div>
<div id="CurrencyTo">
<span>Currency To </span>
<select id="sToCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="LKR">LKR</option>
<option value="AUD">AUD</option>
</select>
</div>
<div>
<input type="button" value="Check Rate" onclick="getRate()">
</div>
<div>
<span>Rate : </span>
<span id="rate">1.00</span>
</div>
</div>
</body>
</html>

Oct 25, 2014

Go Back To Last URL Using Java Script

Normally Web Sites Contains Many Pages. To Come To The Last Visited You Can Clicked The Browser's Back Button. It Will Take You To Lat Visited URL. That Mean Last Web Page You Have Visited. As A Developer You Can Create A Button To Do That. That Will Make Your Web Site More User Friendly.

Simply Use Following Code To Do That

function goBack() {
window.history.back()
}

This Is A Simple Exam That Use Go Back To Last Visited URL Function.

First.html

<html>

<head>

<title>Easy Code Stuff - First Page</title>

</head>

<body>

<h2>This Is The First Page</h2>

<a href="Second.html">Click This To Go To Second Page</a>

</body>

</html>

Second.html

<html>

<head>

<title>Easy Code Stuff - Second Page</title>

function goBack() {

window.history.back()

}

</script>

</head>

<body>

<h2>This Is The Second Page</h2>

<p>Click The Below Button To Go To Last Page</P>

</body>

</html>