Replace numbers with Stars

Discussion in 'JavaScript' started by johneva, Mar 24, 2011.

  1. #1
    Hi

    Can anybody show me a simple way of displaying stars instead of numbers, I dont need it so you can vote or anything as the votes are done via a control panel, so it means only people logged in can vote. I have found loads of complex rating systems where you can vote directly but dont want to do this just simpley want to replace numbers with stars.

    Here is whats currently displayed
    http://www.best-butcher.co.uk/butcher-details/test/1

    Cheers
    John
     
    johneva, Mar 24, 2011 IP
  2. victa

    victa Peon

    Messages:
    400
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i don't get you clearly, but for displaying stars instead of numbers in php, i use simple regex. example to mask the last two portions of an ip address : preg_replace('/(?!\d{1,3}\.\d{1,3}\.)\d/', '*', $ip);
     
    victa, Mar 24, 2011 IP
  3. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #3
    johneva, Mar 24, 2011 IP
  4. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Can you modify your HTML code which generates PHP? e.g.
    <li>Beef Rating: 3 (2 votes)</li>
    to be
    <li>Beef Rating: 3 (<span id="beef_rating">2</span> votes)</li>

    If yes, then acces to this value via getElementById function and parse it with parseInt function.
    Then you can do cycle which will create new innerHTML for this span - add images with stars.
    You can also expand this logic and e.g. specify:
    1 star = 1-10 votes
    2 stars = 11-20 votes
    3 stars = 21-30 votes
    4 stars = 31-40 votes
    5 stars >41 votes
     
    Jan Novak, Mar 24, 2011 IP
  5. victa

    victa Peon

    Messages:
    400
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i see, then you need to replace the number with image tag to the corresponding numbers image. make images represented the numbers, ie: 1.gif (one star image), etc. then replace the number in the page into something like: <img src="pathtoimagefolder/1.gif" />. so when retrieving the number from database, you just need to insert the var name in that tag. something like : <img src="pathtoimagefolder/<?php echo $vote ?>.gif" />
     
    victa, Mar 24, 2011 IP
    johneva likes this.
  6. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #6
    OF course yeah thats the easy option, cheers. :)
     
    johneva, Mar 24, 2011 IP
  7. victa

    victa Peon

    Messages:
    400
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    but you still need to categorize the vote, something like Jan Novak show: 1 star = 1-10 votes, etc, use switch function will do. cheers.
     
    victa, Mar 24, 2011 IP
  8. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #8
    I dont get what your saying sorry, I have done the idea you said and it works great.

    Dont get what you mean by your second post in this thread though.
     
    johneva, Mar 24, 2011 IP
  9. victa

    victa Peon

    Messages:
    400
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    sorry if i don't clear enough :D. i mean you should refer the star images to a set of vote numbers. i.e:
    1.gif is for the votes number range between 1-10 votes, and so on.
     
    victa, Mar 24, 2011 IP
  10. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #10
    Hmm think I get what your saying, but thats no problem as the number will always be 1-5, which works perfect as I now have 5 different images that display depending on what value would have been previously displayed as just a simple number.

    If you take another look at it now:
    http://www.best-butcher.co.uk/butcher-details/test/1

    I may even at a later date swap the stars images with some cusom made stuff like meat cleavers or something to make it look better. :)
     
    johneva, Mar 24, 2011 IP
  11. victa

    victa Peon

    Messages:
    400
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    My mistake lol, ignore my earlier post. I mean about average rating something like:
    $average = number_format(array_sum($ratings)/count($ratings), 1);
    But since you already satisfy with that, you can skip that.
     
    victa, Mar 24, 2011 IP
  12. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #12
    True maybe good to have the actual value to 1 decimal place aswell so its a little more accurate I suppose, just showing the 5 stars is ok for now but at a later date when it gets quite full then would be better to have a more accurate score like how you have said next to it.
     
    johneva, Mar 24, 2011 IP