Strange image problem

[Barbara]

I have a page that displays a recipe which is dynamically added from a REST service. It has a rating displayed at the top which is actually a set of radio buttons styled using a jquery plugin.

Something strange happens to this rating when I press a button on the navbar as you can see in the attached images.

Any ideas?

[maxkatz]

Check if there no JavaScript errors... looks like a service is being invoked (or something).

[Barbara]

There are no errors. All the navbar button does at the moment is open a popup, It's the duplication of the rating image in the meantime that I'm concerned about.

[maxkatz]

I'm not familiar with the jQuery plug-in you used.

[Barbara]

Actually it's just some css and jquery as so

CSS

span.stars, span.stars span {
display: block;
background: url(http://webrecipemanager.com/wrm_app/i...) 0 0 repeat-x;
width: 80px;
height: 16px;
}

span.stars span {
background-position: 0 -16px;
}

Javascript

$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
$('p').html(''+parseFloat($('input[name=amount]').val())+'');
$('span.stars').stars();