Javascript

Tuesday, April 10, 2012

Clock visitor time visiting the page

startday = new Date();

clockStart = startday.getTime();

function initStopwatch()

{
var myTime = new Date();
return((myTime.getTime() - clockStart)/1000);
}

function getSecs()

{
var tSecs = Math.round(initStopwatch());
var iSecs = tSecs % 60;
var iMins = Math.round((tSecs-30)/60);
var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);
document.forms[0].timespent.value = sMins+":"+sSecs;
window.setTimeout('getSecs()',1000);
}

</script>

<FORM>

<FONT SIZE="2" FACE="Arial">Time spent here: </FONT><input size=5 name=timespent>
</FORM>

</CENTER>

Print button for page

if (window.print)

{
document.write('<form> '
+ '<input type=button name=print value="Click" '
+ 'onClick="javascript:window.print()"> To Print this page!</form>');
}

</script>

Back and Forward button

Sunday, December 18, 2011

Accepting only Numeric data in a text field.

function isNumber(evt)

{
   var charCode = (evt.which) ? evt.which : event.keyCode

   if(parseInt(charCode) >= 48)
   {
         if(!(parseInt(charCode) >= 57))
         {
         return true;
         }
         return false;
   }

      //Accept backspace in case u want to deleted the entered data.

else if(parseInt(charCode) == 8)

   {
     return true;
   }
   else
   {
    return false;
   }
}

</script>

Searching a particular address using google maps in javascript

</script>

<p><span class="contentsmall">Finding the selected branch:</span><span class="contentsmall" id="status">checking...</span></p>
</article>

var geocoder;
var map;
function initialize()
{
//You can initialize the address you want search on google maps here. You can fetch the address through query string or hidden fields on your page.

finalAddress=”Mumbai , Bandra (E)”;
}

geocoder = new google.maps.Geocoder();

if (geocoder)

{
geocoder.geocode( { 'address': finalAddress}, function(results, status)
   {
     if (status == google.maps.GeocoderStatus.OK)
     {
       var s = document.querySelector('#status');

      if (s.className == 'success')
      {
            return;
      }

      s.innerHTML = "found";
      s.className = 'success';

      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'map_canvas';
      mapcanvas.style.height = '350px';
      mapcanvas.style.width = '330px';

document.querySelector('article').appendChild(mapcanvas);

      var myOptions = {
          zoom: 15,
          panControl: true,
          scaleControl: true,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var marker = new google.maps.Marker({
           map: map,
           position: results[0].geometry.location
       });
     }
     else
     {
       alert("Geocode was not successful for the following reason: " +status);
     }
   });
}
}

function error(msg)

{
      var s = document.querySelector('#status');
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
}

initialize();

</script>

Implement "Locate Me" feature using google maps.

//This code implements the “Locate Me” feature using google maps for mobile applications. It works //perfectly fine on mobile simulators.

<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

<article>
<p><spanclass="contentsmall">Finding your location:</span><span class="contentsmall" id="status">checking...</span></p>
</article>

<script>
function success(position)
{
vars = document.querySelector('#status');
if(s.className == 'success')
{
return;
}

s.innerHTML = "found you!";
s.className = 'success';

var mapcanvas = document.createElement('div');
mapcanvas.id ='mapcanvas';
mapcanvas.style.height = '350px';
mapcanvas.style.width = '330px';

document.querySelector('article').appendChild(mapcanvas);

var latlng = newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude);

//You can use hardcoded values as shown below for testing purpose.
//var latlng = new google.maps.LatLng(19.1242244, 72.8772207);

var myOptions ={
zoom: 15,
center: latlng,
panControl: true,
scaleControl:true,
zoomControl:true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
mapTypeControl:true,
navigationControl:true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = newgoogle.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = newgoogle.maps.Marker({
position: latlng,
map: map,
title:"You are here!" });
}

Function error(msg)
{
vars = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
}

if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error('not supported');
}
</script>

This is how the ouput will look on any mobile simulator.