First let me say that I am new to this site and love what I see so far. I believe I will learn a lot from you and thanks for all your hard work!
I added this great script to my html page once and it worked fine until I tried to add it more than once on the same page then the default checked rating that I set for each recipe disappears.
It goes back to the regular color of gray for all of them. When I hover and click the color changes but when I refresh it returns to gray.
I have a page with 21 different recipes on it and I want a different default rating for each one.
What am I missing?
PS: I am somewhere between newbie and intermediate in my coding skills.
did you make sure you used a different 'name' for each rating? You should not copy/paste the code and keep the same name. Check my codepen and you will notice that each group has a different name
First let me say that I am new to this site and love what I see so far. I believe I will learn a lot from you and thanks for all your hard work!
I added this great script to my html page once and it worked fine until I tried to add it more than once on the same page then the default checked rating that I set for each recipe disappears.
It goes back to the regular color of gray for all of them. When I hover and click the color changes but when I refresh it returns to gray.
I have a page with 21 different recipes on it and I want a different default rating for each one.
What am I missing?
PS: I am somewhere between newbie and intermediate in my coding skills.
did you make sure you used a different 'name' for each rating? You should not copy/paste the code and keep the same name. Check my codepen and you will notice that each group has a different name
Thank you that was the problem. I also had to move the word checked to the appropriate value instead of the default 3 value.
Thanks again for your support!
I am now trying to add a number to the right of the stars to indicate total number of voters.
I have tried using a span element after the star div but it doesn't line up properly with the star ratings.
From what I gather I cannot use margin or padding with a span element which is what I tried (span.ratingTotal{padding:0 0 5px 10px;}).
I also tried just placing the text inside the star div before the i tags and after them but that didn't work either.
The only thing I tried that seems to work is to use a p class tag and place it under the star ratings but I prefer to have it inline with them.
Is there a way to do this?
try like this: jsfiddle.net/ktpn8oq7/
Wow, thanks very much.
I had tried something similar but didn't make the same css changes as you.
I am trying to understand your css better as it is a little more advanced than I am used to.
I had decided to go with the p class but will now undo everything and try your solution.
Thanks again!