Raty: a great rating plugin for jQuery

A project that I am currently working on requires users to write product reviews. A standard feature of any review system is to allow the user to rate the product. A quick google search lead me to jQuery.Raty by Washington Botelho (@wbotelhos). I wanted to find something that would be very quick to implement, and requires minimalistic code. Raty does just that. With excellent documentation, I had this up and running within mere minutes.

Implimentation

Since Raty is a plugin for jQuery, you will need to include jQuery as a dependancy:

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

<script type="text/javascript" src="/js/jQuery.Raty.js"></script>

 

Using raty is very straight forward. Consider:

<div class="raty"></div>
<script type="text/javascript"></script>

This will give you the default implementation without any options being set, however I wanted to expand on this further. I wanted to ensure that:

  • I could use custom images on the scale
  • I could have half ‘stars’ for ratings rather than sticking to whole numbers
  • …and most importantly, post the result back to the server

Raty allowed for all of these requirements, and so I ended up with:

<div class="raty"></div>
<script type="text/javascript">
        $('.raty').raty(
            {
                path: '/images/raty',
                half: true,
                target: '#Rating',
                targetType: 'score',
                targetKeep: true
            });
</script>

It’s important to note the use of the target settings in the above snippet. Raty will show the selected rating on another element by setting it’s ID. I used a textbox with ID “Rating” and set the targetType to “score”. This gave me a numerical value in a textbox that I can then post back to the server for processing into the database. It’s also important to set targetKeep to “true” else the value will not stay in the textbox once set(it just updates as you hover over the stars), and thus won’t be there when you come to post back.

If like me you are using ASP.NET Webforms, you need to set the ClientIDMode of the textbox to “Static” so that the resulting element’s ID is “Rating” and not ASP’s abomination of an ID like: “ctl00_ContentPlaceHolder1_Rating” when ClientIDMode is set to the default “Inherit”.

<asp:TextBox ID="Rating" runat="server" hidden="hidden" ClientIDMode="Static"></asp:TextBox>

Further to being able to just set a rating, I also wanted to make sure that I can display the rating on a separate page, but not allow the user to submit an anonymous rating on that page. Raty’s readonly setting coupled with applying data-score=”4.5″ to the target div element made this possible.

<div data-score="1"></div>
$('div').raty({
  readOnly: true,
  score: function() {
    return $(this).attr('data-score');
  }
});

Overall I’m very impressed with this plugin as it has allowed me, a non-javascript developer, to quickly implement it.

If you have any issues with the plugin, check out the comments on the plugin’s documentation page. Most of the common issues other have had are addressed there by the developer himself.

CSS Reset

Taken from: http://meyerweb.com/eric/tools/css/reset/, this CSS reset has been the most effective one i’ve ever used. Typically I just include it as a separate stylesheet to my main styles just for ease of use, neatness and so I don’t end up with giant style sheets that can hinder development down the line.

This CSS is free to use, and doesn’t come with any licensing, however out of gratitude, I keep the commented info from the original author.

The css:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Many thanks to Eric A. and Kathryn S. Meyer.

WordPress and Google Indexing Fail

I’m posting this after spending about an hour, each day, for the past few weeks scratching my head, wondering why Google wouldn’t index my companies blog.

If you’re using a wordpress and are discovering that your website is being crawled but not indexed, check that your META tags in the client side HTML are written correctly. It may seem trivial, but It’s often overlooked.

I had done everything – checked WordPress’s read settings, gone over all the FAQ’s, ReadMe’s, Forum Posts, Regularlly updated the sitemap, Fetched as Google and Filed a reconsideration request. Net result? Nada.

So what was the error?


<meta name="robots" content="none" />
<meta name="googlebot" content="none" />

These 2 lines of HTML, hidden in the mountain of other HEAD tags where stopping Google (and other search engines) from indexing the website. After removing the PHP which retrieved the settings from the theme (These settings didn’t seem to work anyway), I hard coded the tags manually by writing:


<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

I’m 99.99999999999999999999999999999999% certain I should start seeing results in the next few days, after this change.

Oh and, DOH!

More to follow…