Avatar of IvanGarcete
IvanGarceteFlag for Paraguay asked on

Stars ranking doesn't appear correctly

I need help with some javascript ranking stars. They're showing the number of the ranking, but that should be hidden. The positioning also should be align right.

I'm sure someone with knowledge of CSS and some FireBug use could fix this. Thanks.

This is the URL of the site: http://www.mundovillamorra.com.py/index.php/comercios/tiendas
CSSHTMLJavaScript

Avatar of undefined
Last Comment
IvanGarcete

8/22/2022 - Mon
HainKurt

i dont see anything on page

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0; MS-RTC LM 8; .NET4.0C; OfficeLiveConnector.1.5; OfficeLivePatch.1.3)
Timestamp: Wed, 1 Dec 2010 13:26:30 UTC


Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mundovillamorra.com.py/index.php/comercios/tiendas

ASKER
IvanGarcete

Seems that Firebug has a problem with Jquery on Firefox. Wthout firebug it works. And the Firebug lite on Chrome works too.
LZ1

Can you post the HTML/Javascript code for just the stars?  It looks like it's putting the numbers inside the <a> tag. In CSS what you could do, depending on your level of control of the script, is class each <a> tag and use display:none for just the numbers

Without seeing the raw code though, I'm not sure this would work.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
IvanGarcete

LZ1, I'm using this for the stars:

$(function(){
		// Hide all elements (it's possible to create Stars from hidden elements too)
			$(".starswrapper").children().hide();
 
 
			// Create default Stars from all class="starify" wrappers
			$(".starswrapper").stars();
			
});

Open in new window

<div id="stars_wrapper" class="starswrapper"> 
<input type="radio" name="rate-6" id="vote_1_6" value="1" title="Malo" /> 
<input type="radio" name="rate-6" id="vote_2_6" value="2" title="Aceptable" /> 
<input type="radio" name="rate-6" id="vote_3_6" value="3" title="Bueno" /> 
<input type="radio" name="rate-6" id="vote_4_6" value="4" title="Muy bueno" /> 
<input type="radio" name="rate-6" id="vote_5_6" value="5" title="Excelente" /> 
        </div>

Open in new window

<script type="text/javascript" src="http://www.mundovillamorra.com.py/script/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.mundovillamorra.com.py/script/jquery-ui.custom.min.js"></script> 
<script type="text/javascript" src="http://www.mundovillamorra.com.py/script/jquery.ui.stars.js"></script> 
<link rel="stylesheet" type="text/css" href="http://www.mundovillamorra.com.py/style/jquery.ui.stars.css"/>

Open in new window

<div id="stars_wrapper" class="starswrapper">
<input type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_1_<?php echo $row->ShpCod; ?>" value="1" title="Malo" />
<input type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_2_<?php echo $row->ShpCod; ?>" value="2" title="Aceptable" />
<input type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_3_<?php echo $row->ShpCod; ?>" value="3" title="Bueno" />
<input type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_4_<?php echo $row->ShpCod; ?>" value="4" title="Muy bueno" />
<input type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_5_<?php echo $row->ShpCod; ?>" value="5" title="Excelente" />
        </div>

Open in new window

ASKER
IvanGarcete

The stars all alone works perfect. It's the site css which turn it into a mess.
LZ1

Try doing this:

Add a class to each input called noText.  Then add this to your CSS:

I'm not 100% that this will work, but it should move those text numbers off the page.
.noText {text-indent:-9999px;}

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
IvanGarcete

It didn't work LZ1, I tried this and the text didn't move even a little bit:
<div id="stars_wrapper" class="starswrapper">
<input style="text-indent:-9999px;" type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_1_<?php echo $row->ShpCod; ?>" value="1" title="Malo" />
<input style="text-indent:-9999px;" type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_2_<?php echo $row->ShpCod; ?>" value="2" title="Aceptable" />
<input style="text-indent:-9999px;" type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_3_<?php echo $row->ShpCod; ?>" value="3" title="Bueno" />
<input style="text-indent:-9999px;" type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_4_<?php echo $row->ShpCod; ?>" value="4" title="Muy bueno" />
<input style="text-indent:-9999px;" type="radio" name="rate-<?php echo $row->ShpCod; ?>" id="vote_5_<?php echo $row->ShpCod; ?>" value="5" title="Excelente" />
        </div>

Open in new window

ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
IvanGarcete

Yeah LZ1! That works perfectly! Now, the second part of the question was how to align right all the stars below the email. You're a genious!
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
IvanGarcete

yeah! It work again... but a last thing came up... The stars are over the box line. How can I fix this?

http://www.mundovillamorra.com.py/index.php/comercios/tiendas

Your help has saved me hundreds of hours of internet surfing.
fblack61
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
IvanGarcete

You're a God LZ1! Works perfect!
Thanks so much for all your help! ^_^
LZ1

No problem at all!  Thanks for the points.
ASKER
IvanGarcete

Thanks to you ;)
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.