# Why it may seem a negative value when moving to the maximum left? here
for example -0.02
and on the right a maximum of 4.95
https://jsfiddle.net/oc17L42n/1/
April 4th 20 at 00:45
April 4th 20 at 00:47
Solution
It seems that there is distance between the stars and it is considered as filled. Because of this, 5 unreachable. Add, as a temporary solution:
`var progress = e.pageX - obj.offset().left + 1.4;`
@joan.Ha, maybe there is some sort of option? - perry.Keebler commented on April 4th 20 at 00:50
@perry.Keebler, try this:
``````function move(e, obj) {
var summ = 0;
var id = obj.next().attr('id').substr(1);
var progress = e.pageX - obj.offset().left;
var rating = progress * 5.05 / \$('.stars__data').width();
if (rating < 0) { rating = 0 }
\$('#param' + id).text(rating.toFixed(2));
obj.next().width(progress);
\$('.stars__count').each(function() {
summ += parseFloat(\$(this).text());
});
};``````
- joan.Ha commented on April 4th 20 at 00:53
@joan.Ha, thank you very much - perry.Keebler commented on April 4th 20 at 00:56
April 4th 20 at 00:49
Solution
I think the thing is that the object with the sprockets you have are quite small and the positioning of the cursor when the event output the mouse out of the object works correctly. For the solution you can offer to add restrictions the smallest and largest position
``````function move(e, obj) {
var summ = 0;
var id = obj.next().attr('id').substr(1);
var progress = e.pageX - obj.offset().left;

var width = obj.width(),
leftEdge = obj.offset().left,
rightEdge = obj.offset().left + width;

if (e.pageX < leftEdge) {
progress = 0;
} else if (e.pageX >= rightEdge) {
progress = obj.width();
}

var rating = progress * 5 / width;

\$('#param' + id).text(rating.toFixed(2));
obj.next().width(progress);
\$('.stars__count').each(function() {
summ += parseFloat(\$(this).text());
});
};``````

and checking for the event of going beyond of the object through the right boundary: if the mouse went out through the right boundary, then assign 5
``````\$('.stars__data').on('mouseleave', function(e) {
var summ = 0;
var id = \$(this).next().attr('id').substr(1);

var width = \$(this).width(),
reasonableWidth = width * 0.1,
height = \$(this).height(),
leftEdge = \$(this).offset().left,
topEdge = \$(this).offset().top
bottomEdge = topEdge + height,
exitPointX = e.pageX,
exitPointY = e.pageY;

if ( ( exitPointY >= topEdge ) && ( exitPointY <= bottomEdge ) && ( exitPointX > (leftEdge + reasonableWidth) ) ) {
\$('#param' + id).text("5");
\$(this).next().width(width);
\$('.stars__count').each(function() {
summ += parseFloat(\$(this).text());
});
}
});``````
@Gerson, thank you very much
what I will say for the version above? - perry.Keebler commented on April 4th 20 at 00:52
I think the author is mistaken in the reasons since the distance between the sprockets does not affect the result: the distance from the beginning of the block (obj.offset().left) and distance to the cursor position (pageX) and not the size of the stars. Proposed variant, though, and spike (mean + 1.4), but it can work. Or may not work under certain conditions, for example in the case of a quick move around the stars. - Gerson commented on April 4th 20 at 00:55
@Gerson, and
well
just rechecked
You are right - perry.Keebler commented on April 4th 20 at 00:58
@Gerson, reasonableWidth = width * 0.1,

can you explain why we are here to take the width and multiply by 0.1

-----------------------------------------------------------------------------------------------------

\$('#param' + id).text("5");
\$(this).next().width(width);

and how does it work? why 5? why the next element

sorry if weird question - perry.Keebler commented on April 4th 20 at 01:01
1) this amendment to the same high-speed output: if we leave just check for the intersection of the right border as `exitPointX > (leftEdge +width)` or on the way out everywhere to the right of the left border `exitPointX > leftEdge`, we can get false positive in case of incorrect definition browser exitPointX. So add a crutch in the form of 10% of the width of a buffer zone to the right from the left border.
2) `\$('#param' + id).text("5");` -> hardcode enter the string "5" (could be just 5 digit, does not matter, just semantics) is the fact that we have calculated the algorithm in the function move; `\$(this).next().width(width);` -> this is the analogue of the obj.next().width(progress) from your code (functions move, 8 str in your example), only now we for the item, which fired the event (div.stars__data), we take the following of one's sibling (elements with the same parent block, we will have p.stars__progress) and as a width set to it a value from a variable width (declare it as `var width = \$(this).width()`. Ie do p.stars__the progress of the same width as div.stars__data. A name for the variable chosen is not very well, deceptive too much width )) - Gerson commented on April 4th 20 at 01:04
@Gersonif I can)

1) and can be replaced e.pageX on something else?
var progress = e.pageX - obj.offset().left;

2 ) and how to understand these tests?

if (e.pageX < leftEdge) {
progress = 0;
} else if (e.pageX >= rightEdge) {
progress = obj.width();
} - perry.Keebler commented on April 4th 20 at 01:07
1) more can be read e.g. here and here - about the events and about the coordinates here
2) the boundaries may not be the same for events and items more well here written - Gerson commented on April 4th 20 at 01:10
@Gerson, OK thanks
And how can that variable be called? Where width - perry.Keebler commented on April 4th 20 at 01:13
@Gerson,
https://codepen.io/Olya097/pen/vYEpNOw

there is a caveat

when you have set the rating, it should only show whole stars)
ie length 0% 20% 40% 60% 80% 100%

how to take this into account? - perry.Keebler commented on April 4th 20 at 01:16
variables it is better to call it so named it is obvious what variable is responsible. In this case it could be termed as something like starsDataWidth, then the expression `\$(this).next().width(starsDataWidth)` will become more readable and easy to grasp

to simplify the implementation of the second example, vskidku, I would have divided the field into individual stars in a large block enter 5 elements in each of which a background of 1 star. When you hover the mouse over the element, change the color of the star. - Gerson commented on April 4th 20 at 01:19

Find more questions by tags JavaScriptjQuery