Easy Code Stuff: November 2014

Nov 25, 2014

Say Your Name With Knockout.js

Here Am Going To Use A New JavaScript Frame Work Called Knockout.js

In this example, the two text boxes are bound to observable variables on a data model.
The “full name” display is bound to a computed observable, whose value is calculated in terms of the observables.

Edit either text box to see the “full name” display update. See the HTML source code and notice there’s no need to catch “onchange” events. Knockout knows when to update the UI.

Source code: View

<p>First name: <input data-bind="value: firstName" /></p>

<p>Last name: <input data-bind="value: lastName" /></p>

<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

Source code: View model

// Here's my data model

var ViewModel = function(first, last) {

    this.firstName = ko.observable(first);

    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {

// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.

        return this.firstName() + " " + this.lastName();

    }, this);

};

ko.applyBindings(new ViewModel("Hudhaifa", "Yoosuf"));

 // This makes Knockout get to work

Try This In JS Fiddle : Click Me

Nov 20, 2014

Show Current Location In A Google Map Using Google Map API v3

You Can Use Following Code To Show The Current Location In A Google Map Using Google Map API v3. Before Using Make Sure You have Downloaded The "jquery.gmap3.min.js" Java Script File.

<html>
<head>
<title>Show Current Location Using Google Map v3</title>

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

Creating A Google Map Using Google Map API v3

Following Example Will Help You To Develop Your Own Google Map Using Given Latitude & Longitude.Before Using Make Sure You have Downloaded The "jquery.gmap3.min.js" Java Script File.

<html>

<head>

<title>Google Map v3</title>

</head>

<body>

var map;

var lat = 6.929537;//Your Location Latitude

var lon = 79.866271;//Your Location Longitude

var str = '[{ "lat" :"' + lat + '","lng" :"' + lon + '"}]';

str = JSON.parse(str);

jQuery('#map-canvas').gmap3({

marker: {

values: str,

options: {

icon:'http://maps.google.com/mapfiles/ms/icons/red-dot.png',

//icon:new google.maps.MarkerImage("marker.png"),

}

map: {

options: {

zoom: 14,

scrollwheel: true,//Make It false To Stop Map Zooming By Scroll

streetViewControl: true

});

</script>

</body>

</html>

Below Code Also Can Use Create The Map Using Given Latitude & Longitude.

<html>
<head>
<title>Google Map v3</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap3.min.js"></script>
</head>
<body>
<div id="map-canvas" style="width:100%;height:500px;"></div>
<script type="text/javascript">
var lat = 6.929537;//Your Location Latitude
var lon = 79.866271;//Your Location Longitude

jQuery('#map-canvas').gmap3({
marker:{
latLng: [lat, lon]
},
map:{
options:{
zoom: 14
}
}
});
</script>
</body>
</html>

This Is Simple Example That Shows The Location Using A Marker.If You Want You Can Add Events For The Marker & Shows A Info Window.

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

Nov 19, 2014

Get Client Operating System Using JQuery

The following piece of code can be used to get Client Operating System . in case you need to execute some code.

$(document).ready(function(){

if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";

if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";

if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";

if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

alert(OSName);

});

Copy Paste This Code Below And Simply Do What Ever Your Planning To Do With It

<!DOCTYPE html>
<html>
<head>
<title>Client Operating System</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

window.onload = function () {
var OSName="Unknown OS";

if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";

if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";

if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";

if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

$("#display").text(OSName);

};

</script>
</head>
<body>
<p id="display"></p>
</body>
</html>

Get Client IP and Referrer Using JQuery

The following piece of code can be used to get Client IP
And The Referrer

function myIP() {
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.open("GET"," http://api.hostip.info/get_html.php ",false);
xmlhttp.send();

hostipInfo = xmlhttp.responseText;

$("#display").text(hostipInfo);

var referrer = document.referrer;

$("#displayReferrer ").text(referrer);

return false;
}

Copy Paste This Code Below And Simply Do What Ever Your Planning To Do With It

<!DOCTYPE html>
<html>
<head>
<title>Client IP</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
myIP();
});
function myIP() {
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.open("GET"," http://api.hostip.info/get_html.php ",false);
xmlhttp.send();

hostipInfo = xmlhttp.responseText;


$("#display").text(hostipInfo);

  var referrer = document.referrer;

$("#displayReferrer ").text(referrer);

return false;
}

</script>
</head>
<body>

<p id="display"></p>
<br>
<p id="displayReferrer "></p>
</body>
</html>

Google Map With Multiple Markers & Info Windows Using Google Map API v3

Following Sample Html Code Will Help You To Create Your Own Google Map With Multiple Markers & Multiple Info Windows. In This Example I Have Used An Array Which Consist Of Three Locations.You Can Use Your Own Object Here.But Make Sure You Have Specified Correct Data Value.Specially Latitude and Longitude.

In The Example I Have Linked The JQuery.But You Need To Download The "jquery.gmap3.min.js" File.

<!DOCTYPE html>
<html>
<head>
<title>Google Map v3 With Multiple Markers & Info Windows</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false& libraries=places"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap3.min.js"></script>
</head>
<body>
<div id="map-canvas" style="width:100%;height:500px;"></div>
<script type="text/javascript">
var locations = [
[1, 6.929537, 79.866271,'Maradana Railway'],
[2, 6.933456, 79.850435,'Fort Railway'],
[3, 6.931965, 79.846058,'Secretariat Railway']
];

var map;
var str = '[';
for (i = 0; i < locations.length; i++) {
str += '{ "lat" :"' + locations[i][1] + '","lng" :"' + locations[i][2] + '","data" :"<div class=Your_Class><h4><a href=Your_Link_To_Marker>' + locations[i][3] + '</a></h4></div>"},';
}
str = str.substring(0, str.length - 1);
str += ']';
str = JSON.parse(str);

jQuery('#map-canvas').gmap3({
marker: {
values: str,
options: {
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
//icon: new google.maps.MarkerImage("marker.png"),
},
events: {
click: function (marker, event, context) {
map = $(this).gmap3("get"),
infowindow = $(this).gmap3({ get: { name: "infowindow" } });
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: { content: context.data }
}
});
}
},
}
},
map: {
options: {
zoom: 14,
scrollwheel: true,//Make It false To Stop Map Zooming By Scroll
streetViewControl: true
},
},
});
</script>
</body>
</html>

Above Example I Have Used The Marker Click Function.If You Want You Can Use The mousehover function too.If You Want To Change The Marker Color Or Style You Can Change The Link.Even If You Want To Use Your Own Image You Can SImply Give The Link( "new google.maps.MarkerImage("marker.png")" ) As Shown In The Comment.

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