Friday, April 4, 2014

Get distance between two place in google map

Here I am postting little code for get distance between two place in google map.
We need only latitude and longitude of both place and using this we can get by-road distance between them.

var currentLocation = new google.maps.LatLng(currLatitude,currLongitude);
var service = new google.maps.DistanceMatrixService();
var distance = 0;

var destinationLocation = new google.maps.LatLng(destiLatitude,destiLongitude); service.getDistanceMatrix({
origins: [currentLocation],
destinations: [destinationLocation ],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
},
function( response, status ) {
    if (status == google.maps.DistanceMatrixStatus.OK ){
distance = response.rows[0].elements[0].distance.value ;
    }
});

Here you get distance in km.
If you want to convert it into miles you can use below line.

var distanceInMiles = Math.round(( (response.rows[0].elements[0].distance.value /1609.34)*100)/100);

Thursday, December 19, 2013

Change url without reloading application using javascript

Hello All,

I worked on application which need to change url after loading page because I don’t want to show user to full url.

I can do this by window.location but it will reload our application but I don’t want this also.

Here small code snipt which will done this job.

<script>

        var clean_uri = location.protocol + "//" + location.host + location.pathname;
        window.history.replaceState({}, document.title, clean_uri);

</script>

Wednesday, December 19, 2012

Scroll grid to selected row in ExtJs 4

Recently I was working on ExtJs project in which there were required to select row as well as scroll grid to selected row.I found focusRow() method of view but only this did't work.We have to set deferRowRender to false it is config of grid.
Following is code for this.

 // preselect record
grid.getSelectionModel().select(  record  );
               
 //scroll grid to selected record
grid.getView().focusRow( record );

we can also use index of row insted of record.

Tuesday, September 18, 2012

How to get CSS class property value in javascirpt


Hello all,
Recently I working with javascript and css and for show and hide some element on base of css class's value.
I try  document.getElementById('elementId').style.display but it's failed because it's work only with inline style.

so I got below javascript code for get value of display property of css class in javascript.

   var elementObj = document.getElementById('elementId');
   var displayType= window.getComputedStyle(elementObj, null).getPropertyValue('display');
    alert(displayType);

displayType is the one of the value from inline,none or block.

Monday, June 25, 2012

Clickable panel in sencha touch 2.0


Some time we need to click on panel and do something but sencha touch panel has no tap event.

Using below code we can click the panel and call any function.

xtype:'panel',
listeners:{
 painted:function(ele){
     ele.element.on('tap',function(){
                      console.log('you click panel');
     });
 }
}

Thanks,
Naresh

Tuesday, May 8, 2012

Display checkboxfield in textfield


Currently I face the issue for display checkbox along with the textfield which inturn was useful for me for bulk action like delete all selected textfield or update value.
While I was searching ,I found the following solution.

xtype: 'textfield',
itemId:'txtMain',
      component: {
          xtype: 'container',
          layout: 'hbox',
          items: [{
            xtype: 'textfield',
            itemId:'txtSubText',
            flex: 1,
            label:'select',
            clearIcon:false
          },
          {
            xtype: 'checkboxfield',
            itemId:'chkField'
          }]
      }

Output of above code is :-


Following code to get the value of textfield and checkboxfield

panel.query('#txtMain')[0].getComponent().query('#txtSubText')[0].getValue();

panel.query('#txtMain')[0].getComponent().query('#chkField ')[0].getValue();

Saturday, March 17, 2012

HTML 5 localStorage usefull methods


With HTML5, web pages can store data locally within the user's browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.

The data is stored in key/value pairs, and a web page can only access data stored by itself.

Here I write some usefull method of localStorage.

localStorage.setItem('name','naresh');
This method use for create new items if not exist in localstorage otherwise it overwrite value of item 'name'.

localStorage.getItem('name');
This method give the value of item 'name' of locaStorage.

localStorage.removeItem('name');
This method for remove single and perticuler item from localStorage.

localStorage.clear();
This mehtod use for copmletely clear your localStorage.