Comments on: Rating an Object Pattern

By: Beck Laxton

Beck Laxton — Thu, 22 May 2008 14:10:39 +0000

I’d like to suggest an improvement. In the example animation, I think it’s confusing that a three-star review is called ‘Average’ (as opposed to Bad, or Excellent), but the same word is used to show the ‘Average Rating’ - so at a glance you might think that the item had been rated Average, rather than the average review rating it as good.

You could cure this really simply by making a three-star review ‘Okay’ or something similar. (I’d change this rather than the other as there are more options.)

By: Dave Gregory

Dave Gregory — Thu, 12 Oct 2006 20:56:14 +0000

I looked around for some code of this and found that the main artcile about the rating pattern:

Yahoo! ratings pattern page

it has links on it for examples and this was the best one:

Yahoo Tech

By: Marcus Engene

Marcus Engene — Wed, 05 Jul 2006 08:43:43 +0000

I wanted to save place, using the same stars for the user to select the grade. This was very easy with negative margin. It’s basically three divs with the following styles:

z-index: 1; width: 90px; height: 18px; background-image: url(/v4icons/star_white18×18.gif); background-repeat: repeat-x;

style=”z-index: 2; margin: -18px 0px; width: ‘ . $width . ‘px; height: 18px; background-image: url(/v4icons/star_red18×18.gif); background-repeat: repeat-x;

style=”z-index: 3; margin: -18px 0px; width: 0px; height: 18px; background-image: url(/v4icons/star_yellow18×18.gif); background-repeat: repeat-x;

Red is users grade. One star is 18px wide, a grade of 2.3 would require width of red stars div to be round(2.3*18)

Callbacks set width of the yellow stars when user mouseovers etc.
documents.getElementById(”idOfYellow”).style.width = stars_selected_times_18 + “px”;

Obviously, the divs do best in a left aligned environment ;-)

By: kevinknight

kevinknight — Thu, 30 Mar 2006 19:48:18 +0000

Dotcompals!
Let me repeat again for you. Here is the php and js sample.

http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/

It’s very simple to apply at your own site.

By: dotcompals

dotcompals — Tue, 28 Mar 2006 07:33:04 +0000

From where I can get the php source file to implement the rate this article in my website?

By: Martin Smith

Martin Smith — Thu, 09 Mar 2006 20:04:02 +0000

I think this is the Yahoo JavaScript…

http://us.js2.yimg.com/us.yimg.com/lib/ls/js/yg_multirate_200602281800.js

By: kevinknight

kevinknight — Wed, 08 Mar 2006 14:13:07 +0000

here is the code i found.
http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/

By: Scott

Scott — Sun, 05 Mar 2006 02:23:22 +0000

Anyone mention code?

By: Mike

Mike — Tue, 28 Feb 2006 20:46:39 +0000

We are still anxiously awaiting code…

By: laurent

laurent — Fri, 17 Feb 2006 10:18:00 +0000

Code samples would indeed be interesting. But something more interesting imo would be to actually use the yahoo’s api at it’s full capability on this blog !

Nobody can rate up or down this post or some comments.

What a shame !!!