jquery: 2011

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