jquery

Thursday, May 17, 2012

jQuery Tab

Disable jQuery Tab default tab navigation.

Disable jquery tab default click and provide previous tab next tab functionality in button click.

The output will be like the following image.

Download jQuery UI tab example
The code will have the following includes

 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
 <script src="../../jquery-1.7.2.js"></script>
 <script src="../../ui/jquery.ui.core.js"></script>
 <script src="../../ui/jquery.ui.widget.js"></script>
 <script src="../../ui/jquery.ui.tabs.js"></script>
 <link rel="stylesheet" href="../demos.css">

Change the script to the follwing

 $(function() 
 {
  //$( "#tabs" ).tabs(); disable default behaviour
  $('#tabs').tabs({ event: 'onchange' });
  
 
  $('.next-product').click(function()
  { 
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    $tabs.tabs('select', selected+1);
  });

  $('.previous-product').click(function(){ 
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    $tabs.tabs('select', selected-1);
  });  
  
 });

Add the html code for the previous ,next button below the last div element of the tab ui

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>
  <li><a href="#tabs-2">Proin dolor</a></li>
  <li><a href="#tabs-3">Aenean lacinia</a></li>
 </ul>
 <div id="tabs-1">
  <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
 </div>
 <div id="tabs-2">
  <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
 </div>
 <div id="tabs-3">
  <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
  <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
 </div>
</div>

</div><!-- End demo -->


<button class="previous-product">Previous Tab</button>
<button class="next-product">Next Tab</button>

Demo

Friday, December 16, 2011

XML jQuery Paging / Slide / example

XML jQuery Paging / Slide show example.

Script - include jquery library

<script type="text/javascript" src="jquery.min.js"></script>

Add the following inside a script tag in head section

  
var myArray = [];
  var count2 = 1;
  var xmlRowCount = 0;
      $(document).ready(mainFunction);
  
  function mainFunction()
  {
   var xmlGlobal={}; // variable to shore xml data  
   
   callAjaxFunction(); 
  }
  function callAjaxFunction()
  {
   $.ajax(
   {
    type: "GET",
    url: "sites.xml",
    dataType: "xml",
    success: doXmlFunction
   });      
  }
  
  function doXmlFunction(XML)
  {
   
    xmlGlobal = $(XML);
    var content = $(XML).find('site');
    
    //show first content
    $(XML).find('site').eq(0).each(loopXmlFunction);
    
    //for each item attach the showXmlFunction handler
    $(XML).find('site').each(loopXmlFunction2);

  }
  
  // show content of item clicked
  function showXmlFunction(e)
  {
   var tempCount = parseInt( e.data.msg) -1;
   $(xmlGlobal).find('site').eq(tempCount).each(loopXmlFunction);
  }
  
  //Attaching the showXmlFunction handler
  function loopXmlFunction2()
  {
   $(''+count2 +'').bind('click', {msg: count2},showXmlFunction).appendTo($('#nav-wrap'))
   count2++;
  }

  //Function to show content
  function loopXmlFunction()
  {
   xmlRowCount = 0;
   
   var id = $(this).attr('id');
   var title = $(this).find('title').text();
   var url = $(this).find('url').text();
   
   myArray[parseInt(xmlRowCount)] = new Array(id, title, url);
   xmlRowCount++;
   
   //remove any revious elements
   $('.items').remove();
   
   //add new title element
   $('

').html(''+title+'').appendTo('#page-wrap')
   
   //add sub elements
   $(this).find('desc').each(function()
   {
    
    var brief = $(this).find('brief').text();
    var long = $(this).find('long').text();
    
    $('

').html(brief).appendTo('#link_'+id);
    $('

').html(long).appendTo('#link_'+id);    
   });   
  }

Add the following html in body tag

 <div id="page-wrap">
      <h1>XML jQuery Paging - Show items one by one on click</h1>
     </div>
  <div style="margin:10px 0 0 20px;" id="nav-wrap"></div>

The Following is the sites.xml file structure

 <sites>
   <site id="0">
     <title>Think2Loud</title>
 <url>http://www.think2loud.com</url>
     <desc>
       <brief>this is the brief description 1.</brief>
       <long>...and this is the long description 1.  See how long it is :)</long>
     </desc>
   </site>
   <site id="1">
     <title>jaredharbour.com</title>
 <url>http://www.jaredharbour.com</url>
     <desc>
       <brief>this is the brief description 2.</brief>
       <long>...and this is the long description 2.  See how long it is :)</long>
     </desc>
   </site>
   <site id="2">
     <title>Css Tricks</title>
 <url>http://www.css-tricks.com</url>
     <desc>
       <brief>this is the brief description 3.</brief>
       <long>...and this is the long description 3.  See how long it is :)</long>
     </desc>
   </site>
 </sites>

