Five star rating functionality - javascript

How can I achieve a five star rating functionality using css.
I have some html:
<span class="rate-this-stars">
<h5>Rate this page</h5>
<ol class="rate-this-stars-list">
<li class="star" value="5"></li>
<li class="star" value="4"></li>
<li class="star" value="3"></li>
<li class="star" value="2"></li>
<li class="star" value="1"></li>
</ol>
</span>
And some additional css which gives me this:
I then have a css hover state which swaps the grey star with a pink star:
span.stars ol li:hover {
background-image: url(../images/starHover.png);
}
Output:
So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.
I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.
My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

I Got This
Javascript to get the ratings
$(document).ready(function() {
$("form#ratingForm").submit(function(e)
{
e.preventDefault(); // prevent the default click action from being performed
if ($("#ratingForm :radio:checked").length == 0) {
$('#status').html("nothing checked");
return false;
} else {
$('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
}
});
});
DEMO1
Using Css DEMO2

use mouseover event to programmatically select the rest
mouseover: function () {
var sel = this.value:
var options = $('ol li');
for (var i = 1; i < sel; i++) {
options[i].css('background-image', 'url(../images/starHover.png)')
}
}

here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result.
The trick is in css on hover!
On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one.
In your example it will look something like this
.rate-this-stars-list:hover .star{
color: orange;
}
and then all stars after selected one:
.rate-this-stars-list .star:hover ~ .star{
color: #ddd;
}
but, you can find full working 5 stars rating example with Angular implementation on this link:
https://floyk.com/en/post/angular-star-rating-example

One option for doing that is using CSS Sprite + JS.
The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.
If you want something simpler, just have 6 separate images and change the background image according to the mouse position.
To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.
An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):
http://codepen.io/anon/pen/rkhcJ
HTML
<div id="container">
<div id="1" class="star">1</div>
<div id="2" class="star"></div>
<div id="3" class="star"></div>
<div id="4" class="star"></div>
<div id="5" class="star"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
CSS:
.star{
float:left;
height: 100%;
width: 20%;
}
#container{
background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
width: 226px;
height: 50px;
background-color: #c34;
background
}
JS
$("#1").mouseover(function(){
$("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
$("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
$("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
$("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
$("#container").css('background-position', '0px -190px');
});
$(".star").mouseout(function(){
$("#container").css('background-position', '0px 0px');
});

<style>
.star {
font-size: x-large;
width: 50px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content:'\2605';
}
.star.on {
color: red;
}
.star.half:after {
content:'\2605';
color: red;
position: absolute;
margin-left: -20px;
width: 10px;
overflow: hidden;
}
</style>
<div class="stars">
<?php
$enable = 5.5; //enter how many stars to enable
$max_stars = 6; //enter maximum no.of stars
$star_rate = is_int($enable) ? 1 : 0;
for ($i = 1; $i <= $max_stars; $i++){ ?>
<?php if(round($enable) == $i && !$star_rate) { ?>
<span class="<?php echo 'star half'; ?>"></span>
<?php } elseif(round($enable) >= $i) { ?>
<span class="<?php echo 'star on'; ?>"></span>
<?php } else { ?>
<span class="<?php echo 'star'; ?>"></span>
<?php }
}?>
</div>

I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:
https://github.com/zamicol/rating

Related

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.
I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen
Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

UI problems - How do I trigger an image loading on choice made by dropdown box? Then add text to overlay the image result?

I'm new to coding, I've learned the very basics of html/css/js/java, at least I thought I had, until I went to make a simple game.
I made a simple choose your own adventure game that worked, as each choice just went to a new page.
Then, I thought I'd make it a bit more complex, so I want to have the user enter their name, and store that to show next to the player's stats.
I've got a dropdown box with 4 choices for characters.I want to have Strength/Mana/Lives stats and have the player's choice of character to be able to adjust these stats accordingly before the game starts i.e. Male Warrior would have 2 extra Strength, Female Mage 2 extra mana etc.
Then, I'd like an image based on their character choice displayed next to their stats, so that the game can begin.
So far, I've been pulling my hair out in great clumps and have tried many different methods but so far, I've only got to the stage where I place the page with user input into an iframe. I can get to reflect their choices with text, but I can't get an image to load on submit. Ideally I'd like a permanent box in the top corner of the iframe, and have the statistics variables passed into the stats shown alongside the character's image.
I'd really really appreciate any help here, especially if it can be solved using HTML/CSS/JS as I'm not too familiar with JQuery, and would like to keep it as simple as possible really.
I've gone through as many q's and a's as I can to find relevant help, but I'm mainly finding answers for PHP or other languages.
I must apologise in advance for my waffling above, and sloppy coding. (I seriously thought this would be easy heh).
I'm unsure if my code so far will help, but I'll just paste it below anyway.
HTML for the UI page is:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Character Selection</title>
<link rel="stylesheet" href="css/style2.css">
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<div id='gamestitle'>
<p>
<img src = "GAMETITLE.jpg"
alt = "Steve's Perilous Capers"/>
</p>
</div>
<br>
</div>
<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
<lable id='nameLable' for='nameField'>Create a username:</lable>
<input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
<button id='subButton' type='button'>Enter your name!</button>
</div>
</form>
<div>
<p id='result'></p></div>
</div>
<div>
</div>
<div>
<form>
Select your Hero please:
<select id="mySelect">
<option>Male Warrior</option>
<option>Male Mage</option>
<option>Female Warrior</option>
<option>Female Mage</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Confirm">
</form>
</div>
<script src="js/index.js"></script>
<script>
document.getElementById("demo").innerHTML =
obj.options[obj.selectedIndex].text;
</script>
<p id="demo"></p>
</body>
</html>
The CSS is:
body {
margin: auto;
text-align: center;
}
li {
list-style:none;
}
li.fields {
margin: 0;
padding: 1em 0;
}
li.title {
cursor: pointer;
font-weight: bold;
font-size : 1.5em;
line-height: 2em;
background: #e3e3e3;
border-bottom: 1px solid #c5c5c5;
border-top: 1px solid white;
}
.gamestitle {
max-width: 100%;
margin: auto;
}
.hide { display: none;}
.result {
height: 200px;
width: 50%;
background-color: powderblue;
}
The JS file: (I've tried using icons and background image but I couldn't get them to show)
// the function which handles the input field logic
function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');
if (nameField.length < 3) {
result.textContent = 'Username must contain at least 3 characters';
//alert('Username must contain at least 3 characters');
} else {
result.textContent = 'Your Hero is: ' + nameField;
//alert(nameField);
}
}
function getOption() {
var obj = document.getElementById("mySelect");
document.getElementById("demo").innerHTML =
obj.options[obj.selectedIndex].text;
}
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropd = document.getElementById("dd");
image.src = dropd.value;
};
// use an eventlistener for the click event
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
var subButtonTwo = document.getElementById('subButtonTwo');
subButtonTwo.addEventListener('click', getOption, false);
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", {text: item.label});
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("option-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#mySelect")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
/*
function getcurrentChoice() {
var characterSelection = ['MaleWarrior'], ['MaleMage'], ['FemaleWarrior'], ['FemaleMage'];
var currentChoice = document.getElementById('currentChoice').value;
var resultChoice = document.getElementById('resultChoice');
var subButtons = document.getElementById('subButtons');
subButtons.addEventListener('click', getcurrentChoice, false);
}
*/
Sorry for the messy coding, it's not helped that I've tried so many workarounds for each problem I've encountered that I've lost track of what is and isn't working.
I'm pretty sure this is out of control by now, and a waste of your time, but I'm so confused. I'm sure i'm over complicating the matter.
Thanks in advance again,
Steve.
Check this:
https://jsfiddle.net/digitalrevenge/q9z1x6vv/
I've added an img src and made some changes to your JS.
I'm not sure if it does exactly what you want but there's no harm in giving it a try ;)
I am not sure how to do this in Javascript, but I have achieved it with jQuery, maybe you can adapt it to Javascript if you like.
Basically...
Give each option a value
On selection, or change, empty div#change_this, and check for the value
If value = # then add html code to div#change_this
You can change the image/add in the stats, I just used some filler.
You will also need to add css and all that, if you have any specific questions about that, please let me know.
Functionality is there though.
Best,
Levi
body {
margin: auto;
text-align: center;
}
li {
list-style:none;
}
li.fields {
margin: 0;
padding: 1em 0;
}
li.title {
cursor: pointer;
font-weight: bold;
font-size : 1.5em;
line-height: 2em;
background: #e3e3e3;
border-bottom: 1px solid #c5c5c5;
border-top: 1px solid white;
}
.gamestitle {
max-width: 100%;
margin: auto;
}
.hide {
display: none;
}
.result {
height: 200px;
width: 50%;
background-color: powderblue;
}
<div>
<div id='gamestitle'>
<img src = "GAMETITLE.jpg" alt = "Steve's Perilous Capers"/>
</div>
<br>
</div>
<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
<lable id='nameLabel' for='nameField'>Create a username:</lable>
<input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
<button id='subButton' type='button'>Enter your name!</button>
</div>
</form>
<div>
<p id='result'></p>
</div>
</div>
<div>
<form>
Select your Hero please:
<select name="hero_type" id="mySelect">
<option value="0">Male Warrior</option>
<option value="1">Male Mage</option>
<option value="2">Female Warrior</option>
<option value="3">Female Mage</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Confirm">
</form>
</div>
<div id="change_this">
<p>Yayyy, Male Warrior.</p> <img alt="" src="http://via.placeholder.com/350x150">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select[name="hero_type"]').click(function() {
$('#change_this').empty();
if ($('select[name="hero_type"]').val() == "0"){
$('#change_this').append('<p>Yayyy, Male Warrior.</p> <img alt="" src="http://via.placeholder.com/350x150">')
}
if ($('select[name="hero_type"]').val() == "1"){
$('#change_this').append('<p>Yayyy, Male Mage.</p> <img alt="" src="http://via.placeholder.com/350x150">')
}
if ($('select[name="hero_type"]').val() == "2"){
$('#change_this').append('<p>Yayyy, Female Warrior</p> <img alt="" src="http://via.placeholder.com/350x150">')
}
if ($('select[name="hero_type"]').val() == "3"){
$('#change_this').append('<p>Yayyy, Female Mage</p> <img alt="" src="http://via.placeholder.com/350x150">')
}
})
});
</script>
The src attribute of an image tag points to the location of the image file to use.
You should be somewhat aware of this as your code contains:
<img src = "GAMETITLE.jpg" alt = "Steve's Perilous Capers"/>
To change the image, simply change the src attribute to point to the location of the new image.
The source of an image tag can be accessed and changed via:
document.getElementById("imageId").src="fileToUse";
This means you need to add an id to your image tag as so:
<img src = "GAMETITLE.jpg" alt = "Steve's Perilous Capers" id="imageId"/>
In your case, you want to get the image src from a select field. This means you need to tie the image file locations to your select form as values.
<select id="mySelect">
<option value="location-of-this-image.png">Male Warrior</option>
<option value="location-of-this-image.png">Male Mage</option>
<option value="location-of-this-image.png">Female Warrior</option>
<option value="location-of-this-image.png">Female Mage</option>
</select>
To use these values and assign them to the image src:
document.getElementById("imageId").src=document.getElementById("mySelect").value;
If you correctly id your image and select form, give the select form proper values, and put the above line of code in the function you call when choosing and image, your image should change.
Important Note
JQuery is a JavaScript library and isn't part of the base language. To use JQuery, you must import it in your html code. You seem to be using JQuery functions, but I don't see where you imported JQuery. This may be causing you problems/breaking your code.
If you do have JQuery imported, the above code can be rewritten using JQuery rather than vanilla JavaScript and it'll look a lot cleaner.

Add and Remove a css image class on toggle using jquery

I am trying to toggle the menu when the user clicks the artcile's h3 element, much like an accordion but a little different.
What I am unable to achieve is that the image does not display nor does it change when the element's slideToggle function is called. However, the slideToggle is working fine, it is just the image I need assistance with.
HTML:-
<div class="pages">
<article class="collapsible expanded collapsed">
<h3><?php echo $lang->xlate('presentation-b');?></h3>
</article>
<div class="content">
<ul>
<li>
<?php echo $lang->xlate('presentation-c');?> </li>
<li>
<?php echo $lang->xlate('presentation-d');?> </li>
<li>
<?php echo $lang->xlate('presentation-e');?> </li>
</ul>
</div>
</div>
CSS
#paragraph .pages .collapsible {
padding: 2px;
cursor: pointer;
font-weight: bold;
}
#paragraph .pages .collapsible .expanded {background: url('../img/list.png') no-repeat left top;}
#paragraph .pages .collapsible .collapsed {background: url('../img/pagination.gif') no-repeat left top;}
jQuery:-
$('.collapsible').click(function(){
$coll = $(this);
$content = $coll.next();
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
if($(this).hasClass('expanded'))
{
$(this).toggleClass('collapsed expanded');
}
else
{
$(this).toggleClass('expanded collapsed');
}
});
});
you dont need the class indicator "." when adding or removing classes. This means that you are not toggling the background image for each state.
$(this).addClass('.collapsed').removeClass('.expanded');
so your code should be
if ($(this).hasClass('.expanded')) {
$(this).addClass('collapsed').removeClass('expanded');
} else {
$(this).addClass('expanded').removeClass('collapsed');
}
Remove . before class name on adding and removing classes.
$(this).addClass('expanded').removeClass('collapsed');
Also you can use toggleClass() to toggle between classes.
$(this).toggleClass('collapsed expanded');
like :
$('.collapsible').click(function() {
$coll = $(this);
$content = $coll.next();
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$(this).toggleClass('collapsed expanded');
});
});

