I’m planning on doing something like this: CSS Star Rating instead of the normal select drop down list with 1, 2, 3, 4, 5. My only problem is that the only way I’ve got experience adding this effect is with an unordered list, not a <select> drop down list.
Is it possible to replace the <select> list with an <ul> so that I can style it in this way? If so, how would I go about it so that it doesn’t mess up the functionality of the rating module and still records ratings?
It’s pretty easy. You just need to have a hidden field that you place your rating number in on Javascript events. That’s how we always do it. That way you can use whatever DOM elements you want. Just set the value of your hidden input field.
It’s pretty easy. You just need to have a hidden field that you place your rating number in on Javascript events. That’s how we always do it. That way you can use whatever DOM elements you want. Just set the value of your hidden input field.
mk
hmmm, easy for who Mitchell?
At least I know it’s possible now. I’ll do some research and see if I can figure it out. In my ignorance, I was thinking (hoping) I could just use an <ul> and CSS and do this without any javascript stuff.
fanhub.com is our most recent version of using rating stars to rollover / click select a rating. Just hijack the code from there. It’s nice and tidy jQuery code.
In the default.js file which is included in the fanhub site, as I look at it, it has some other things in there like favorites, page load trigger, etc. Do I only need the rating code or is there anything else in that file I would need for this task?
Also, how does this degrade for people without javascript enabled? Still work?
Non-Javascript people hardly exist anymore. Poor souls. So no, it does not degrade. You’d want to detect the non-javascript folks and give them a simple select field.
The only thing you should need from the file is the rating script and the supporting functions in it. Just search for the word rating in the script and grab anything that matches.
You’d want to detect the non-javascript folks and give them a simple select field.
Why is it every time I have a task in which I’m not sure how to accomplish, it leads to another task in which I’m not sure how to accomplish? It’s a never ending cycle! I’ll add this to the list of things to figure out… or I’ll just leave it as is and as Pie-Man says, they should be left in the dark.
I gave this a shot Mitchell and it didn’t work out to well. There is just to much information there for me to go through and try to decipher everything. I tried the whole copy/paste method using your exact code, but nothing at all happened. Oh well.
I’m just not good enough with javascript and stuff like this to know what I’m doing. It might as well be Chinese.
PieMan, tell that other developer friend of ours to help out on this thread. Now that he has such a great new avatar and all. It’s his code that we use afterall.
Well I definitely appreciate that Mitchell and welcome any insight that someone can give me on this.
I could have sworn that I saw a nice little CSS tutorial somewhere or another that told how to style the <select> with stars instead of redoing everything with a <ul> and needing the hidden field. I can’t find it though. :(
Either way, it would be sweet to be able to do this instead of the default <select> input
Came across this today: http://www.unessa.net/en/hoyci/projects/yui-star-rating/#5
I thought it would work, but I keep getting the below error in FireBug which I’m not sure what it’s about. Have you seen this tutorial before or know if it will work with the rating module setup?
rating.ratingform.title.split is not a function init()rating.js (line 25) wrappedFn(load )event-min.js (line 31) [Break on this error] rating.average = rating.ratingform.title.split(/:\s*/)[1].split(".")
Oh really? I was thinking it looked easier. Just copy/paste some code and include some javascript files and you’re on your way. Looks like I was wrong.
PieMan, tell that other developer friend of ours to help out on this thread. Now that he has such a great new avatar and all. It’s his code that we use afterall.
mk
Any luck on getting that other “developer friend” of yours to chime in on this thread?