You can customize your ui like the following.

Friday, June 3, 2011

jquery select row , column matrix - Version 2

Selecting row, columns of a Matrix in jquery version 2.

Click here to see the Demo.

Range can be selected with values in the From , To input box some sample inputs are

1. From a1 To p25
2. From b1 To b15
3. From a10 To a15
4. From a1 To p24
5. From d9 To k 15

From input box should have alphabet values less than To input box alphabet.
Also From input box numeric value should be less than or equal to To input box numeric value.

Screen shot of the demo

HTML Code

<div id="content"> <div class="top_adj1 lft"> <span>From</span><input type="text" id="fromVal" /> <span>To</span><input type="text" id="toVal" /> <input type="button" id="btnClick" value="Submit" /> </div> <br class="clear" /> <p> <input type="checkbox" id="selAll" />Select All <input type="checkbox" id="selFirstQuarter" />Select 1st Qtr <input type="checkbox" id="selSecondQuarter" />Select 2nd Qtr <input type="checkbox" id="selThirdQuarter" />Select 3rd Qtr <input type="checkbox" id="selFourthQuarter" />Select 4th Qtr </p> <div class="sourceplate1 top_adj1 lft"> <ul> <li></li> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li> <li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li> </ul> </div> <div class="sourceplate1"> <div class="source-lft lft"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> </ul> </div> <div class="sourceplate source-rgt lft"> <ul> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> </div> </div>

