co.ador Posted July 23, 2009 Share Posted July 23, 2009 <td> <ul class="rating nostar" id="Torpedo"> <li class="one"><a href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li> </ul> </td> this is a rating star row which is suppose to refresh without a browser refreshing. it is refreshing but is not CSS formating to <td><strong>Raiting:</strong></td> <td> <ul class="rated twostar" id="Torpedo"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> </ul> I have to refresh the browser in order to <td><strong>Raiting:</strong></td> <td> <ul class="rated twostar" id="Torpedo"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> </ul> to appear.. It's the javascript working? This is the code before clicking on one of the star in the star row. <style type="text/css"> <!-- .style1 {color: #FF3300} .style2 {color: #FFFFFF} .style3 {color: #000000} --> </style> \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" /> <title>Shoes</title> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rating.js"></script> <script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script> </head> <body> <table id="rantview"> <a href=""><td width="40" id="contenido1">tropiezo></td></a> <a href=""><td width="40" id="contenido2">colozar1></td></a> <a href=""><td width="40" id="contenido3">colozar2></td></a> <a href=""><td width="40" id="contenido4">colozar3></td></a> <a href=""><td width="40" id="contenido4">colozar4></td></a> <a href=""><td width="40" id="contenido4">colozar3</td></a> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemdetails"> <tr> <td width="1100" height="350" bgcolor="#FFFFFF" class="tento"> <table class="cafe"><tr><td width="547"> <a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">Torpedo</h3></a> </td> </tr> </table> <table width="1215" height="609" class="chencho" > <td class="largethumb" rowspan="8" align="center"> <a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td> <td width="340" rowspan="8" padding="0" ><table width="252" style="font-size:12px; position:relative; top:-6px;"> <td width="1"> </td> <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td> <td colspan="7">$<span class="style3">6.00</span></td> <tr> <td class="style1"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </td> <td> <img src="../images/rating.gif" alt="s" /></td> <td> <ul class="rating nostar" id="Torpedo"> <li class="one"><a href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li> </ul> </td> </tr><tr> <td width="12"><span class="style2">coloso</span></td> </tr> <tr> <td > </td> </tr></table> </td> <tr> <td width="400" height="40" rowspan="3"><strong>Details:</strong></td> </tr> <tr> <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td> </tr><tr> <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="21"><ul> <li>coloso mentiroso</li> </ul></td> </tr><tr> <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td> </tr> <tr></tr><td rowspan="2"> <table width="162" align="center" class="smallthumbs"> </td></table> </body> </html> This is the code after clicking as you can see is the same as the one above except that after clicking it does record the data in the database but it does not refresh as it supposed to with the javascript and Ajax links it has on top of the code. <style type="text/css"> <!-- .style1 {color: #FF3300} .style2 {color: #FFFFFF} .style3 {color: #000000} --> </style> \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" /> <title>Shoes</title> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rating.js"></script> <script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script> </head> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemdetails"> <tr> <td width="1100" height="350" bgcolor="#FFFFFF" class="tento"> <table class="cafe"><tr><td width="547"> <a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">-1/2 Pollo al horno</h3></a> </td> </tr> </table> <table width="1215" height="609" class="chencho" > <td class="largethumb" rowspan="8" align="center"> <a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td> <td width="340" rowspan="8" padding="0" ><table width="252" style="font-size:12px; position:relative; top:-6px;"> <td width="1"> </td> <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td> <td colspan="7">$<span class="style3">9.00</span></td> <tr> <td class="style1"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </td> <td> <img src="../images/rating.gif" alt="s" /></td> <td> <ul class="rating nostar" id="Torpedo"> <li class="one"><a href="javascript:RateItem('-1/2 Torpedo', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('-1/2 Torpedo'', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('-1/2 Torpedo'', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('-1/2 Torpedo'', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('-1/2 Torpedo'', 5);" title="5 Stars">5</a></li> </ul> </td> </tr><tr> <td width="12"><span class="style2">coloso</span></td> </tr> <tr> <td > </td> </tr></table> </td> <tr> <td width="400" height="40" rowspan="3"><strong>Details:</strong></td> </tr> <tr> <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td> </tr><tr> <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="21"><ul> <li>coloso mentiroso</li> </ul></td> </tr><tr> <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td> </tr> <tr></tr><td rowspan="2"> <table width="162" align="center" class="smallthumbs"> </td></table> </body> </html instead of the result row of star appear the output and result after clicking is recording the data in the database and outputing.. Price: $9.00 Rating: * 1 * 2 * 3 * 4 * 5 it doesn't format the ul ordered list with the classes rated without a manual browser refresh. It will formatted if I manually refresh the browser. It seem like the Ajax code is not affecting the html code why do I have to manually refresh? By the way the source page after manually refreshing vary and it gets formatted with the CSS class "rated". Before the users click in one of the star in the row it gets formatted with the CSS class "rating" and it supposed to change after clicking in one of the star in the row without manually having to refresh the browser. The source page after manually refreshing the browser is: <style type="text/css"> <!-- .style1 {color: #FF3300} .style2 {color: #FFFFFF} .style3 {color: #000000} --> </style> \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" /> <title>Shoes</title> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rating.js"></script> <script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemdetails"> <tr> <td width="1100" height="350" bgcolor="#FFFFFF" class="tento"> <table class="cafe"><tr><td width="547"> <a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">-1/2 Pollo al horno</h3></a> </td> </tr> </table> <table width="1215" height="609" class="chencho" > <td class="largethumb" rowspan="8" align="center"> <a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td> <td width="340" rowspan="8" padding="0" ><table width="252" style="font-size:12px; position:relative; top:-6px;"> <td width="1"> </td> <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td> <td colspan="7">$<span class="style3">9.00</span></td> <tr> <td class="style1"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </td> <td> <img src="../images/rating.gif" alt="s" /></td> <td> <ul class="rated fourstar" id="Torpedo"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> </ul> </td> </tr><tr> <td width="12"><span class="style2">coloso</span></td> </tr> <tr> <td > </td> </tr></table> </td> <tr> <td width="400" height="40" rowspan="3"><strong>Details:</strong></td> </tr> <tr> <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td> </tr><tr> <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="29"><ul> <li>coloso mentiroso</li> </ul></td> </tr> <tr> <td width="400" height="21"><ul> <li>coloso mentiroso</li> </ul></td> </tr><tr> <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td> </tr> <tr></tr><td rowspan="2"> <table width="162" align="center" class="smallthumbs"> </td></table> </body> </html> The only differences is that: Stage 1. Before clicking on one of the stars it appear nostar and the user get to choose which number of star he/she wants to choose by hovering over. The code below is the output when stars=0, nostar are show just a blank row of star and the users get to hover over them to chooses the number of stars they want. <td> <ul class="rating nostar" id="Torpedo"> <li class="one"><a href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li> </ul> </td> The javascript href="javascript:RateItem('Torpedo', 1);". does appear the first time. Stage 2. the code below appear in the source page. <td> <ul class="rating nostar" id="Torpedo"> <li class="one"><a href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li> </ul> </td> The output in the browser is Price: $9.00 Rating: * 1 * 2 * 3 * 4 * 5 The javascript href="javascript:RateItem('Torpedo', 1);". does appear and at this point the data or number of star has been record in the database but instead of stage appearing it should be stage 3 right after stage 1. Stage 3 After refreshing the browser manually the ul gets formatted by the CSS rated class. <td> <ul class="rated fourstar" id="Torpedo"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> </ul> </td> pluss the javascript property href="javascript refreshing effect is not working helpjavascript:RateItem('Torpedo', 1);". does not appear as it appears in the source page before users click on one of the stars. The javascript links that should do the refreshing automatically supposed to be the two below: <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rating.js"></script> How can it be possible to auto refresh it? Quote Link to comment Share on other sites More sharing options...
haku Posted July 23, 2009 Share Posted July 23, 2009 Look at this: <style type="text/css"> <!-- .style1 {color: #FF3300} .style2 {color: #FFFFFF} .style3 {color: #000000} --> </style> \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Your CSS is before your doctype. This causes two problems - the first is that you can't have anything before your doctype. No spaces, enter keys, text, nothing at all. Your doctype has to be the very first thing. The other problem is that your CSS is not between the <head> tags where it needs to be. This is probably why it isn't working. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 23, 2009 Author Share Posted July 23, 2009 Took it out but it doesn't work still.. the doctype have been fixed and nothing is put before it, put the head tags to wrap the css stylesheet ranwebpagepueba.css Quote Link to comment Share on other sites More sharing options...
haku Posted July 23, 2009 Share Posted July 23, 2009 Got a link to the page? Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 23, 2009 Author Share Posted July 23, 2009 i don't have it on a server yet, that's another topic I want to discuss how to get it on a server? Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2009 Share Posted July 24, 2009 Get a server, use an ftp program to log into it (I use filezilla - it's easy and great), and upload your files. Here's one last thing to try. If it doesn't work, I'll need a link before I can help. 1) Wrap your whole UL in a div, and give the div an ID: <div id="menu_wrapper"> <ul class="rated"> // add your <li> tags here </ul> </div> Then set your CSS like this: #menu_wrapper .rated { list-style: none; } Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 is it for free to get your web into a server and the ftp program and all of that staff? I will try to wrap it into a div Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 didn't work the div you gave me I downloaded the firebug somebody told me I can fix a couple of things It is possible to see even the javascript Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2009 Share Posted July 24, 2009 Firebug is the best. Click 'inspect', then click the <ul>. You can look on the right and see what CSS is being applied to that attribute. You need to find what is overpowering your list-style:none and write something stronger than that. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 it is very strange because the formatting that appear in the firebug is not the same formatting that appear when in the editor. I guess because is being dynamic. Well when I click in one of the stars of the row then it refresh but then usual unformatted rating in a list of bullet appear Rating * 1 * 2 * 3 * 4 * 5 Well when i inspect the CSS styling with the firebug, I check for the CSS rating and rated class and then both of then show a slightly different format than the one in the editor. Rating class format in the firebug ul.rating { background: transparent url(..images/matrix.jpg) no repeat scroll 0 0; clear:both; height:7px; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0 0 0; padding:0; position:relative; width:54px;} rated class in the firebug after click a star in the row .rated { background: transparent url(..images/matrix.jpg) no-repeat scroll 0 0; clear:both; height:7px; left:5px; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0 0 0; padding:0; position:relative; top:3px; width:54px; } Then if I refresh the browser manually then the actual number of star appear and formatted and the fallowing CSS format in the classes rating and rated ul.rating { background: transparent url(..images/matrix.jpg) no repeat scroll 0 0; clear:both; height:7px; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0 0 0; padding:0; position:relative; width:54px;} rated class in the firebug after refreshing the browser manually .rated { background: transparent url(..images/matrix.jpg) no-repeat scroll 0 0; clear:both; height:7px; left:5px; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0 0 0; padding:0; position:relative; top:3px; width:54px; } it is basically the same now I wonder why it doesn't do it right away instead of listing first the Rating * 1 * 2 * 3 * 4 * 5 in the browser and then have to actually refresh it manually so it can display the actual format in pictures so users can see the stars I don't get it. Ps: the format below of the classes ul.rating and .rated is what appear in the dreamweaver editor ul.rating { list-style:none; width:54px; height:7px; margin:0 0 0px 0; padding:0px; clear:both; position:relative; background:url(../images/matrix.gif) no-repeat 0 0; } .rated{ width:54px; height:7px; margin:0 0 0px 0; padding:0; list-style:none; clear:both; position:relative; top:3px; left:5px; background: url(../images/matrix.gif) no-repeat 0 0; } Which this format is different to the format that appear in the firebug this one doesn't have the property list-style-image, list-style-position and list-style-type. none of this property appear in the edit CSS stylesheet I have. very strange. Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2009 Share Posted July 24, 2009 You are apparently changing the class when it's clicked on. Look at the difference in class names: ul.rating .rated Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 I think according to the php command the php script below suggest to go to the CSS class .rated after being clicked on, take a look. public static function OutputRating($varItem) { // Verify $varItem was provided if ($varItem != null && strlen(trim($varItem)) != 0) { // Check if Magic QUotes is ON if (!get_magic_quotes_gpc()) { $varItem = addslashes($varItem); } // Information for the Output $averageStars = Rating::CalculateAverageRating($varItem); // Check to see that the user has not already rated this item if (Rating::CheckRatingsByIp($varItem) == 0) { $classes = "rating " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } else { $classes = "rated " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\">1</li>\r\n"; $output .= " <li class=\"two\">2</li>\r\n"; $output .= " <li class=\"three\">3</li>\r\n"; $output .= " <li class=\"four\">4</li>\r\n"; $output .= " <li class=\"five\">5</li>\r\n"; $output .= "</ul>\r\n"; } } the if statement if (Rating::CheckRatingsByIp($varItem) == 0) { $classes = "rating " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } will show empty stars if that user or IP addrasses CheckRatingsByIp is equal zero ==0 or that user hasn't rated that item $varItem then it will show up the code below the same one as in the one above // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; the CSS class formatting this empty stars or if statment will be .rating $classes = "rating " . Rating::ShowStars($averageStars); Then if the item or $varItem is not equal zero meaning the user or IP has rated before then else else { $classes = "rated " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\">1</li>\r\n"; $output .= " <li class=\"two\">2</li>\r\n"; $output .= " <li class=\"three\">3</li>\r\n"; $output .= " <li class=\"four\">4</li>\r\n"; $output .= " <li class=\"five\">5</li>\r\n"; $output .= "</ul>\r\n"; } the else will display // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\">1</li>\r\n"; $output .= " <li class=\"two\">2</li>\r\n"; $output .= " <li class=\"three\">3</li>\r\n"; $output .= " <li class=\"four\">4</li>\r\n"; $output .= " <li class=\"five\">5</li>\r\n"; $output .= "</ul>\r\n"; and formatted with the rated CSS class $classes = "rated " . Rating::ShowStars($averageStars); Check the else statement has .rated css class instead of .rating So it's suppose to change when the user click but it is not showing the star right after I click I wonder if it is refreshing or if it is refreshing but it's not showing the star rated .rated Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2009 Share Posted July 24, 2009 The php is irrelevant - the html output is all that matters. Analyze the output, and see where it isn't doing what you think it is. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 Haku I checked the html output in firebug for the result of when a user click on one of the star in the row and it appear listed bullet and the following html output is The output of the class in this html code is undefined can anybody tell me what can be done to define? the classed supposed to be ".rated" <td> <ul id="Torpedo" class="undefined"> <li class="one"> <a title="1 Star" href="javascript:RateItem('Torpedo', 1);">1</a> </li> <li class="two"> <a title="2 Stars" href="javascript:RateItem('Torpedo', 2);">2</a> </li> <li class="three"> <a title="3 Stars" href="javascript:RateItem('Torpedo', 3);">3</a> </li> <li class="four"> <a title="4 Stars" href="javascript:RateItem('Torpedo', 4);">4</a> </li> <li class="five"> <a title="5 Stars" href="javascript:RateItem('Torpedo', 5);">5</a> </li> </ul> </td> Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 24, 2009 Author Share Posted July 24, 2009 when I refresh it manually the two classes appear and the ul unordered list change to the else statement. <td> <ul id="Torpedo" class="rated fivestar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> </ul> </td> Quote Link to comment Share on other sites More sharing options...
haku Posted July 25, 2009 Share Posted July 25, 2009 if you have this css: .rated { //css } .fivestar { //css } .fivestar will take precedence because it comes after .rated. Check the order of your CSS. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 25, 2009 Author Share Posted July 25, 2009 rated class is first than fivestar so you suggest to put the fivestar class first and then rated? I was testing what you told me and I moved some classes and indeed the position of the CSS classes do affect the display... Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 25, 2009 Author Share Posted July 25, 2009 .rating { list-style:none; width:54px; height:7px; margin:0 0 0px 0; padding:0px; clear:both; position:relative; background:url(../images/matrix.gif) no-repeat 0 0; } ul.rating li { cursor: pointer; float:left; text-indent:-900em; } ul.rating li a { position:absolute; left:0; top:0px; width:12px; height:7px; text-decoration:none; z-index: 200; } ul.rating li.one a {left:0px} ul.rating li.two a {left:11px;} ul.rating li.three a {left:22px;} ul.rating li.four a {left:33px;} ul.rating li.five a {left:44px;} ul.rating li a:hover { z-index:2; width:54px; height:7px; overflow:hidden; left:0; background:url(../images/matrix.gif) no-repeat 0 0; list-style:none; } ul.rating li.one a:hover {background-position:0 -42px;} ul.rating li.two a:hover {background-position:0 -49px;} ul.rating li.three a:hover {background-position:0 -56px;} ul.rating li.four a:hover {background-position:0 -63px;} ul.rating li.five a:hover {background-position:0 -70px;} .rated{ width:54px; height:7px; margin:0 0 0px 0; padding:0; list-style:none; clear:both; position:relative; top:3px; left:5px; background: url(../images/matrix.gif) no-repeat 0 0; } ul.rated li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated\*/ float:left; /* end hide*/ text-indent:-999em; } ul.rated li.one a {left:0} ul.rated li.two a {left:11px;} ul.rated li.three a {left:22px;} ul.rated li.four a {left:33px;} ul.rated li.five a {left:44px;} .nostar {background-position:0 0} .onestar {background-position:0 -7px;} .twostar {background-position:0 -14px;} .threestar {background-position:0 -21px;} .fourstar {background-position:0 -28px;} .fivestar {background-position:0 -35px;} The CSS style sheet is huge but this is the part of the rating. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 26, 2009 Author Share Posted July 26, 2009 Haku problem solved it was a simple slash "/" after the ?> in class.rating.php file causing all this trouble and headaches and it was fixed by SoulScratch at sitepoint forum If any body need the script for the RAting system just let PM Edit/Delete Message Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.