Drupal – Adding a clolor picker with your form item.

Drupal has its own color picker system. Drupal’s Farbtastic is very easy to add a color picker with your drupal form.

here is the code for your form item.

drupal_add_css('misc/farbtastic/farbtastic.css');
drupal_add_js('misc/farbtastic/farbtastic.js');
$form ['site_pagetitlecolor'] = array(
   '#type' => 'textfield',
   '#title' => t('Page Title Color'),
   '#default_value' => '#FFF',
   '#description' => '<div id="site_pagetitlecolor_colorpicker"></div>',
   '#size' => 9,
   '#maxlength' => 7,
   '#suffix' => "<script type='text/javascript'>
     $(document).ready(function() {
       $('#site_pagetitlecolor_colorpicker').farbtastic('#edit-site-pagetitlecolor');
     });
   </script>"
 );?

Adding this will provide your form item with a color picker.  :)

Advertisements

Jquery – Filtering a table rows.

Here’s an useful code to filter a table with keyword. This is mostly used when we need to find some specific rows from a long table.

1. 1st of all your table must have ID, ie.

<table id="mytableid">
  <thead>
    <tr> <th>Item 1</th> <th>Item 2</th> <th>Item 3</th> </tr>
    </thead>
  <tbody>
    <tr class="odd" style=""> <td>...</td> <td>...</td> <td>...</td> </tr>
    <tr class="even" style=""> <td>...</td> <td>...</td> <td>...</td> </tr>
  </tbody>
</table>

2. Add this javascript function with your Jquery JS file or HTML.

<script type="text/javascript"> 
function filter_table_row(tableid){    
 var filter_form = '<div style="padding: 5px 0;">Filter : <input type="text" name="filter-'+tableid+'" value="" size="50" /></div>';    
 $(tableid).parent().prepend(filter_form);    
 $('input[name=filter-'+tableid+']').focus().keyup(function() {      
 var filterword = $(this).val();
 filterword = filterword.replace('(', '');
 filterword = filterword.replace(')', '');
 filterword = filterword.replace('"', '');
 filterword = filterword.replace('#', '');
 filterword = filterword.replace('$', '');
    $(tableid+' tbody tr:not(:contains("' + filterword + '"))').hide();
    $(tableid+' tbody tr:contains("' + filterword + '")').show();
  }); 
} 
</script>

3. Now from your HTML or JS file call this function with the table ID

<script type="text/javascript"> filter_table_row('mytableid'); </script>

– This will automatically make your table filterable.

<table width=”100%” class=”sticky-enabled” id=”pwcs_productdeatils_alloptions_table”>
<thead><tr><th style=”padding-left: 30px;” colspan=”2″>Attribute Group : Attribute</th><th>Sub SKU</th><th>Stock on hand</th><th>Price Change</th> </tr></thead>
<tbody>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-112″></td><td>COLOR : <b>RED</b></td><td>SUB SKU – 1</td><td>12</td><td>Add $12.5</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-113″></td><td>COLOR : <b>BLUE</b></td><td>SUB SKU – 2</td><td>12</td><td>Add $11</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-114″></td><td>COLOR : <b>RED</b> | SIZE : <b>SMALL</b></td><td>SUB SKU – 3</td><td>12</td><td>Add $10</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-115″></td><td>COLOR : <b>RED</b> | SIZE : <b>MEDIUM</b></td><td>SUB SKU – 4</td><td>12</td><td>Add $11</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-116″></td><td>COLOR : <b>RED</b> | SIZE : <b>LARGE</b></td><td>SUB SKU – 5</td><td>12</td><td>Add $9</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-117″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>SMALL</b></td><td>SUB SKU – 6</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-118″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>MEDIUM</b></td><td>SUB SKU – 7</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-119″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>LARGE</b></td><td>SUB SKU – 8</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-120″></td><td>SIZE : <b>SMALL</b></td><td>SUB SKU – 9</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-121″></td><td>SIZE : <b>MEDIUM</b></td><td>SUB SKU – 10</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-122″></td><td>SIZE : <b>LARGE</b></td><td>SUB SKU – 11</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-123″></td><td>COLOR : <b>RED</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 12</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-124″></td><td>COLOR : <b>BLUE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 13</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-125″></td><td>COLOR : <b>RED</b> | SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 14</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-126″></td><td>COLOR : <b>RED</b> | SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 15</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-127″></td><td>COLOR : <b>RED</b> | SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 16</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-128″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 17</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-129″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 18</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-130″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 19</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-131″></td><td>SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 20</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-132″></td><td>SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 21</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-133″></td><td>SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 22</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-134″></td><td>MATERIALS : <b>COTTON</b></td><td>SUB SKU – 23</td><td>12</td><td>Add $12</td> </tr>
</tbody>
</table>