Place the Javascript code inside script tags, and place in Head section of the HTML page.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 var options   
 options =  $(".sourceplate li");
 
 var strStart = 1;
 var strRowCount = 16;
 var strColCount = 24;
 
 var strColQtrCount =  strColCount / 2 - strStart; // Column count starts from 0
 var strRowQtrCount = strRowCount / 2 ; 
 
 var firstQtrStart = strStart - 1; //count starts from 0
 var firstQtrEnd = strColQtrCount;

 var secondQtrStart = strStart * strColCount / 2 ;
 var secondQtrEnd = secondQtrStart + strColQtrCount;
 
 var thirdQtrStart = (strColCount / 2 )* (strRowCount / 2) * 2  ;
 var thirdQtrEnd = thirdQtrStart +  strColQtrCount ;
 
 var fourthQtrStart = thirdQtrStart +  strColCount / 2   ; 
 var fourthQtrEnd = fourthQtrStart +  strColQtrCount ; 

 $("#selAll").click(function()
 { 
  if($(this).is(':checked'))
  {
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
   recFunction(firstQtrStart,fourthQtrEnd,strRowQtrCount); 
  }
  else
  {
   //recFunction2(firstQtrStart,fourthQtrEnd,strRowQtrCount);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected"); 
  }     
 })


 $("#selFirstQuarter").click(function()
 {
  if($(this).is(':checked'))
  {
   
   $('#selAll').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);

   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
   recFunction(firstQtrStart,firstQtrEnd,strRowQtrCount);
  }
  else
  {
   //recFunction2(firstQtrStart,firstQtrEnd,strRowQtrCount);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
  } 
 })

 $("#selSecondQuarter").click(function()
 {
  if($(this).is(':checked'))
  {   
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);

   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
   recFunction(secondQtrStart,secondQtrEnd,strRowQtrCount);
  }
  else
  {
   //recFunction2(secondQtrStart,secondQtrEnd,strRowQtrCount);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
  } 
 }) 

 $("#selThirdQuarter").click(function()
 {
  if($(this).is(':checked'))
  {
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);

   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
   recFunction(thirdQtrStart,thirdQtrEnd,strRowQtrCount);   
  }
  else
  {
   //recFunction2(thirdQtrStart,thirdQtrEnd,strRowQtrCount);;
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
  } 
 })

 $("#selFourthQuarter").click(function()
 { 
  if($(this).is(':checked'))
  {
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
   recFunction(fourthQtrStart,fourthQtrEnd,strRowQtrCount);
  }
  else
  {
   //recFunction2(fourthQtrStart,fourthQtrEnd,strRowQtrCount);
   options.slice( 0,$(".sourceplate li").size() ).removeClass("selected");
  } 
 })
  
 $(".sourceplate li").click(function()
 {
  $(".sourceplate li").eq($(this).index()).toggleClass("selected");  
 });

 $("#btnClick").click(function(event)
 {
  var tempfrm
  var tempto 
  var tempfrmAlpha
  var temptoAlpha 
  var frmValStr 
  var toValStr 
  var fromAlphaArray = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p"];
  var toAlphaArray   = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p"];  

  options.slice(0,$(".sourceplate li").size() +1).removeClass("selected");
  //options.slice(0,$(".sourceplate li").size() +1).removeClass("selected"); 
  
  // Get input value
  frmValStr = $("#fromVal").val();
  toValStr = $("#toVal").val();
    
  // remove Numarel from string and store in a variable
  tempfrm = frmValStr.substring(1, frmValStr.length );
  tempto = toValStr.substring(1, toValStr.length );

  // remove String from string and store in a variable
  tempfrmAlpha = frmValStr.substring(0, 1).toLowerCase();
  temptoAlpha = toValStr.substring(0, 1).toLowerCase();
  
  var j = 0;
  var k = 0;
  var m = 0;
  var flagLoop = false;
  var f = 2;
  var j=0;
  
  tempto  = parseInt(tempto); 
  tempfrm = parseInt(tempfrm);  

  if (parseInt(tempfrm) > strColCount || parseInt(tempto) > strColCount )
  {
   alert("From or To range should not be > 24");
  }
  else
  {  
   for (i=1;i< fromAlphaArray.length;i++)
   {
    if(tempfrmAlpha == fromAlphaArray[i]){tempfrm = parseInt(tempfrm) + i * strColCount;}
   }

   for (i=1;i< toAlphaArray.length;i++)
   {
    if(temptoAlpha == toAlphaArray[i]){tempto = parseInt(tempto)  + i * strColCount;}   
   }
   
   tempto  = parseInt(tempto); 
   tempfrm = parseInt(tempfrm);
   
   for (i = tempfrm; i < tempto + 1; i++)
   {
    if(tempfrmAlpha == temptoAlpha){options.slice(tempfrm-1,tempto).addClass("selected");break;}
    for (s = 1 ; s <  fromAlphaArray.length ; s++)
    {     
     if ( tempfrmAlpha == fromAlphaArray[s] )
     {
      f = 2;      
      for( k = s + 1; k < toAlphaArray.length; k++ )
      {       
       if(temptoAlpha == toAlphaArray[k]){tempto = parseInt(tempto) - ( k - s) * strColCount; j = f;}
       f = f + 1;       
      } // for loop k ends
      recFunction(tempfrm-1,tempto-1 ,j);flagLoop=true;break;
     }
     if (flagLoop==true){break;}
    } // for loop s ends    
    if (flagLoop==true){break;}    
    ///////////////////////////////////////////// Starging from a /////////////////////////////////////////////
    for (k=1;k< fromAlphaArray.length;k++) 
    {
     if (temptoAlpha == fromAlphaArray[k]){tempto = tempto -strColCount * k  ; m = k + 1;}
    }        
    
    if (tempfrm == tempto){recFunction(tempfrm-1,tempto-1 ,m); break;}else{recFunction(tempfrm-1,tempto-1,m); break;}
    ///////////////////////////////////////////// Starging from a /////////////////////////////////////////////
   } // for loop i ends
  } // else ends
 });

 function recFunction(rectempfrm,rectempto,loopVar)
 {
  var options   
  options =  $(".sourceplate li");    
  for (i=0;i<loopVar;i++)
  {
   options.slice(rectempfrm,rectempto + 1).addClass("selected");
   rectempfrm = rectempfrm + strColCount;
   rectempto = rectempto + strColCount;
  }
 }
 

 function recFunction2(rectempfrm,rectempto,loopVar)
 {
  var options   
  options =  $(".sourceplate li");    
  for (i=0;i<loopVar;i++)
  {
   options.slice(rectempfrm,rectempto + 1).addClass("selected");
   rectempfrm = rectempfrm + strColCount;
   rectempto = rectempto + strColCount;
  }
 }
 
 
});
</script>

Place the CSS in site style tags and place in the head section of the html page

