3 Replies - 1248 Views - Last Post: 25 December 2012 - 03:38 PM

#1 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

how to create youtube rating system bar

Posted 25 December 2012 - 12:52 PM

i want to create rating system simplier to youtube.com. on youtube they have:
1st 'number of view'
2nd 'rating bar'
3rd 'like | dislike'

now i know how to do 1st and 3rd put. and i am storing view, like, and dislikes in database.
but i dont know how to create that rating bar. any idea will be help full.

it doesnt have to exacty as youtube but some thing like that effect.

so far i am thing of using jquery. and i can see if there are more like or dislike by
like = 10
dislike 1

ans = like - dislike; 

so ans = 9 and this way i now the bar is green. note if its neg than bar is red.
than i can convert '9' to percent. so 100% will be full and 0% will be empty.

but now sure how to create the bar.

Is This A Good Question/Topic? 0
  • +

Replies To: how to create youtube rating system bar

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4405
  • View blog
  • Posts: 12,262
  • Joined: 18-April 07

Re: how to create youtube rating system bar

Posted 25 December 2012 - 03:01 PM

Create two div tags, both will be 4px high, both are to be floated left using CSS. The first one will have a background color of green while the other one will be background color of gray.

Now the trick here is their widths. Their width will be percentage based on 100%. So if 10 out of 25 liked it, then 10/25 will give you the percentage of the green bar and that percentage from 100% will give you the gray bar.

Of course if that first div width is a percentage less than some value, all you have to do is make the background color red.

So given our example, 10/25 will be .4 or 40%. Since it is less than 50%, we will make it red.

<div id="ratingsbar" style="overflow: hidden;">
   <div style="background-color: red; height: 4px; float: left; width: 40%;"></div>
   <div style="background-color: #ccc; height: 4px; float: left; width: 60%;"></div>
</div>



After you have your figures and percentages, just generate the HTML like used above to give you the bar and use "ratingsbar" to set the overall width of the bar.

Hope this sets you on the right path. :)
Was This Post Helpful? 2
  • +
  • -

#3 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

Re: how to create youtube rating system bar

Posted 25 December 2012 - 03:27 PM

perfect just what i was looking for.

just one thing, 10/25.
now if 10 will be likes and 25 will be dislike?
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4405
  • View blog
  • Posts: 12,262
  • Joined: 18-April 07

Re: how to create youtube rating system bar

Posted 25 December 2012 - 03:38 PM

No, the 25 would be the sum of likes and dislikes. It is the total reviews. In other words the dislikes would then be 15/25. 10 + 15 is 25 total. That is why I said that when you figure out 40% of likes, subtract that from 100% to get the number of dislikes.

:)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1