Last active
September 9, 2019 21:08
-
-
Save droganaida/10f21555ecc3e27f2cd0 to your computer and use it in GitHub Desktop.
5 stars rating: html + css + jquery + microdata
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>«Программирование для всех»</b>, где я объясняю базовые принципы программирования на стаканах, | |
кошках, картошке и привидениях. Курс рассчитан на новичков, которые хотят стать программистами, но не знают с чего начать. | |
</p> | |
<p><b>Опытный программист, не проходи мимо моего канала!</b> Посмотри «Программирование для всех» под пивко в качестве развлекательного видео | |
и нажми кнопку «подписаться». Скоро я планирую выпустить курс по созданию front end и back end серверов. Буду делиться знаниями | |
в области node.js, mongodb, jQuery, html, css и немного SEO + настройка серверов под ubuntu.</p> | |
<p>А пока <b>поддержи меня лайком</b>! Это | |
очень тяжело создавать материал и не получать отдачи. Если видео никому не интересно и бесполезно, нафиг надо делать следующее. | |
А понять, что оно полезно помогает кнопка с пальчиком вверх =)</p> | |
<p><b>Всем удачного программирования!</b></p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
По адресу https://dl.dropboxusercontent.com/u/65675180/blondiecode/stars.svg нет звёздочек. Вот и не отображается