JQuery - Create my script?
I wrote a script. He works! It's just a little rubbish. Can anyone tell me where I am going wrong.
Basically I have a 5 star rating. When the mouse hovers over different parts of the box, I need the stars to change.
Currently, the stars only change when moving the mouse and out of the element. I need the stars to change while the mouse is inside the element. I think the issue is event related, but I've tried a couple and it doesn't seem to matter.
$(".rating").mouseover(function(e) {
// Get Element Position
var position = $(this).position();
var left = position.left;
// Get mouse position
var mouseLeft = e.pageX;
// Get Actual
var actLeft = mouseLeft - left;
$(".info").html(actLeft);
if (actLeft < 20) {
$(this).attr('style', 'background-position:0;');
} else if (actLeft < 40) {
$(this).attr('style', 'background-position:0 -20px;');
} else if (actLeft < 60) {
$(this).attr('style', 'background-position:0 -40px;');
} else if (actLeft < 80) {
$(this).attr('style', 'background-position:0 -60px;');
} else {
$(this).attr('style', 'background-position:0 -80px;');
}
});
a source to share
Try this code:
JQuery
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$.each($('.starHighlight div'), function(i, val) {
$(val)
.hover(function() {
//TODO: remove hard coded numbers and calculate it based on icon size/number of stars
var starShift = (4 - i) * -20;
$(val).parent().css("backgroundPosition", starShift + "px bottom");
}, function() {
$(val).parent().css("backgroundPosition", "0 0");
});
});
});
/* ]]> */
</script>
CSS
<style type="text/css">
.starSelector, .starHighlight { width:100px !important; height:20px; background:url(http://front-end-developer.net/examples/star.png) top no-repeat; }
.starSelector div { cursor:pointer; width:20px; height:20px; float:left; text-indent:-1000px; }
.starHighlight { background-position:-100px bottom; }
</style>
XHTML:
<div class="starSelector">
<div class="starHighlight">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</div>
Edit: Tested on Firefox, Chrome, IE6, IE7 and IE8.
You probably need to add some kind of click event to make the number of highlighted stars increase as the user gets out of control.
a source to share
I know this is pretty funny, but I would have thought I put it here to get some feedback ^^. I haven't tested it, but it should work.
This is spoken of as using pure CSS for this:
<div class="stars">
<span>Star<span>Star<span>Star<span>Star</span></span></span></span>
</div>
.stars span{
background: url(not-selected.png);
}
.stars span:hover{
background:url(selected.png);
}
a source to share