Skip to content

Instantly share code, notes, and snippets.

@shar0

shar0/hover-to-rate.html

Created September 15, 2015 15:55
Show Gist options
  • Save shar0/fd6d4af751ebdb0dd6c2 to your computer and use it in GitHub Desktop.
Save shar0/fd6d4af751ebdb0dd6c2 to your computer and use it in GitHub Desktop.
Download ZIP
Hover square to rate
Raw
hover-to-rate.html
<html>
<head>
<title>Drag to rate</title>
<style>
* {
padding: 0;
margin: 0;
}
.rate-bar {
margin: 10px;
height: 30px;
}
.item {
float: left;
width: 20px;
height: 20px;
margin: 5px 0;
background: #eee;
}
.item.golden-rate {
background: yellow;
}
.item.gray-rate {
background: darkgray;
}
.item + .item {
margin-left: 10px;
}
</style>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<ul class="rate-bar">
<li data-rate="0" class="item"></li>
<li data-rate="1" class="item"></li>
<li data-rate="2" class="item"></li>
<li data-rate="3" class="item"></li>
<li data-rate="4" class="item"></li>
</ul>
<script>
var currentRate = -1, items = $(".rate-bar .item");
function setRate( rate ) {
var ratedItems = items.removeClass("gray-rate").removeClass("golden-rate").slice( 0, rate + 1 );
if (rate < 2) {
ratedItems.addClass("gray-rate");
} else if (rate >= 2) {
ratedItems.addClass("golden-rate");
}
}
items.hover(function () {
var rate = parseInt($(this).attr("data-rate"));
setRate(rate)
}, function () {
setRate(currentRate)
}).click(function () {
currentRate = parseInt($(this).attr("data-rate"));
setRate(currentRate)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment