Geek Answers Handbook

JQuery stars rating vertical

I am using jQuery star rating plugin by fyneworks. The problem is that about 5% of the time (and at the initial page load) the stars flow vertically, not horizontally !?

When you refresh the page, they are in order - which is really strange. Check out the page here.

Any suggestions would be greatly appreciated!

thanks

EDIT: Unpacked JS can be found here

+7
javascript jquery
source share
5 answers

Solved this myself, using a script here instead:

http://orkans-tmp.22web.net/star_rating/

0
source share

EDIT: Damn it does the same after a few reboots. Well, that means the javascript fragment - and / or the built-in javascript engine - is crashing. Try another star plugin, this one looks overpriced ... 13K in size: O.

Here you go, redo it all, it works for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js' type="text/javascript"></script> <script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script> <script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script> <link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/> </head> <body> <div class="Clear"> <input name="star1" type="radio" class="star {split:2}" value="0.5/5"/> <input name="star1" type="radio" class="star {split:2}" value="1/5"/> <input name="star1" type="radio" class="star {split:2}" value="1.5/5"/> <input name="star1" type="radio" class="star {split:2}" value="2/5"/> <input name="star1" type="radio" class="star {split:2}" value="2.5/5"/> <input name="star1" type="radio" class="star {split:2}" value="3/5" checked="checked"/> <input name="star1" type="radio" class="star {split:2}" value="3.5/5"/> <input name="star1" type="radio" class="star {split:2}" value="4/5"/> <input name="star1" type="radio" class="star {split:2}" value="4.5/5"/> <input name="star1" type="radio" class="star {split:2}" value="5/5"/> </div> <button class="rate" type="submit" title="Submit your rating">Rate!</button> </body> </html>
+1
source share

Using firebug on the test page, I got rid of the float and it worked fine.

 div.rating-cancel, div.star-rating { background:none repeat scroll 0 0 transparent; cursor:pointer; display:block; /* float:left !important; */ }
0
source share

Is javascript running after onload reloads?

 $(document).ready(function() { //execute JS here });
0
source share

5 star rating A system using PHP and jQuery is used to evaluate various products or services on any web page in the best way interactive. The user can rate the content on a scale of 1 to 5 stars without reloading the page. We just give an example of scanning 1-5, otherwise the configuration of the jQuery scale can be changed. In this example, we used the Raty.JS plugin for interactive stars.

STEP-1 Create a simple html file as shown below

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <script type="text/javascript"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="http://testweb3.iecworld.com/jsdemo/js/lq_js_point/js/jquery.raty.min.js"></script> // Initialise Plugin $(document).ready(function(){ $('.stars').raty({ score: function() { return $(this).attr('data-score'); } }); }); </script> </head> <body> <b>Star Rating Demo</b> <div class="stars"></div> </body> </html>

Here it is. Our stars will look something like this: Star output rating

First of all, we created a simple HTML document and included JQuery and Raty JS.

Below is the code used to initialize Raty for star rating functionality.

  $(document).ready(function(){ $('.stars').raty({ score: function() { return $(this).attr('data-score'); } }); });

Read-only star rating

 $('.stars').raty({ readOnly: true });

The number of stars to evaluate $ (". Stars). Raty ({Start: 2});

Functionality Onclick $ (". Stars). Raty ({onClick: function (score) {alert ('Your Score:' + score);}});

Default Cancel Button

 $('.stars').raty({ showCancel: true });

Half century display

 $('.stars').raty({ showHalf: true });

The user can also retrieve the value of the selected stars and maintain the value in the database using the onclick event. Saty Stars are user-friendly and supported by almost all browsers (Firefox, Google Chrome, Safari, iPad, Iphone, Android Phone, etc.). www.spjoshis.blogspot.com

0
source share

More articles:


All Articles