Skip to content

Instantly share code, notes, and snippets.

@droganaida

droganaida/stars.html

Last active September 9, 2019 21:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save droganaida/10f21555ecc3e27f2cd0 to your computer and use it in GitHub Desktop.
Save droganaida/10f21555ecc3e27f2cd0 to your computer and use it in GitHub Desktop.
Download ZIP
5 stars rating: html + css + jquery + microdata
Raw
stars.html
<!DOCTYPE html>
<html>
<head>
<title>#BlondieCode - лайфхаки программиста. Рейтинг 5 звезд.</title>
<meta charset="utf-8">
<style>
body, html {padding: 0;margin: 0;}
body {
background: #efefef; color: #2d2d2d;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px;
line-height: 1.5;
}
h1 {font-size: 24px;}
h2 {font-size: 22px;}
a {color: #4f8d88}
a:hover {color: #1ea59b}
.header {
background: #4f8d88;
color: #ffffff;
padding: 20px;
box-sizing: border-box;
}
.header h1 {
margin: 0;
}
.content {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
/*------------------------------стили для рейтинга--------------------------*/
.ratingHolder {
width: 210px;
position: relative;
}
.ratingHolder .userRatingHolder {
opacity: 0;
transition: .1s;
}
.ratingHolder:hover .userRatingHolder, .ratingHolder.voted .userRatingHolder {opacity: 1; transition: .1s;}
.ratingHolder .userRating {
position: absolute; top: -10px; left: 0;
padding: 10px 16px;
cursor: pointer;
z-index: 9999;
background-color: #ffffff;
border-radius: 5px;
width: 178px; height: 31px;
}
.ratingHolder.voted .userRating {background-color: #598a86;}
.ratingHolder .passiveRatingHolder {
position: relative;
width: 178px; height: 37px;
left: 50%; margin-left: -89px; display: block;
}
.ratingHolder .passiveRatingHolder > div {
position:absolute; left: 0; top: 0;
height: 37px;
background-image: url("https://dl.dropboxusercontent.com/u/65675180/blondiecode/stars.svg");
background-repeat: no-repeat;
background-size: 178px;
}
.ratingHolder .passiveRatingHolder .ratingBg {background-position: 0 0; width: 178px; z-index: 1;}
.ratingHolder .passiveRatingHolder .ratingMask {background-position: 0 -41px; z-index: 99;}
.ratingHolder .vote {
transition: .2s;
position: absolute; top: 0;
cursor: pointer;
z-index: 99999;
width: 32px; height: 31px;
background-image: url("https://dl.dropboxusercontent.com/u/65675180/blondiecode/stars.svg");
background-repeat: no-repeat; background-position: 0 0; background-size: 178px;
}
.ratingHolder .vote:hover ~ .vote, .vote.active ~ .vote {transition: .2s; background-position: 0 -41px;}
.ratingHolder .vote:hover, .ratingHolder.voted .vote.active {transition: .2s; background-position: 0 -81px;}
.ratingHolder .votingHolder {direction: rtl; position: relative}
.ratingHolder .vote.onestar {left: 80%;}
.ratingHolder .vote.twostar {left: 60%;}
.ratingHolder .vote.threestar {left: 40%;}
.ratingHolder .vote.fourstar {left: 20%;}
.ratingHolder .vote.fivestar {left: 0;}
.ratingHolder.voted .vote {pointer-events:none;}
.ratingHolder.voted .vote:hover {background-position: 0 0;}
.ratingHolder.voted .vote.active ~ .vote {background-position: 0 -41px;}
.ratingHolder.voted .vote.active:hover {background-position: 0 -81px;}
.ratingHolder .rateNumbers {text-align: center; width: 100%; color: #a1a1a1;font-size: 14px;}
.ratingHolder .rateNumbers .ratingvalue {color: #2d2d2d; font-size: 26px;}
.ratingHolder .rateNumbers .bestrating {margin-bottom: 4px; display: inline-block; font-size: 20px;}
.ratingHolder .text {color: #4f8d88; text-align: center; margin: 0; opacity: 0; transition: .1s; height: 0px;}
.ratingHolder.voted .text {opacity: 1; margin: 10px 0 0 0; transition: .1s; height: auto;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$('.vote').on ('click', function(){
$(this).addClass('active');
var parent = $(this).parent().parent().parent().parent();
var commentCountElement = parent.find('.commentscount');
var ratingValueElement = parent.find('.ratingvalue');
var votedValue = parseInt($(this).attr('data-score'));
parent.addClass('voted');
var commentCount = parseInt(commentCountElement.text());
commentCountElement.text(commentCount + 1);
var rating = parseFloat(ratingValueElement.text());
rating = (commentCount * rating + votedValue)/(commentCount + 1);
ratingValueElement.text(rating.toFixed(2));
console.log('AJAX запрос примет значение ' + votedValue);
})
})
</script>
</head>
<body>
<div class="header">
<h1>#BlondieCode. О программировании легко</h1>
</div>
<div class="content">
<h2>Рейтинг статьи - 5 звезд. CSS + HTML + микроразметка</h2>
<!--рейтинг начинается тут-->
<div itemscope="" itemtype="http://schema.org/CollectionPage" class="ratingHolder">
<div class="userRatingHolder">
<div class="userRating">
<div class="votingHolder">
<div data-score="5" class="vote onestar"></div>
<div data-score="4" class="vote twostar"></div>
<div data-score="3" class="vote threestar"></div>
<div data-score="2" class="vote fourstar"></div>
<div data-score="1" class="vote fivestar"></div>
</div>
</div>
</div>
<div class="passiveRatingHolder">
<div class="ratingBg"></div>
<div style="width: 85%;" class="ratingMask"></div>
</div>
<div class="text">Ваш голос учтен!</div>
<div class="rateNumbers">
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" class="ratingvalue">4.25</span>
/
<span itemprop="bestRating" class="bestrating">5.00</span>
<div class="br"></div>
(
<span itemprop="reviewCount" class="commentscount">4</span>
голосов)
</div>
</div>
</div>
<!--рейтинг заканчивается тут-->
<p><b>Привет, коллеги!</b>
<br/>
Меня зовут Ася, и я программист. Я создала <a href="https://www.youtube.com/channel/UCSsg9NLCse2XQCIRgfmJu3Q" target="_blank">этот блог</a> для того, чтобы доказать, что программировать можно легко и с удовольствием.
На моем канале вы можете найти курс <b>&laquo;Программирование для всех&raquo;</b>, где я объясняю базовые принципы программирования на стаканах,
кошках, картошке и привидениях. Курс рассчитан на новичков, которые хотят стать программистами, но не знают с чего начать.
</p>
<p><b>Опытный программист, не проходи мимо моего канала!</b> Посмотри &laquo;Программирование для всех&raquo; под пивко в качестве развлекательного видео
и нажми кнопку &laquo;подписаться&raquo;. Скоро я планирую выпустить курс по созданию front end и back end серверов. Буду делиться знаниями
в области node.js, mongodb, jQuery, html, css и немного SEO + настройка серверов под ubuntu.</p>
<p>А пока <b>поддержи меня лайком</b>! Это
очень тяжело создавать материал и не получать отдачи. Если видео никому не интересно и бесполезно, нафиг надо делать следующее.
А понять, что оно полезно помогает кнопка с пальчиком вверх =)</p>
<p><b>Всем удачного программирования!</b></p>
</div>
</body>
</html>
@achadidi
Copy link

Что то не работает он у меня... :(

@seojacky
Copy link

По адресу https://dl.dropboxusercontent.com/u/65675180/blondiecode/stars.svg нет звёздочек. Вот и не отображается

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment