How to display a dynamic rating based on css and the value from PHP? [closed]


Tags: javascript,php,jquery,css

Problem :

I want to display stars based on the value of PHP. The rating is between 0 to 5 and it is decimal (3.5, 3.75)

However, the stars that I can use are only full or half. So if it lower than 0.5 then I shall round it to zero, if it is more than 0.5 then round it to 1.

If it is 0.5, it stays 0.5.

The value from php is $rating_sum and it is calculated from the sum_of_ratings / rating_times

I use font awesome, so these are the stars <i class="fa fa-star"></i><i class="fa fa-star-half-full">

How can I do this?

Thank you



Solution :

You can try something like this you must setup $rating_sum first :

<?php

    $average_stars = round($rating_sum * 2) / 2;
    $drawn = 5;
    for ($i = 0; $i < floor($average_stars); $i++)
    {
        $drawn--;
        echo ' fullstar';
    }

    if ($rating_sum - floor($average_stars) == 0.5)
    {
        $drawn--;
        echo ' halfstar';
    }
?>

    CSS Howto..

    How to test a CSS parser?

    Any ideas on how I could implement a grid-view in CSS? - CSS

    How to elasticity of the char length in javascript or css? [duplicate]

    Learning Bootstrap Thumbnails…why is that bullet showing?

    CSS: how to select parent's sibling [duplicate]

    How can I add flashing effect to an option tag?

    How can I give each
  • its own bullet image?
  • How to turn this menu into a MultiLevel one?

    how to put img inside circle in html and css?

    How to make html list scrollable downwards on fullscreen page?

    How to inherit from ancestor and not parent in CSS?

    How to convert CSS class to id?

    how to create a pricetag like border around list items

    How to make a centered, responsive CSS circle within a Boostrap div?

    CSS - Minus top value how to get rid of the gap below it

    How to get two column float left div layout to word wrap?

    webkit animation play state: how to start/stop animation on demand with javascript

    how to set individual scroll for content and left menu

    How do you apply diferent colors from diferent css rules to the same object?

    How to rotate the text Rotation with center to the Number

    How to place button row and content left to image in bootstrap or css

    Showing Div via CSS selector within a UL

    How to use animation with transform CSS

    How to change the link color of the current page with CSS

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to move the second child in my nav menu with CSS

    HTML5 (php) with CSS Tooltip shows up far away from hyperlink

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to remove border of drop down list : CSS

    How to let user change text font and colour in WordPress WSIWYG text editor