#content
{
 width:600px;
 font-size:12px; 
 margin-left:50px;

 /* width depends on sourceplate ul li width.
  Eg.  if
  ii width = 10px  body width =  400 - li  line-height:10px;
  ii width = 15px  body width =  520 - li  line-height:15px;
  ii width = 20px  body width =  640 - li  line-height:20px;
  ii width = 25px  body width =  780 - li  line-height:25px;
  ii width = 30px  body width =  900 - li  line-height:30px;  
  ii width = 35px  body width =  1020 - li  line-height:35px;  
  
  if margin-left of ul =0 else add margin-left value to body width
  
   */
}
.sourceplate ul, .sourceplate1 ul{list-style-type:none; margin-left:-40px;}
.sourceplate ul li, .sourceplate1 ul li{width:20px; height:20px; line-height:20px; color:#000; text-align:center; font-size:10px; border:1px solid #000; float:left; margin:0 2px 2px 0; background:#FFF}
.sourceplate ul li.selected {background:yellow;}
ul{display:block; height:auto;}
p{margin:0 2px 2px 0;}
.lft{float:left}
.clear{clear:both}
.source-lft{width:20px; margin:-11px 0 0 0}
.source-lft ul li{width:20px; height:20px; line-height:20px; color:#000; text-align:center; font-size:10px; border:1px solid #000; float:left; margin:0 2px 2px 0; background:#FFF}

.source-rgt{width:576px; margin:-11px 0px 0 4px}
.source-rgt ul li{width:20px; height:20px; line-height:20px; color:#000; text-align:center; font-size:10px; border:1px solid #000; float:left; margin:0 2px 2px 0; background:#FFF; float:left}

Thursday, June 2, 2011

jquery select row , column matrix - Version 1

Selecting row, columns of a Matrix in jquery version one.

Click here to see the Demo. [ Note the javascript is having lot of repeated code version two will be posted soon with reduce no of lines of javascipt code]

Range can be selected with values in the From , To input box some sample inputs are

1. From a1 To p25
2. From b1 To b15
3. From a10 To a15
4. From a1 To p24
5. From d9 To k 15

From input box should have alphabet values less than To input box alphabet.
Also From input box numeric value should be less than or equal to To input box numeric value.

Screen shot of the demo

HTML Code

<div class="top_adj1 lft"> <span>From</span><input type="text" id="fromVal" /> <span>To</span><input type="text" id="toVal" /> <input type="button" id="btnClick" value="Submit" /> </div> <br /> <p> <input type="checkbox" id="selAll" />Select All <input type="checkbox" id="selFirstQuarter" />Select 1st Qtr <input type="checkbox" id="selSecondQuarter" />Select 2nd Qtr <input type="checkbox" id="selThirdQuarter" />Select 3rd Qtr <input type="checkbox" id="selFourthQuarter" />Select 4th Qtr </p> <div class="sourceplate1 top_adj1 lft"> <ul> <li></li> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li> <li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li> </ul> </div> <div class="sourceplate"> <ul> <li>A</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>B</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>C</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>D</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>E</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>F</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>G</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>H</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>I</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>J</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>K</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>L</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>M</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>N</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>O</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li>P</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div>

Place the Javascript code inside script tags, and place in Head section of the HTML page.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 var options   
 options =  $(".sourceplate li");

 $("#selFirstQuarter").click(function()
 {
  if($(this).is(':checked'))
  {
   options.slice(0,401).removeClass("selected");
   $('#selAll').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);
   recFunction(1,12,8);
  }
  else
  {
   options.slice(0,401).removeClass("selected");
  } 
 })

 $("#selSecondQuarter").click(function()
 {
  if($(this).is(':checked'))
  {
   options.slice(0,401).removeClass("selected");
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);
   recFunction(13,24,8);
  }
  else
  {
   options.slice(0,401).removeClass("selected");
  } 
 })

 $("#selThirdQuarter").click(function()
 {
  if($(this).is(':checked'))
  {
   options.slice(0,401).removeClass("selected");
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);
   recFunction(201,212,8);
  }
  else
  {
   options.slice(0,401).removeClass("selected");
  } 
 })

 $("#selFourthQuarter").click(function()
 { 
  if($(this).is(':checked'))
  {
   options.slice(0,401).removeClass("selected");
   $('#selAll').attr('checked', false);
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   recFunction(213,224,8);
  }
  else
  {
   options.slice(0,401).removeClass("selected");
  } 
 })
  
 $("#selAll").click(function()
 { 
  if($(this).is(':checked'))
  {
   $('#selFirstQuarter').attr('checked', false);
   $('#selSecondQuarter').attr('checked', false);
   $('#selThirdQuarter').attr('checked', false);
   $('#selFourthQuarter').attr('checked', false);
   options.slice(0,401).addClass("selected")
  }
  else
  {
   options.slice(0,401).removeClass("selected")
  }  
   
  removeFirstColBgStyle();
 })

 $(".sourceplate li").click(function()
 {
  $(".sourceplate li").eq($(this).index()).toggleClass("selected");  
  removeFirstColBgStyle();  
 });

 $("#btnClick").click(function(event)
 {
  var tempfrm
  var tempto 
  var tempfrmAlpha
  var temptoAlpha 
  var frmValStr 
  var toValStr 
  var frmVal
  var toVal 
  
  var fromAlphaArray=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p"];
  var toAlphaArray=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p"];   

  options.slice(0,401).removeClass("selected"); 
  
  frmValStr = $("#fromVal").val();
  toValStr = $("#toVal").val();
  
  frmVal = parseInt($("#fromVal").val());
  toVal = parseInt($("#toVal").val())+1;        
  
  tempfrm = frmValStr.substring(1, frmValStr.length );
  tempto = toValStr.substring(1, toValStr.length );

  tempfrmAlpha = frmValStr.substring(0, 1);
  temptoAlpha = toValStr.substring(0, 1);
  
  
  if (tempfrmAlpha == "b"){tempfrm = parseInt(tempfrm) + 25;}
  if (tempfrmAlpha == "c"){tempfrm = parseInt(tempfrm)  + 50;}
  if (tempfrmAlpha == "d"){tempfrm = parseInt(tempfrm) + 75;}
  if (tempfrmAlpha == "e"){tempfrm = parseInt(tempfrm)  + 100;}
  if (tempfrmAlpha == "f"){tempfrm = parseInt(tempfrm) + 125;}
  if (tempfrmAlpha == "g"){tempfrm = parseInt(tempfrm) + 150;}
  if (tempfrmAlpha == "h"){tempfrm = parseInt(tempfrm)  + 175;}
  if (tempfrmAlpha == "i"){tempfrm = parseInt(tempfrm) + 200;}  
  if (tempfrmAlpha == "j"){tempfrm = parseInt(tempfrm) + 225;}
  if (tempfrmAlpha == "k"){tempfrm = parseInt(tempfrm) + 250;}  
  if (tempfrmAlpha == "l"){tempfrm = parseInt(tempfrm) + 275;}
  if (tempfrmAlpha == "m"){tempfrm = parseInt(tempfrm) + 300;}
  if (tempfrmAlpha == "n"){tempfrm = parseInt(tempfrm) + 325;}  
  if (tempfrmAlpha == "o"){tempfrm = parseInt(tempfrm) + 350;}
  if (tempfrmAlpha == "p"){tempfrm = parseInt(tempfrm) + 375;}   
  
  if (temptoAlpha == "b"){tempto = parseInt(tempto)  + 25;}
  if (temptoAlpha == "c"){tempto = parseInt(tempto)  + 50;}
  if (temptoAlpha == "d"){tempto = parseInt(tempto)+ 75;}
  if (temptoAlpha == "e"){tempto = parseInt(tempto)+ 100;}
  if (temptoAlpha == "f"){tempto = parseInt(tempto)+ 125;}
  if (temptoAlpha == "g"){tempto = parseInt(tempto)+ 150;}
  if (temptoAlpha == "h"){tempto = parseInt(tempto)+ 175;}
  if (temptoAlpha == "i"){tempto = parseInt(tempto)+ 200;}  
  if (temptoAlpha == "j"){tempto = parseInt(tempto)+ 225;}
  if (temptoAlpha == "k"){tempto = parseInt(tempto)+ 250;}  
  if (temptoAlpha == "l"){tempto = parseInt(tempto)+ 275;}
  if (temptoAlpha == "m"){tempto = parseInt(tempto)+ 300;}
  if (temptoAlpha == "n"){tempto = parseInt(tempto)+ 325;}  
  if (temptoAlpha == "o"){tempto = parseInt(tempto)+ 350;}
  if (temptoAlpha == "p"){tempto = parseInt(tempto)+ 375;} 

/*  for (i=1;i< fromAlphaArray.length;i++)
  {
   if(tempfrmAlpha == fromAlphaArray[i]){tempfrm = parseInt(tempfrm) + i * 25;}
  }  

  for (i=1;i< toAlphaArray.length;i++)
  {
   if(temptoAlpha == toAlphaArray[i]){tempto = parseInt(tempto)  + i * 25;}   
  } */ 
  
  
  tempto  = parseInt(tempto); 
  tempfrm = parseInt(tempfrm);
  //alert(tempfrm + ' - ' + tempto);
  for (i=tempfrm;i<tempto+1;i++)
  {
   //if(tempfrmAlpha == temptoAlpha){options.slice(tempfrm,tempto+1).css("background","yellow");break;}
   if(tempfrmAlpha == temptoAlpha){options.slice(tempfrm,tempto + 1 ).addClass("selected");break;}


   ///////////////////////////////////////////// Starging from b /////////////////////////////////////////////
   if (tempfrmAlpha == "b")
   {
    if (temptoAlpha == "c"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "d"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "e"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "f"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "g"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "h"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "i"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "j"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "k"){tempto = tempto -225 ;i=10;} 
    if (temptoAlpha == "l"){tempto = tempto -250 ;i=11;} 
    if (temptoAlpha == "m"){tempto = tempto -275 ;i=12;} 
    if (temptoAlpha == "n"){tempto = tempto -300 ;i=13;} 
    if (temptoAlpha == "o"){tempto = tempto -325 ;i=14;} 
    if (temptoAlpha == "p"){tempto = tempto -350 ;i=15;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}   
   }   
   ///////////////////////////////////////////// Starging from b /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from c /////////////////////////////////////////////
   if (tempfrmAlpha == "c")
   {
    if (temptoAlpha == "d"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "e"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "f"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "g"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "h"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "i"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "j"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "k"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "l"){tempto = tempto -225 ;i=10;} 
    if (temptoAlpha == "m"){tempto = tempto -250 ;i=11;} 
    if (temptoAlpha == "n"){tempto = tempto -275 ;i=12;} 
    if (temptoAlpha == "o"){tempto = tempto -300 ;i=13;} 
    if (temptoAlpha == "p"){tempto = tempto -325 ;i=14;} 
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}  
   }   
   ///////////////////////////////////////////// Starging from c /////////////////////////////////////////////


   ///////////////////////////////////////////// Starging from d /////////////////////////////////////////////
   if (tempfrmAlpha == "d")
   {
    if (temptoAlpha == "e"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "f"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "g"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "h"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "i"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "j"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "k"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "l"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "m"){tempto = tempto -225 ;i=10;} 
    if (temptoAlpha == "n"){tempto = tempto -250 ;i=11;} 
    if (temptoAlpha == "o"){tempto = tempto -275 ;i=12;} 
    if (temptoAlpha == "p"){tempto = tempto -300 ;i=13;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;} 
   }   
   ///////////////////////////////////////////// Starging from d /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from e /////////////////////////////////////////////
   if (tempfrmAlpha == "e")
   {
    if (temptoAlpha == "f"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "g"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "h"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "i"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "j"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "k"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "l"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "m"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "n"){tempto = tempto -225 ;i=10;} 
    if (temptoAlpha == "o"){tempto = tempto -250 ;i=11;} 
    if (temptoAlpha == "p"){tempto = tempto -275 ;i=12;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;} 
   }   
   ///////////////////////////////////////////// Starging from e /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from f /////////////////////////////////////////////
   if (tempfrmAlpha == "f")
   {
    if (temptoAlpha == "g"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "h"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "i"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "j"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "k"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "l"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "m"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "n"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "o"){tempto = tempto -225 ;i=10;} 
    if (temptoAlpha == "p"){tempto = tempto -250 ;i=11;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}  
   }   
   ///////////////////////////////////////////// Starging from f /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from g /////////////////////////////////////////////
   if (tempfrmAlpha == "g")
   {
    if (temptoAlpha == "h"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "i"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "j"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "k"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "l"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "m"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "n"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "o"){tempto = tempto -200 ;i=9;}
    if (temptoAlpha == "p"){tempto = tempto -225 ;i=10;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}   
   }   
   ///////////////////////////////////////////// Starging from g /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from h /////////////////////////////////////////////
   if (tempfrmAlpha == "h")
   {
    if (temptoAlpha == "i"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "j"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "k"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "l"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "m"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "n"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "o"){tempto = tempto -175 ;i=8;}    
    if (temptoAlpha == "p"){tempto = tempto -200 ;i=9;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}   
   }   
   ///////////////////////////////////////////// Starging from h /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from i /////////////////////////////////////////////
   if (tempfrmAlpha == "i")
   {
    if (temptoAlpha == "j"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "k"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "l"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "m"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "n"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "o"){tempto = tempto -150 ;i=7;} 
    if (temptoAlpha == "p"){tempto = tempto -175 ;i=8;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}    
   }   
   ///////////////////////////////////////////// Starging from i /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from j /////////////////////////////////////////////
   if (tempfrmAlpha == "j")
   {
    if (temptoAlpha == "k"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "l"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "m"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "n"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "o"){tempto = tempto -125 ;i=6;} 
    if (temptoAlpha == "p"){tempto = tempto -150 ;i=7;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}
   }   
   ///////////////////////////////////////////// Starging from j /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from k /////////////////////////////////////////////
   if (tempfrmAlpha == "k")
   {
    if (temptoAlpha == "l"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "m"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "n"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "o"){tempto = tempto -100 ;i=5;}    
    if (temptoAlpha == "p"){tempto = tempto -125 ;i=6;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}    
   }   
   ///////////////////////////////////////////// Starging from k /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from L /////////////////////////////////////////////
   if (tempfrmAlpha == "l")
   {
    if (temptoAlpha == "m"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "n"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "o"){tempto = tempto -75 ;i=4;} 
    if (temptoAlpha == "p"){tempto = tempto -100 ;i=5;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}   
   }   
   ///////////////////////////////////////////// Starging from L /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from m /////////////////////////////////////////////
   if (tempfrmAlpha == "m")
   {
    if (temptoAlpha == "n"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "o"){tempto = tempto -50 ;i=3;}          
    if (temptoAlpha == "p"){tempto = tempto -75 ;i=4;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}
    
   }   
   ///////////////////////////////////////////// Starging from m /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from n /////////////////////////////////////////////
   if (tempfrmAlpha == "n")
   {
    if (temptoAlpha == "o"){tempto = tempto -25 ;i=2;}    
    if (temptoAlpha == "p"){tempto = tempto -50 ;i=3;}
    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}    
   }   
   ///////////////////////////////////////////// Starging from n /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from o /////////////////////////////////////////////
   if (tempfrmAlpha == "o")
   {
    if (temptoAlpha == "p"){tempto = tempto -25 ;i=2;}    
    if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;}
   }   
   ///////////////////////////////////////////// Starging from o /////////////////////////////////////////////

   ///////////////////////////////////////////// Starging from a /////////////////////////////////////////////
   if (temptoAlpha == "b"){tempto = tempto -25 ;i=2;}    
   if (temptoAlpha == "c"){tempto = tempto -50 ;i=3;}          
   if (temptoAlpha == "d"){tempto = tempto -75 ;i=4;} 
   if (temptoAlpha == "e"){tempto = tempto -100 ;i=5;}    
   if (temptoAlpha == "f"){tempto = tempto -125 ;i=6;} 
   if (temptoAlpha == "g"){tempto = tempto -150 ;i=7;} 
   if (temptoAlpha == "h"){tempto = tempto -175 ;i=8;}    
   if (temptoAlpha == "i"){tempto = tempto -200 ;i=9;}
   if (temptoAlpha == "j"){tempto = tempto -225 ;i=10;} 
   if (temptoAlpha == "k"){tempto = tempto -250 ;i=11;} 
   if (temptoAlpha == "l"){tempto = tempto -275 ;i=12;} 
   if (temptoAlpha == "m"){tempto = tempto -300 ;i=13;} 
   if (temptoAlpha == "n"){tempto = tempto -325 ;i=14;}
   if (temptoAlpha == "o"){tempto = tempto -350 ;i=15;}
   if (temptoAlpha == "p"){tempto = tempto -375 ;i=16;}         
   
   if (tempfrm == tempto){recFunction(tempfrm,tempto,i);break;}else{recFunction(tempfrm,tempto,i);break;} 
   ///////////////////////////////////////////// Starging from a /////////////////////////////////////////////
  }

  removeFirstColBgStyle();

 });

 function recFunction(rectempfrm,rectempto,loopVar)
 {
  var options   
  options =  $(".sourceplate li");    
  for (i=0;i<loopVar;i++)
  {
   options.slice(rectempfrm,rectempto + 1).addClass("selected");
   rectempfrm = rectempfrm + 25;
   rectempto = rectempto + 25;
  }
 }
 
 //////////// Remove background color for first column [A - P]  ////////////
 function removeFirstColBgStyle()
 { 
   for (i=0;i<=375;i=i+25)
   {
    j= i +1;
    options.slice(i,j).removeClass("selected");
   }
 }
 //////////// Remove background color for first column [A - P]  ////////////  
});
</script>

