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

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    How to make Bootstrap navbar brand image larger

    Image Filter and Show text on Mouseover

    CSS - How to address only parents and not children

    How to use jQuery to set min-height the same as window

    How to create borders in bootstrap when div is 0 height

    How to provide some space between two lines of same text in css

    How can you align all the cells to the left with css [closed]

    How to achieve navigation mouseover effect like in screenshot [closed]

    Why my easypie number don't show inside?

    How to use CSS hover inside html-tag?

    Hide a partially shown div

    How do i convert a jqueryui theme to Asp.net Theme

    How to center align a div vertically which uses bootstrap?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How to overlay “transformed” element?

    How to understand other people's CSS architectures?

    how can I apply css based on parent div class

    How to properly wait for browser reflow/repaint to finish

    How to define separate fonts for each font-style - CSS

    How to do margin: 0 auto 0 auto minus a few pixels with CSS?

    How To Select Two classes with CSS?

    How to Block a Page from Picking up a .css file?

    How to set the specific prefix for file-loader in webpack?

    How to position a background image without background-position property

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to use sprite images in html/css and toggle change with jQuery

    How to optimize this css code? [closed]

    How do I assign a class to a jquery button var

    how to easily develop print css?