Yahoo! User Interface Blog (YUIBlog)

Site Search:

16 Comments »

RSS feed for comments on this post. TrackBack URI

1. Any code samples? Or is this just for fun.

   Comment by yoda — February 14, 2006 #

2. Our intent is to populate every pattern possible with either links to underlying code that can create the pattern or to example code that shows how to go about implementing the pattern.

   It will take us a little time to catch up in this regard. We’ll try not to let you wait too long.

   Also, I am curious about providing code examples collated from the best places on the net (not just for our libraries). Interested in that?

   Comment by Bill Scott — February 14, 2006 #

3. Good stuff, can’t wait to see the code! Thanks to Yahoo for encouraging openness on the cutting edge of web-apps.

   Comment by jules — February 14, 2006 #

4. I would love to see code samples. Yahoo is doing a wonderful thing by opening up their APIs. This is truly a step in the right direction.

   Comment by Justin Ashworth — February 14, 2006 #

5. I’ll definately be checking back soon to see some code, keep up the good work!

   Comment by Dave — February 15, 2006 #

6. I would love to see some code for this. To answer Bill’s question, I would be most interest in seeing code using yahoo’s api, but best examples around the net would also be nice.

   Comment by Maurice — February 16, 2006 #

7. 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 !!!

   Comment by laurent — February 17, 2006 #

8. We are still anxiously awaiting code…

   Comment by Mike — February 28, 2006 #

9. Anyone mention code?

   Comment by Scott — March 4, 2006 #

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

    Comment by kevinknight — March 8, 2006 #

11. I think this is the Yahoo JavaScript…

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

    Comment by Martin Smith — March 9, 2006 #

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

    Comment by dotcompals — March 27, 2006 #

13. 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.

    Comment by kevinknight — March 30, 2006 #

14. 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 ;-)

    Comment by Marcus Engene — July 5, 2006 #

15. 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

    Comment by Dave Gregory — October 12, 2006 #

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

    Comment by Beck Laxton — May 22, 2008 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>