Friday, December 3, 2010

India Populatin Map - Google geomap visualisation api

India Populatin Map - Google geomap visualisation api

See picture below.

* view demo
* similar sample1

Paste the following in the head tag of the HTML page

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
 <script>
  google.load('visualization', '1', {'packages': ['geomap']});
  google.setOnLoadCallback(drawMap2);

  function drawMap2()
  {
   var data2 = new google.visualization.DataTable();

   data2.addRows(35);

   data2.addColumn('string', 'State');
   data2.addColumn('number', 'Population');

   data2.setValue(0, 0, 'Andhra Pradesh');
   data2.setValue(0, 1, 76210007);

   data2.setValue(1, 0, 'Arunachal Pradesh');
   data2.setValue(1, 1, 1097968);   

   data2.setValue(2, 0, 'Assam');
   data2.setValue(2, 1, 26655528);   

   data2.setValue(3, 0, 'Bihar');
   data2.setValue(3, 1, 82998509);

   data2.setValue(4, 0, 'Chhattisgarh');
   data2.setValue(4, 1, 20833803);

   data2.setValue(5, 0, 'Goa');
   data2.setValue(5, 1, 1347668);

   data2.setValue(6, 0, 'Gujarat');
   data2.setValue(6, 1, 50671017);

   data2.setValue(7, 0, 'Haryana');
   data2.setValue(7, 1, 21144564);

   data2.setValue(8, 0, 'Himachal Pradesh');
   data2.setValue(8, 1, 6077900);

   data2.setValue(9, 0, 'Jammu and Kashmir');
   data2.setValue(9, 1, 10143700);

   data2.setValue(10, 0, 'Jharkhand');
   data2.setValue(10, 1, 26945829);

   data2.setValue(11, 0, 'Karnataka');
   data2.setValue(11, 1, 52850562);   

   data2.setValue(12, 0, 'Kerala');
   data2.setValue(12, 1, 31841374);
      
   data2.setValue(13, 0, 'Madhya Pradesh');
   data2.setValue(13, 1, 60348023);

   data2.setValue(14, 0, 'Maharashtra');
   data2.setValue(14, 1, 96878627);

   data2.setValue(15, 0, 'Manipur');
   data2.setValue(15, 1, 2293896);

   data2.setValue(16, 0, 'Meghalaya');
   data2.setValue(16, 1, 2318822);

   data2.setValue(17, 0, 'Mizoram');
   data2.setValue(17, 1, 888573);

   data2.setValue(18, 0, 'Nagaland');
   data2.setValue(18, 1, 1990036);

   data2.setValue(19, 0, 'Orissa');
   data2.setValue(19, 1, 36804660);

   data2.setValue(20, 0, 'Punjab');
   data2.setValue(20, 1, 24358999); 

   data2.setValue(21, 0, 'Rajasthan');
   data2.setValue(21, 1, 56507188);     

   data2.setValue(22, 0, 'Sikkim');
   data2.setValue(22, 1, 540851);
   
   data2.setValue(23, 0, 'Tamil Nadu');
   data2.setValue(23, 1, 62405679);

   data2.setValue(24, 0, 'Tripura');
   data2.setValue(24, 1, 3199203);

   data2.setValue(25, 0, 'Uttar Pradesh');
   data2.setValue(25, 1, 166197921);

   //note Uttarakhand will not work
   
   data2.setValue(26, 0, 'Uttaranchal');
   data2.setValue(26, 1, 8489349);

   data2.setValue(27, 0, 'West Bengal');
   data2.setValue(27, 1, 80176197);
   

   data2.setValue(28, 0, 'Delhi');
   data2.setValue(28, 1, 13850507);

   data2.setValue(29, 0, 'Andaman and Nicobar Islands');
   data2.setValue(29, 1, 356152);

   data2.setValue(30, 0, 'Chandigarh');
   data2.setValue(30, 1, 900635);

   data2.setValue(31, 0, 'Dadra and Nagar Haveli');
   data2.setValue(31, 1, 220490);

   data2.setValue(32, 0, 'Daman and Diu');
   data2.setValue(32, 1, 158204);

   data2.setValue(33, 0, 'Lakshadweep');
   data2.setValue(33, 1, 60650);

   data2.setValue(34, 0, 'Puducherry');
   data2.setValue(34, 1, 974345);

   var options = {};
   options['region'] = 'IN';
   options['width'] = '800px';
   options['height'] = '800px';
   options['dataMode'] = 'regions';

   var container2 = document.getElementById('map_canvas');
   var geomap2 = new google.visualization.GeoMap(container2);
   geomap2.draw(data2, options)   
     
  }  
  
 </script>

And place the following inside body tag of the HTML page

<div id='map_canvas'></div>

<a href="http://www.censusindia.gov.in/Census_Data_2001/Census_data_finder/A_Series/Total_population.htm">Source: Census of India 2001</a>

<br />

Note:
* If you are targetting India, Maps is the better way to go as the Visualization API has cut off a major portion of the J&K.

* The total population and rural population include estimated population of 127,108 for Mao Maram, Paomata and Purul sub-divisions of Senapati district of Manipur. India%u2019s population without the estimated population of these areas is 1,028,610,328 (532,156,772 males and 496,453,556 females)
Note : - Includes estimated population of Paomata, Mao Maram and Purul Sub-division of Senapati district of Manipur.

* view demo
* similar sample1