...

View Full Version : Star Rating System



jchrisphonte
02-27-2012, 12:01 AM
Hello

I came across a star rating system online: originally here - http://www.yvoschaap.com/weblog/css_star_rater_ajax_version/

I follow the steps and it isnt showing the stars only numbers from 1-10 ( i amended it from 5 to 10 stars)


<div id="rating">
<h3>Rating:</h3>
<pre>
<ul class="star-rating">
<li class="current-rating" id=‘current-rating’ style=‘width: <? $ratingpx = $rating *25; echo $ratingpx;?>px’><!—Currently <? echo $rating ?>/10 Stars.—></li>
<li><a href="javascript:rateImg(1,’<? echo $imgId ?>’)" title=‘1 star out of 10’ class=‘one-star’>1</a></li>
<li><a href="javascript:rateImg(2,’<? echo $imgId ?>’)" title=‘2 stars out of 10’ class=‘two-stars’>2</a></li>
<li><a href="javascript:rateImg(3,’<? echo $imgId ?>’)" title=‘3 stars out of 10’ class=‘three-stars’>3</a></li>
<li><a href="javascript:rateImg(4,’<? echo $imgId ?>’)" title=‘4 stars out of 10’ class=‘four-stars’>4</a></li>
<li><a href="javascript:rateImg(5,’<? echo $imgId ?>’)" title=‘5 stars out of 10’ class=‘five-stars’>5</a></li>
<li><a href="javascript:rateImg(6,’<? echo $imgId ?>’)" title=‘6 star out of 10’ class=‘six-stars’>6</a></li>
<li><a href="javascript:rateImg(7,’<? echo $imgId ?>’)" title=‘7 stars out of 10’ class=‘seven-stars’>7</a></li>
<li><a href="javascript:rateImg(8,’<? echo $imgId ?>’)" title=‘8 stars out of 10’ class=‘eight-stars’>8</a></li>
<li><a href="javascript:rateImg(9,’<? echo $imgId ?>’)" title=‘9 stars out of 10’ class=‘nine-stars’>9</a></li>
<li><a href="javascript:rateImg(10,’<? echo $imgId ?>’)" title=‘10 stars out of 10’ class=‘ten-stars’>10</a></li>
</ul>
</pre>
</div>

Here is the Javascript that was posted online:


function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
// Mozilla / Safari
this._xh = new XMLHttpRequest();
} catch (e) {
// Explorer
var _ieModelos = new Array(
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'
);
var success = false;
for (var i=0;i < _ieModelos.length && !success; i++) {
try {
this._xh = new ActiveXObject(_ieModelos[i]);
success = true;
} catch (e) {
// Implementar manejo de excepciones
}
}
if ( !success ) {
// Implementar manejo de excepciones, mientras alerta.
return false;
}
return true;
}
}

datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
this.procesado = true;
}
}

datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
this.iniciar();
}
if (!this.ocupado()) {
this._xh.open("GET",urlget,false);
this._xh.send(datos);
if (this._xh.readyState == 4 && this._xh.status == 200) {
return this._xh.responseText;
}

}
return false;
}



function rateImg(rating,imgId ) {
remotos = new datosServidor;
nt = remotos.enviar('update.php?rating='+rating+'&imgId ='+imgId );
rating = (rating * 25) - 8;
document.getElementById('current-rating').style.width = rating+'px';
//document.getElementById('ratingtext').innerHTML = 'Thank you for your rating!';
}

devnull69
02-27-2012, 08:18 AM
There is no code to show any stars. If this is an actual example of the rating app, they obviously don't provide star images, just numbers.

jchrisphonte
02-27-2012, 03:11 PM
Hello Devnull,

I was confused by this as well -- I have the image saved in my folder and i see it referenced here in css.


/* STAR RATING */
.star-rating{
list-style:none;
margin-left:5px!important;
padding:0px;
width: 125px;
height: 25px;
position: relative;
background: url(alt_star.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:25px;
height: 25px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(alt_star.gif) left bottom;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:25px;
}
.star-rating a.two-stars{
left:25px;
}
.star-rating a.two-stars:hover{
width: 50px;
}
.star-rating a.three-stars{
left: 50px;
}
.star-rating a.three-stars:hover{
width: 75px;
}
.star-rating a.four-stars{
left: 75px;
}
.star-rating a.four-stars:hover{
width: 100px;
}
.star-rating a.five-stars{
left: 100px;
}
.star-rating a.five-stars:hover{
width: 125px;
}
.star-rating li.current-rating{
background: url(alt_star.gif) left center;
position: absolute;
height: 25px;
display: block;
text-indent: -9000px;
z-index: 1;
}

devnull69
02-27-2012, 04:00 PM
You're right, it should work. But your quotes might be the wrong ones. Please only use ' single or " double quotes, other quotes (like ` or ´) will not work



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum