Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts

    JQuery rating system problem

    Hi I'm trying to implement a JQuery star rating script into my site, taken from reading this tutorial http://webtint.net/tutorials/5-star-...ql-and-jquery/, the number of rates and current rating is stored in mysql. But the problem I'm having is when someone just hovers over the stars and moves the mouse out, it doesn't go back to what the current vote was, it remains where it was last hovered over.

    Heres what I have

    HTML / PHP

    PHP Code:
    <?php
    mysql_connect
    ("localhost""root""") or die(mysql_error());
    mysql_select_db("test") or die(mysql_error());

    $query mysql_query("SELECT * FROM ratings");

    while(
    $row mysql_fetch_array($query)) {
        
    $rating = (int)$row[rating];
        
    ?>
        <div class="floatleft">
            <div id="rating_<?php echo $row[id]; ?>">
                <span class="star_1"><img src="images/star_blank.png" alt="" <?php if($rating 0) { echo"class='hover'"; } ?> /></span>
                <span class="star_2"><img src="images/star_blank.png" alt="" <?php if($rating 1.5) { echo"class='hover'"; } ?> /></span>
                <span class="star_3"><img src="images/star_blank.png" alt="" <?php if($rating 2.5) { echo"class='hover'"; } ?> /></span>
                <span class="star_4"><img src="images/star_blank.png" alt="" <?php if($rating 3.5) { echo"class='hover'"; } ?> /></span>
                <span class="star_5"><img src="images/star_blank.png" alt="" <?php if($rating 4.5) { echo"class='hover'"; } ?> /></span>
            </div>
        </div>
        <div class="star_rating">
            (Rated <strong><?php echo $rating?></strong> Stars)
        </div>

        <div class="clearleft">&nbsp;</div>
    <?php    
    }
    ?>
    JavaScript:

    Code:
    $(document).ready(function() {
    	$("[id^=rating_]").hover(function() {
    		rid = $(this).attr("id").split("_")[1];
    		$("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {
    
    			$("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");
    
    			/* The hovered item number */
    			var hovered = $(this).parent().attr("class").split("_")[1];
    	
    			while(hovered > 0) {
    				$("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
    				hovered--;
    			}
    		});
    	});
    
    	$("[id^=rating_]").children("[class^=star_]").click(function() {
    		var current_star = $(this).attr("class").split("_")[1];
    		var rid = $(this).parent().attr("id").split("_")[1];
    		$('#rating_'+rid).load('send.php', {rating: current_star, id: rid});
    	});
    });
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You have no "hover out" function declared inside your call to .hover(), so nothing is going to happen when your mouse exits hover.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •