Page 1 of 1

Strange image problem

Posted: Fri Sep 21, 2012 2:40 pm
by 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?

Image Image


Strange image problem

Posted: Fri Sep 21, 2012 4:01 pm
by maxkatz

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


Strange image problem

Posted: Fri Sep 21, 2012 4:08 pm
by 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.


Strange image problem

Posted: Fri Sep 21, 2012 4:22 pm
by maxkatz

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


Strange image problem

Posted: Fri Sep 21, 2012 5:01 pm
by 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();