CSS nth-child doesn't work on dynamically hidden element [AngularJS]

I'm trying to implement CSS nth-child on every number of elements. If a certain number is reached I want to hide the first element and make it reappear if the number reduces again.
The problem is that somehow the nth-child still counts the hidden element and thus wrongly implements the styling. Is this a bug or am I doing it wrong?
NOTE: The same thing also happens if I use jQuery
http://jsfiddle.net/bedex78/uZ5wn/23/
The View:
<div ng-app>
<div ng-controller="TheCtrl">
<p>Amount to add: <input type="text" ng-model="amount" ng-init="amount=1"></p>
<div class='holder'>
<div ng-class='elements.length < 6 ? "inside" : ""'
ng-hide="elements.length >= 6">
<button class='button' ng-click="add(amount)">Add more</button>
</div>
<div class='inside' ng-repeat="(k,v) in elements">
{{ $index }} Remove
</div>
</div>
</div>
</div>
The JS (AngularJS):
function TheCtrl($scope) {
$scope.elements = [{id:1},{id:2}]
$scope.add = function(amount) {
for (i=0; i < amount; i++){
$scope.elements.push({id:$scope.elements.length+1});
}
};
$scope.remove = function(index) {
$scope.elements.splice(index, 1);
};
}
The CSS:
.holder {
width: 300px;
height: 400px;
border: 1px solid black;
}
.inside {
height: 30px;
border: 1px solid black;
}
.inside:nth-child(3n+1) {
background-color: yellow;
}
.inside a {
float: right;
}
It happens because hidden element is still in DOM. So it is count as a child and styles applied accordingly.
You can try to use ng-if instead of ng-hide. It will make div disappear from DOM and styles will work fine.
Example

