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}
Posted by Unknown at 1:31 AM 0 comments

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>
Posted by Unknown at 10:47 PM 0 comments
Subscribe to: Posts (Atom)