Interactive Star Rating for forms

Developer
Ash Durham
Size
3,705 Kb
Views
8,096
  1. Interactive Star Rating for forms Previews
  2. Interactive Star Rating for forms HTML Codes
  3. Interactive Star Rating for forms CSS Codes
  4. Interactive Star Rating for forms JS Codes

How do I make an interactive star rating for forms?

Using Font Awesome's star icons, this creates an interactive star rater that feeds the values to a hidden field that you could then submit through a form for a review.. What is a interactive star rating for forms? How do you make a interactive star rating for forms? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.

Interactive Star Rating for forms Previews
IQ Test

Interactive Star Rating for forms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive Star Rating for forms</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="rating_stars rating_0"> <span class='s' data-low='0.5' data-high='1'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span> <span class='s' data-low='1.5' data-high='2'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span> <span class='s' data-low='2.5' data-high='3'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span> <span class='s' data-low='3.5' data-high='4'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span> <span class='s' data-low='4.5' data-high='5'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span> <span class='r r0_5' data-rating='1' data-value='0.5'></span> <span class='r r1' data-rating='1' data-value='1'></span> <span class='r r1_5' data-rating='15' data-value='1.5'></span> <span class='r r2' data-rating='2' data-value='2'></span> <span class='r r2_5' data-rating='25' data-value='2.5'></span> <span class='r r3' data-rating='3' data-value='3'></span> <span class='r r3_5' data-rating='35' data-value='3.5'></span> <span class='r r4' data-rating='4' data-value='4'></span> <span class='r r4_5' data-rating='45' data-value='4.5'></span> <span class='r r5' data-rating='5' data-value='5'></span>
</span>
<div class="values"> <div> <label>Rating</label><input type="text" id="rating" value="0" /> </div> <div> <label>Rating Value</label><input type="text" name="rating" id="rating_val" value="0" /> </div>
</div>
<div class="info"> <p>The above textboxes should be hidden fields, but have been made textboxes to display the values when you click.</p> <p>The 'Rating' value can be used for class/id based changes to this if wanting to use a background sprite to manage the stars instead.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Interactive Star Rating for forms - Script Codes CSS Codes

.rating_stars { margin-top: 15px; display: inline-block; font-size: 20px; font-weight: 200; color: #918f8f; position: relative;
}
.rating_stars span .fa, .rating_stars span.active-low .fa-star-o, .rating_stars span.active-high .fa-star-o{	display: none;
}
.rating_stars span .fa-star-o{	display: inline-block;
}
.rating_stars span.s.active-high .fa-star{	display: inline-block; color: #feb645;
}
.rating_stars span.s.active-low .fa-star-half-o{	display: inline-block; color: #feb645;
}
.rating_stars span.r {	position: absolute;	top: 0;	height: 20px;	width: 10px;	left: 0;
}
.rating_stars span.r.r0_5 {left:0px;}
.rating_stars span.r.r1 {left:10px; width: 11px;}
.rating_stars span.r.r1_5 {left:21px; width: 13px;}
.rating_stars span.r.r2 {left:34px; width: 12px;}
.rating_stars span.r.r2_5 {left:46px; width: 12px;}
.rating_stars span.r.r3 {left:58px; width: 11px;}
.rating_stars span.r.r3_5 {left:69px; width: 12px;}
.rating_stars span.r.r4 {left:81px; width: 12px;}
.rating_stars span.r.r4_5 {left:93px; width: 12px;}
.rating_stars span.r.r5 {left:105px; width: 12px;}
/* Just to make things look pretty ;) */
html, body { text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 12px; height: 100%; color: #eee; background: #7d7e7d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2Q3ZTdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
label {width: 100px;display: inline-block; text-align: right; margin-right: 10px;}
input {width: 50px; text-align: center;}
.values {margin-top: 20px;}
.info {max-width: 500px; margin: 20px auto;}

Interactive Star Rating for forms - Script Codes JS Codes

jQuery(document).ready(function($) {
$('.rating_stars span.r').hover(function() { // get hovered value var rating = $(this).data('rating'); var value = $(this).data('value'); $(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating); highlight_star(value); }, function() { // get hidden field value var rating = $("#rating").val(); var value = $("#rating_val").val(); $(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating); highlight_star(value); }).click(function() { // Set hidden field value var value = $(this).data('value'); $("#rating_val").val(value); var rating = $(this).data('rating'); $("#rating").val(rating); highlight_star(value); }); var highlight_star = function(rating) { $('.rating_stars span.s').each(function() { var low = $(this).data('low'); var high = $(this).data('high'); $(this).removeClass('active-high').removeClass('active-low'); if (rating >= high) $(this).addClass('active-high'); else if (rating == low) $(this).addClass('active-low'); }); }
});
Interactive Star Rating for forms - Script Codes
Interactive Star Rating for forms - Script Codes
Home Page Home
Developer Ash Durham
Username ashdurham
Uploaded January 05, 2023
Rating 3
Size 3,705 Kb
Views 8,096
Do you need developer help for Interactive Star Rating for forms?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Durham (ashdurham) Script Codes
Name
Fade test
Radio status lights with gradients
A Pen by Ash Durham
Viewport Media Query example 1
Cross Browser Placeholders
Social Share Button Counter
Viewport Media Query example 2
Youtube-like loading bar with pure CSS
Form fields styled for cross browser
Animated Progress Bar
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!