Hey all. I'm using the jquery star rating plugin by fyneworks. The problem is that about 5% of the time (and on the initial page load), the stars stack vertically instead of horizontally!?
When you refresh the page, they are fine - which is really odd. Please see the page here:
Any suggestions would be greatly appreciated!
Thanks
EDIT: The unpacked JS can be found here: http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js
Using firebug on your test page, I got rid of the float here and it worked fine.
div.rating-cancel, div.star-rating {
background:none repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
/* float:left !important; */
}
Do you execute the javascript after onload fires?
$(document).ready(function() {
//execute JS here
});
EDIT: Damn, this does the same after a few reloads. Well, this means that the javascript snippet - and/or built in javascript engine - fail. Try another star plugin, this one looks overbloated... 13K in size :O.
Here, you go, redone the whole thing, this 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>