scrolling for div only and div overflow issue

i am trying to apply scroll event to one of element
<div style="position: fixed;width: 30px;height: 300px;overflow: hidden;left: 50%;margin-left: -15px;text-align: center" id="chars_con">
<?php
for($i = 97; $i <= 122; $i++){
?>
<div class="chars" ch_to="<?php echo "chars$i"; ?>"><?php echo strtoupper(chr($i));?><div class="chars_a" id="<?php echo "chars$i"; ?>"><?php echo strtoupper(chr($i));?></div></div>
<?php }
?>
</div>
my javascript
window.onload=function(){
$(".chars").hover(function(){
$("#"+$(this).attr("ch_to")).show();
},function(){
$("#"+$(this).attr("ch_to")).hide();
});
$("#chars_con").hover(function(){
$("#chars_con").css({marginTop:$("#chars_con").scrollTop()});
},function(){
});
}
css
div.chars{background-color: #66ccff;padding: 3px 7px;font-weight: bold;cursor: pointer}
div.chars:hover{background-color: #990099;color: #ffffff}
div.chars_a{background-color: #0000ff;color: #ffffff;border: 1px solid #ffff00;font-weight: bold;cursor: pointer;text-align: center;position: absolute;padding: 10px 15px;display: none;margin-left: -13px;margin-top: -25px;overflow: visible}
Overflow issue : i am not able explain this so please remove overflow:hidden form div:#chars_con and see the effect .. i want to do extaly like when we don't have overflow:hidden. but i want to keep this property because i want to apply scroll effect to this
Scroll issue: i want to scroll this div when i mouse hover it and do scroll
Please ask any question because i am not able to explain but you can get it from the code i mentioned here
This is a rough example of touchscreen-style scrolling:
JavaScript/jQuery:
var last_pos = 0;
$(document).ready(function() {
$('#scroll').mousemove(function(e) {
if(e.clientY > last_pos) {
$('#scroll').scrollTop($('#scroll').scrollTop() - 5);
} else {
$('#scroll').scrollTop($('#scroll').scrollTop() + 5);
}
last_pos = e.clientY;
});
});
HTML:
<div id="scroll">
This text will scroll.<br />
Line 2<br />
Line 3<br />
Blah blah<br />
This text will scroll.<br />
This text will scroll.<br />
This text will scroll.<br />
Line ?<br />
Line ?++<br />
This text will scroll.<br />
This text will scroll.<br />
</div>
CSS:
#scroll {
width: 200px;
height: 100px;
overflow: hidden;
background: #eee
}
Example: http://jsfiddle.net/wEKhG/1/
From my understanding of your problem, I think you want to have a div with scroll hidden and only want to show the scroll bar when hovered over it. If that is the case, you can do it in a simple way as follows
<div id="division_to_scroll" style='{overflow:hidden}'/>
and then attach a jquery event on mouseover
$('#division_to_scroll').mouseenter(function(){
$('#division_to_scroll').css("overflow", "scroll");}).mouseleave(function(){$('#division_to_scroll').css("overflow", "hidden");});​
Here is a jsfiddle

Categories