Script Stress: 2009

Monday, December 21, 2009

Point of interest along a route (google maps)

Steps to obtain the coordinates of each point returned by Google Maps API on a given route:

1. let's call the direction 'gdir'

gdir = new GDirections(map, document.getElementById("directions"));

2. obtain the shortest route:

var route = gdir.getRoute(0);

3. obtain the number of steps on the route:

var stepn=route.getNumSteps();

4. define your object:

var polyline = gdir.getPolyline();

5. find the first point on the route:

splitvx=polyline.getVertex(0);

6. make a loop through all the steps:
for (i=0;i<stepn;i++){}
7. get the coordinates of the first point on the route:

var start=route.getStartGeocode();

8. get the total number of point on the route:

var numPolylineVertices = polyline.getVertexCount();

9. make a loop to extract all the coordinates on the route:

for (n=0;n<numPolylineVertices;n++){

      vertexCoord=polyline.getVertex(n);
      var arr = new Array();
      arr[n]=vertexCoord;}

10. perform a loop against your list of coordinates to get the distances.

Some notes:
Obviously this technique is good on short distances, after that the user's browser will crash.
The code should be placed in it's suitable place, but a sample you can find here.

Wednesday, July 15, 2009

[solved] Add dinamically options to select - JavaScript

Here is a demo that adds options to select lists (dropdowns) dinamically:

And here is the code:

<div id="list"></div>
<select id="mylist"></select>

<script language="JavaScript" type="text/javascript">

function sets(json){
for (i=0;i<10;i++){
var mylist=document.getElementById('mylist');
var title=json.photosets.photoset[i].title._content;

try {
mylist.add(new Option(title,title),null);
} catch(ex){
mylist.add(new Option(title,title));
}

}
}

</script>

<script language="JavaScript" type="text/javascript" src="http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=44e8746c75b6da2da7d931d893e299f8&user_id=39602083%40N04&format=json&jsoncallback=sets"></script>

Compatibility: FF3,IE7+,Chrome, Safari

Tuesday, July 14, 2009

[solved] Search within textarea - JavaScript

This is a working sample of how to search for text within textarea.

And here is the code for this:

<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">

function setSelectionRange(input, selectionStart, selectionEnd){

if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionStart);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function alerts(){

var x=document.getElementById('txt').value;
var y=document.forms[0].q.value;
var z=x.search(y);
var ylength=y.length;

var tarea = document.getElementById("txt");
if (navigator.appName=="Microsoft Internet Explorer"){
setSelectionRange(tarea,z, z+ylength);}
else{
setSelectionRange(tarea,z, z+ylength);
tarea.setSelectionRange(z, z+ylength); }

}

</script>
<form action="#" onsubmit="alerts(); return false;">
<input type="text" id="input" name="q" value="and"/><input name="find" type="submit" value="go" /> </form>
<br />
<textarea id="txt" cols="25" rows="8">who are you, who am I and who is this guy ?</textarea>

</body>
</html>