Google Maps API drawing polygon with JSTS Librery

One of our client  has asked for road map feature for their website. basically what he need is A Road map which list all places around the route.

Now getting distance between to points was very easy the important thing is how to draw polygon around route.

After lot of browsing and googling  I found amazing library which is able to draw polygon around route it’s called JSTS library.

Continue reading “Google Maps API drawing polygon with JSTS Librery”

Jquery moving all items in listbox at once

jQuery example of moving single element from one list to another
http://jsfiddle.net/RbLVQ/60/

Javascript:

$(document).ready(function() {
    $('#btnRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    $('#btnLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
});
 
HTML:
<table style='width:370px;'>
    <tr>
        <td style='width:160px;'>
            <b>Group 1:</b><br/>
           <select multiple="multiple" id='lstBox1'>
              <option value="ajax">Ajax</option>
              <option value="jquery">jQuery</option>
              <option value="javascript">JavaScript</option>
              <option value="mootool">MooTools</option>
              <option value="prototype">Prototype</option>
              <option value="dojo">Dojo</option>
        </select>
    </td>
    <td style='width:50px;text-align:center;vertical-align:middle;'>
        <input type='button' id='btnRight' value ='  >  '/>
        <br/><input type='button' id='btnLeft' value ='  <  '/>
    </td>
    <td style='width:160px;'>
        <b>Group 2: </b><br/>
        <select multiple="multiple" id='lstBox2'>
          <option value="asp">ASP.NET</option>
          <option value="c#">C#</option>
          <option value="vb">VB.NET</option>
          <option value="java">Java</option>
          <option value="php">PHP</option>
          <option value="python">Python</option>  
        </select>
    </td>
</tr>
</table> 
 

and Some CSS:
body { padding:10px; font-family:verdana; font-size:8pt;} select{ font-family:verdana; font-size:8pt; width : 150px; height:100px;}input { text-align: center; v-align: middle;}

If you want to move all elements at once
follow this example

or add this code
HTML:

<input type='button' id='btnRightAll' value ='  >>  '/>
Javascript:
$('#btnRightAll').click(function(e) {
    var selectedOpts = $('#lstBox1 option');
    if (selectedOpts.length == 0) {
        alert("Nothing to move.");
        e.preventDefault();
    }

    $('#lstBox2').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
});