Star Rating System

[jchrisphonte]

Hello

I came across a star rating system online: originally here - http://www.yvoschaap.com/weblog/css_..._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]

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]

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]

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