Monday, 25 July 2016

Ratings field within Bootstrap using Font Awesome stars

I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Font awesome stars</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .star-selected
    {
      color:pink;
    }
    </style>

  </head>
  <body>
<form method="POST" action="someaction.php">
      <div class="form-group">
        <input type="hidden" name="stars">
        <i class="fa fa-star" aria-hidden="true" value="1"></i>
        <i class="fa fa-star" aria-hidden="true" value="2"></i>
        <i class="fa fa-star" aria-hidden="true" value="3"></i>
        <i class="fa fa-star" aria-hidden="true" value="4"></i>
        <i class="fa fa-star" aria-hidden="true" value="5"></i>
      </div>
      <button type="submit">Submit</button>
    </form>

   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
    (function()
    {
      var theStars = $('form').find('i');
      $('i').on('click', function()
      {
        theStars.removeClass('star-selected');
        var theStarIclicked = $(this);
        var highVal = theStarIclicked.attr('value');
        theStarIclicked.addClass('star-selected');
        $("input[name='stars']").attr('value',highVal);
        theStars.each(function(i)
        {
          if($(this).attr('value') < highVal)
          {
            $(this).addClass('star-selected');
          }
        });       
        console.log('Star selected '+$("input[name='stars']").attr('value'));
      });
    })();
    </script>

  </body>
</html>

No comments:

Post a Comment