Rating stars

[Morsusy2k]

Okay so I am trying to make a star rating system on my website,but I am having problems with JS.

The problem is that I can't get the coordinates of the mouse INSIDE the div,I can only get screen coordinates. :S

 

This is my code:

<div id='stars'><div id='stars1'></div></div><div id='mark'>0</div>

$(document).ready(function(){	$(function(){		$("#stars").mouseenter(function(){		    $("#stars1").show();		    $(document).bind('mousemove', function(e){                        //1		    	//var parentOffset = $(this).parent().offset(); 		    	//var x = e.pageX - parentOffset.left;                        //2		    	var center = (window.screen.width - 1122)/2+283;		  	var x = e.pageX - center;		    	$('#stars1').css('width',x);		    });		});		$("#stars").mouseleave(function(){		    $("#stars1").hide();		});	});});

I found a solution online but it is not working,that is why its commented out,the error is:

Uncaught TypeError: Cannot read property 'left' of undefined 

and I get this error every time I move the cursor.

And in the other example (2) I tried to calculate the distance from the left border of the browser,but this one works only for me..Since I have used percentage (%) instead of solid units (pixels) its kinda hard to achieve..

 

I hope you understand what is the problem.

Thanks.

[davej]

Well, uh, why do you want to follow the mouse? All you need to know is which star was clicked on. I'd expect you to assign a click handler to each star area and just calculate the click event position with relative to the position of the "this" element.

Edited October 23, 2013 by davej

[Morsusy2k]

Well I wanted to make it more dynamic so people could click on eg. 3.15 instead of only 1,2,3,4,5.

Something like this http://demos.myjqueryplugins.com/jrating/

[Ingolme]

Why not use the library you're linking to?

 

What they did isn't something you can code with a couple of lines which is why they built it for people who are looking for something like that.

[Morsusy2k]

Okay so I installed raty to my webs. It works but I can't get it to change the rating in my DB. Take a look:

$string = $row['RATE'];	$expl = explode(',',$string);	$size = count($expl);	$rating = 0;        $zbir = 0;	for ($i=0; $i < $size; $i++)	{	$zbir = $zbir + $expl[$i];	}	$rating = round($zbir/$size,2);        echo "<script type='text/javascript'>",	     "$(function() {";	echo "$('#star').raty({ half: true , score: " . $rating . " , ";	echo "starOff: 'source/raty/star-off.png',starOn : 'source/raty/star-on.png',starHalf: 'source/raty/star-half.png',",	     "click: function(score, evt) {",	     "alert(score);";             //add code here	echo "}",	     "});",	     "$('#ocena').html(" . $rating . ");",	     "});",	     "</script>";

This works,but this only alerts the selected score,how could I add it to the existing values in my DB?

This is what I tried but it does not work.

$new = $string.","./* I need variable 'score' here */;$sq9 = "insert into " . $row['ID'] . " (RATE) values ('$new')";$result9 = mysql_query($sql9));

[Ingolme]

The value of the rating is either in the $_POST array or the $_GET array. If you don't know, just print_r($_POST) and print_r($_GET) to see if it's getting there.

 

Of course, you need to use AJAX to send a request to a PHP file. At the moment all you're doing is printing out some Javascript code that will get the rating. Javascript and PHP run in two completely independent environments.

[Morsusy2k]

Can you help me out with this,I can't seem to find a way to send the data to mysql through ajax/php..:S

Edited October 27, 2013 by Morsusy2k

[davej]

Did you look at these examples?

 

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_post

 

http://www.w3schools.com/php/php_mysql_connect.asp

 

http://www.w3schools.com/php/php_mysql_insert.asp

[Morsusy2k]

I managed to make it right.

Thanks for the help