Morsusy2k Posted October 23, 2013 Share Posted October 23, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted October 23, 2013 Share Posted October 23, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Morsusy2k Posted October 23, 2013 Author Share Posted October 23, 2013 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/ Link to comment Share on other sites More sharing options...
Ingolme Posted October 24, 2013 Share Posted October 24, 2013 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. Link to comment Share on other sites More sharing options...
Morsusy2k Posted October 25, 2013 Author Share Posted October 25, 2013 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)); Link to comment Share on other sites More sharing options...
Ingolme Posted October 25, 2013 Share Posted October 25, 2013 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. Link to comment Share on other sites More sharing options...
Morsusy2k Posted October 27, 2013 Author Share Posted October 27, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted October 27, 2013 Share Posted October 27, 2013 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 Link to comment Share on other sites More sharing options...
Morsusy2k Posted October 27, 2013 Author Share Posted October 27, 2013 I managed to make it right. Thanks for the help Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now