How to create a simple “5 Star Rating”

Here we go for a simple 5 star rating.

Output:

output

HTML:

<div ratingamount="5" maxrating="10"></div>

JS:

//Rating Star JS
$('.ratingstar').each(function(){
  var ratingamount = $(this).attr('ratingamount');
  var maxrating = $(this).attr('maxrating');
  $(this).html('<a id="rstar_1" class="rstar"></a>'
              +'<a id="rstar_2" class="rstar"></a>'
              +'<a id="rstar_3" class="rstar"></a>'
              +'<a id="rstar_4" class="rstar"></a>'
              +'<a id="rstar_5" class="rstar"></a>');
  var perstar_value = (maxrating / 5);
  var k = ratingamount;
  for (i=1; i<=5; i++) {
    var step_val = i * perstar_value;
    if(step_val <= ratingamount) {
      $(this).find('#rstar_'+i).addClass('full');
    } else if((step_val > ratingamount) & (k > 0)) {
      $(this).find('#rstar_'+i).addClass('half');
    } else {
      $(this).find('#rstar_'+i).addClass('empty');
    }
    k = k - perstar_value;
  }
});

Image for CSS:

rating

CSS:

/* Rating Star CSS */
.ratingstar {
  display: inline-block;
}
.ratingstar .rstar{
  background: url(rating.png) scroll no-repeat 0 0 transparent;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.ratingstar .rstar.full {
  background-position: 0 0;
}
.ratingstar .rstar.half {
  background-position: 0 -24px;
}
.ratingstar .rstar.empty {
  background-position: 0 -48px;
}
Advertisements

Problem with Jquery Corner plugin at firefox 4 ?

If your jquery.corner.js is not working with firefox 4 then a small modification of your plugin can make it OK for firefox 4.

Open your jquery.corner.js file. At the beginning of the code you will find some code like

var style = document.createElement('div').style;
var moz = style['MozBorderRadius'] !== undefined;
var webkit = style['WebkitBorderRadius'] !== undefined;
var radius = style['BorderRadius'] !== undefined;

In this plugin,

var moz = style['MozBorderRadius'] !== undefined;

was actually for firefox. But from firefox 4 there is no longer exists -moz-radius, that means style[‘MozBorderRadius’] will not work for firemox 4 anymore.

For firefox 4, they use the standard “border-radius” for curve corner of an element. So change the line

var radius = style['BorderRadius'] !== undefined;

to

var radius = (style['BorderRadius'] || style['borderRadius']) !== undefined;

This change of  jquery.corner.js plugin will work for both old firefox version as well as Firefox 4.

cheers!

Drupal – Clear cache from module

In Drupal, if you need to clear cache from your module then you can add this code when you need to clear cache. Mostly when we create a custom FORM to add/edit/delete anything other than node, we may need to clear cache.

Code:

function MODULENAME_flush_cache(){
  // this will clear any type of cache
  cache_clear_all(NULL, 'cache_block');
  cache_clear_all(NULL, 'cache_page');
  cache_clear_all('*', 'cache', TRUE);
  cache_clear_all('*', 'content', TRUE);
  cache_clear_all('*', 'cache_page', TRUE);
  cache_clear_all('*', 'cache_menu', TRUE);
  cache_clear_all('*', 'cache_filter', TRUE);
}

Create Tag Cloud from Array in PHP

Tag cloud is a popular representation in web now a days. Most of the time we use plugin or something like that to show tag cloud. If you want to create a tag cloud from an ARRAY in PHP, follow me..

Let we want to create tag cloud for ‘fruits’ of our site. and assume we have some fruits named  ‘Apple’, ‘Banana’, ‘Mango’, ‘Orange’ etc.. where the amount of this fruit is 4, 12, 6, 17 correspondingly. and we want when we click on an item in the cloud it will go to different links like, “http://mysite.com/mango&#8221;, “http://mysite.com/banana&#8221; etc..

So we need to build an array like,

<?php
$fruits[0] = array ('name' => 'Apple',  'amount' => 4, 'link' => "http://mysite.com/apple");
$fruits[1] = array ('name' => 'Banana',  'amount' => 12, 'link' => "http://mysite.com/banana");
$fruits[2] = array ('name' => 'Mango',  'amount' => 17, 'link' => "http://mysite.com/mango");
?>
and so on..

Now add this function to your code,

<?php
function themeTagCloud($tagarray)
{
  $maxsize = 30;
  $minsize = 10;

  $tagstmp = array();
  foreach ($tagarray as $key => $value) {
    $tagstmp[$value['name']] = $value['amount'];
  }
  $maxqty = @max(array_values($tagstmp));
  $minqty = @min(array_values($tagstmp));

  $spread = $maxqty - $minqty;
  if ($spread == 0) $spread = 1;
  $step = ($maxsize - $minsize) / ($spread);

  $output = '';
  foreach ($tagarray as $key => $value)  {
    $size = round($minsize + (($value['amount'] - $minqty) * $step));
    $output .= '<a href="'.$value['link'].'" style="font-size:'.$size.'px;" title="'.$value['amount'].' times">'.$value['name'].'</a>'; // For normal PHP
  }
  return $output;
}
?>

now call this function from where you wnat to show your array as a tag cloud.

<?php print themeTagCloud($fruits); ?>

Enough! :)

—————————————————————————————————————-

If you have a plain array like this,

<?php $fruits = array('banana', 'banana', 'apple', 'banana', 'kiwi', 'apple', 'banana'); ?>

Then Use this function

<?php
function themeTagCloud($tags = array()) {
  $maxsize = 30;
  $minsize = 10;

  $tagstmp = array_count_values($tags);
  $maxqty = @max(array_values($tagstmp));
  $minqty = @min(array_values($tagstmp));

  $spread = $maxqty - $minqty;
  if ($spread == 0) $spread = 1;
  $step = ($maxsize - $minsize) / ($spread);

  $output = '';
  foreach ($tagstmp as $name => $amount) {
    $size = round($minsize + (($amount - $minqty) * $step));
    $output .= '<a style=\"font-size:'.$size.'px;\" title=\"'.$amount.' times\">'.$name.'</a>';
  }
  return $output;
}
?>

try it,

<?php echo themeTagCloud($fruits); ?>

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.  :)

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>