star rating system

sanjog · July 17, 2014

I wanted to make a star rating system but my code is not working. Can anyone help me please? i couldn't figure out why the star is not changing while hover it.

1.0-star.png is white while 0.5-star.png is golden.

Thanks.

Here is the code..

<html>

<head>

function setRating(number){

jquery('#main').css('background', 'url(images/'+number+'-star.png) no-repeat')

}

function saveRating(number){

jquery('.rating').attr('onmouseout','setRating(''+number+'')');

alert(number);

}

</script>

</head>

<body>

</div>

</body>

</html>

Hadien · July 17, 2014

Looking over your code I see a few errors, specifically the attr() function doesn't run strings as an eval() (even if it did that is definitely not the way to do it). I can go over and run a few corrections on your javascript to get it running smoothly.

<head>    <style>      #main{        background-image:url('images/10-star.png');        background: no-repeat;      }      #main.star05{background-image:url('images/05-star.png')}      #main.star10{background-image:url('images/10-star.png')}      #main.star15{background-image:url('images/15-star.png')}      #main.star20{background-image:url('images/20-star.png')}      #main.star25{background-image:url('images/25-star.png')}      #main.star30{background-image:url('images/30-star.png')}      #main.star35{background-image:url('images/35-star.png')}      #main.star40{background-image:url('images/40-star.png')}      #main.star45{background-image:url('images/45-star.png')}      #main.star50{background-image:url('images/50-star.png')}      /********************************************      notice I defined the hover classes after the star classes      this way they will have higher priority than the previous       group if #main has both classes since the hover classes      are the last ones listed at the same specificity level (ID + classname)      ********************************************/      #main.hover_star05{background-image:url('images/05-star.png')}      #main.hover_star10{background-image:url('images/10-star.png')}      #main.hover_star15{background-image:url('images/15-star.png')}      #main.hover_star20{background-image:url('images/20-star.png')}      #main.hover_star25{background-image:url('images/25-star.png')}      #main.hover_star30{background-image:url('images/30-star.png')}      #main.hover_star35{background-image:url('images/35-star.png')}      #main.hover_star40{background-image:url('images/40-star.png')}      #main.hover_star45{background-image:url('images/45-star.png')}      #main.hover_star50{background-image:url('images/50-star.png')}    </style>    <!-- Remember, always put script tags after style tags -->    <script src="http://ajax.googleap...1/jquery.min.js"></script>    <script>      $("#main span").hover(          function (){//handler to do while hovering over span            //"$(this) will refer to span element while inside each handler function            // .parent() tells to move the selection from the current span to the span's parent            //           ( the #main)            // .addClass() will be adding the temporary hover class to the #main            $(this).parent()                   .addClass("hover_"+$(this).attr('class'));          },          function (){//handler to do when you leave span            //very similar to the mouseenter handler, just removes that same hover class            $(this).parent()                   .removeClass("hover_"+$(this).attr('class'));          }      ).click(          function(){//now the handler when you click on a span            //this one removes all classes from #main, including any hover classes            // then adds the class with the rating you want to be set.            $(this).parent()                   .removeClass()                   .addClass($(this).attr('class'));          }      );    </script>  </head>  <body>    <div id="main">      <span class="star05"></span>      <span class="star10"></span>      <span class="star15"></span>      <span class="star20"></span>      <span class="star25"></span>      <span class="star30"></span>      <span class="star35"></span>      <span class="star40"></span>      <span class="star45"></span>      <span class="star50"></span>    </div>  </body></html>

I made quite a few changes to your code with some optimizations.Sorry to say, I being pulled away from my PC to help someone move so I haven't been able to test the code yet nor will I be back to answer any questions you may have about it until tonight, but hopefully I can just post what I have here and others on the forum can pick up where I left off and help any mistakes I've made or answer any questions you have. I just thought I should post straight away to help steer you in the right direction.

Sign In

star rating system

Recommended Posts

sanjog

Link to comment

Share on other sites

Hadien

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity