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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    84
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Star Rating System

    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)

    Code:
     <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:

    Code:
    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!';
    }

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    84
    Thanks
    49
    Thanked 0 Times in 0 Posts
    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.

    Code:
    /* 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;
    	}

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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


  •  

    Posting Permissions

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