Star Rating mouse click when hovering over stars - javascript

I'm trying to have a mouse icon show up when I hover over the stars in this script using Bootstrap 4.
This is the form.
<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
And here is the Javascript
$( ".rateButton" ).click(function() {
if($(this).hasClass('star-grey')) {
$(this).removeClass('star-grey').addClass('star-highlight star-selected');
$(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
} else {
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
}
$("#rating").val($('.star-selected').length); //count the num of star selected
});
This is how I want it to look https://imgur.com/a/sTkSQR2

I'm trying to have a mouse icon show up when I hover over the stars in
this script using Bootstrap 4
Showing mouse cursor to look like pointed hand (as in image) can be done using below css.
.rateButton {
cursor: pointer
}
Bootstrap way of doing it
Add role="button", then a cursor turns to hand. Bootstrap reference
Reboot includes an enhancement for role="button" to change the default
cursor to pointer. Add this attribute to elements to help indicate
elements are interactive. This role isn’t necessary for
elements, which get their own cursor change.
Your code will look like
<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>
<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>
I prefer the first method if you don't want to edit the html

Related

'click' event only fires on first click and not second

I have five elements and want something to happend when I click one of them. My code works fine when clicking for first time, but the event never hits on second click. Any idea why?
$("#ratingModal").find(".star.clickable").on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>
Try Using off().on('...') function
$("#ratingModal").find(".star.clickable").off().on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>

jquery - change background color on click

Suppose inside a document there are 4 label and I want the background become white when I click, but when I click another label, the previous label should back to its default (without using add class or remove class)
https://s25.postimg.org/kb1m0re0f/screenshot_9.png
<header>
<label for="slide_trigger1">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger2">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger3">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
<label for="slide_trigger4">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</label>
</header>
<script>
$(document).ready(function(e) {
$('label').click(function() {
$(this).css({"background":"#fff","color":"green","border-radius":"100%" });
});
});
</script>
Use removeAttr() method in jquery for removing the inline style in the lable element.
$('label').click(function(){
$('label').removeAttr('style');
$(this).css({"background":"#fff","color":"green","border-radius":"100%" });
});

Ajax filter is not working properly

I have created an filter in my website using AJAX.Filtering is worked when I called the AJAX using click event on an interval fine .But When I am clicked the Submit button multiple times simultaneously I am getting the repeated result over my page.I am not gives here whole details .
I am appending the result in my page on the base of div count. That is the problem I think.
if ($("#holiday-list-loaded-view-start").nextAll("div").first().hasClass('hotel-list-view')) {
$(".hotel-list-view").last().after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><img src="'+img+'"alt="cruise"></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+'&nbsp<span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book">QUERYDETAIL</div></div></div></div></div>');
} else {
$("#holiday-list-loaded-view-start").after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><img src="'+img+'"alt="cruise"></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+'<span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book"> QUERYDETAIL</div></div></div></div></div>');
}
Oh yeah I got It when the page is rendered .It takes Time mean while if another filtering event occur then Its result is also appended to the same block due to the improper match of div element therefor result is repeated.
But How to resolve It. I don't know.
then make use of empty() function to clear previous result(the possible place is just before loop starts),
//this will erase previous result
$(".hotel-list-view").empty();
// or
$("#holiday-list-loaded-view-start").empty();
// then append function may be before/after/append

Set font awesome icon into jquery

I am ussing html, css3 and jquery. And i want to use font awesome icon into jquery. But i don't know how to use font awesome icon into Jquery.
FONT ICON:
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
CODE:
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
JQUERY CODE:
$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});
Font awesome icon working fine in the html code.
I want to set this icon into jquery code.
Here is a solution, I would suggest targeting with <i id="myId"> instead of the children of "display icon", more tighter...
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
</body>
<script>
$('.display-icon').click(function() {
$(this).children("i").attr("class", "fa fa-circle-o-notch fa-pulse fa-3x fa-fw ") ;
});
</script>
</html>
Try this:
$('.display-icon').click(function(){
$("#show-icon").addClass('fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw ');
});
and:
<div class="display-icon">
click me :)
<i class="" id="show-icon"></i>
</div>
I hope this solves your problem :)
If you want to add a spinner icon when button is clicked, you may insert at the desired place in the HTML and toggle visibility with javascript (jQuery in your case):
<script>
$(document).ready(function(){
$('#toggle-spinner').on('click', function(){
$('#my-spinner').toggle();
});
});
</script>
<input type="button" id="toggle-spinner" value="Toggle spinner"/>
<div id="my-spinner" class="display-icon" style="display: none"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div>
You may also add and remove an HTML element in DOM:
$(' <div id="my-spinner" class="display-icon"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div> ').appendTo('body');
$('#my-spinner').remove();

Knockout auto click when the page became active

I'm trying to use data-bind click for one my spans, but when I'm trying to do it, the function start when the page became active, and don't wait for user press.
Any idea why???
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 rate">{{rate}}
<span class="fa fa-fw fa-lg fa-edit" data-bind="click: $root.edit($parent ,$index())"></span>
<span class="fa fa-fw fa-lg fa-times" data-bind="click: $root.delete($parent ,min)"></span>
</div>
If you want to pass additional arguments to your click handler function need to wrap your function calls into anonymous functions:
<span class="fa fa-fw fa-lg fa-edit"
data-bind="click: function () { $root.edit($parent ,$index()) }"></span>
<span class="fa fa-fw fa-lg fa-times"
data-bind="click: function () { $root.delete($parent ,min) } "></span>
See also in the documentation: Note 2: Accessing the event object, or passing more parameters

Categories