Gossamer Forum: Products: Gossamer Links: Development, Plugins and Globals: Cool "rate" system...

Oct 21, 2005, 8:18 AM

Andy

Veteran / Moderator (17297 posts)

Oct 21, 2005, 8:18 AM

Post #1 of 7

Shortcut

Cool "rate" system...

Hi,

Just thought I'd share this link =)

http://komodomedia.com/...tar-rater-using-css/

Demo: http://komodomedia.com/.../samples/ratings.htm

It would need a bit of work to go via rate.cgi, but not much (just make it called rate.cgi?ID=<%ID%>;Rating=x [not 100% sure on the last part, but you will be able to detemine this by looking in rate.html]).

Just thought I'd pass the link on, for those of you who are interested in making your "rate" pages a bit prettier (and less clicks, if put directly on the link/detailed page).

Enjoy!

Cheers

Andy (mod)
andy@ultranerds.co.uk

IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates

Oct 21, 2005, 6:57 PM

Jag

Enthusiast (648 posts)

Oct 21, 2005, 6:57 PM

Post #2 of 7

Shortcut

Re: [Andy] Cool "rate" system... In reply to

Hi,

Great minds think alike, they say : http://www.gossamer-threads.com/...i?post=285186#285186

I was wondering when you arrive to it from the right, and mouse over the last star whether people may get the impression that the mouseover system that lights up when you go over it is intended to just lead you to a page where you can vote and not vote directly.

Maybe a confirmation page would be good to say : You've decided to vote for this link and give it five out of five, please confirm to be user friendly ?
Maybe even underneath the same code again to let people change there vote.

Anyway it is a pretty nice system !

John
Significant Media

Oct 22, 2005, 1:33 AM

Andy

Veteran / Moderator (17297 posts)

Oct 22, 2005, 1:33 AM

Post #3 of 7

Shortcut

Re: [Jag] Cool "rate" system... In reply to

Hi,

<G>

Ok, heres a little tutorial on how to do it (assuming your using luna, or similar);

1) Open up luna.css, and add;

Code:

/*             styles for the star rater                */ 
.star-rating{ 
	list-style:none; 
	margin: 0px; 
	padding:0px; 
	width: 100px; 
	height: 20px; 
	position: relative; 
	background: url(./images/star_rating.gif) top left repeat-x;		 
} 
.star-rating li{ 
	padding:0px; 
	margin:0px; 
	/*\*/ 
	float: left; 
	/* */ 
} 
.star-rating li a{ 
	display:block; 
	width:20px; 
	height: 20px; 
	text-decoration: none; 
	text-indent: -9000px; 
	z-index: 20; 
	position: absolute; 
	padding: 0px; 
} 
.star-rating li a:hover{ 
	background: url(./images/star_rating.gif) left bottom; 
	z-index: 1; 
	left: 0px; 
} 
.star-rating a.one-star{ 
	left: 0px; 
} 
.star-rating a.one-star:hover{ 
	width:20px; 
} 
.star-rating a.two-stars{ 
	left:20px; 
} 
.star-rating a.two-stars:hover{ 
	width: 40px; 
} 
.star-rating a.three-stars:hover{ 
	width: 60px; 
} 
.star-rating a.three-stars{ 
	left: 40px; 
} 
.star-rating a.four-stars{ 
	left: 60px; 
}	 
.star-rating a.four-stars:hover{ 
	width: 80px; 
} 
.star-rating a.five-stars{ 
	left: 80px; 
} 
.star-rating a.five-stars:hover{ 
	width: 100px; 
}

Then in link.html (or detailed.html, wherever you want the rating code to show), add;

Code:
    <ul class='star-rating'> 
     <li><a href='#' onclick="javascript: do_confirm(2,1,<%ID%>);" title='Rate this 1 star out of 5' class='one-star'>1</a></li> 
     <li><a href='#' onclick="javascript: do_confirm(4,2,<%ID%>);" title='Rate this 2 stars out of 5' class='two-stars'>2</a></li> 
     <li><a href='#' onclick="javascript: do_confirm(6,3,<%ID%>);" title='Rate this 3 stars out of 5' class='three-stars'>3</a></li> 
     <li><a href='#' onclick="javascript: do_confirm(8,4,<%ID%>);" title='Rate this 4 stars out of 5' class='four-stars'>4</a></li> 
     <li><a href='#' onclick="javascript: do_confirm(10,5,<%ID%>);" title='Rate this 5 stars out of 5' class='five-stars'>5</a></li> 
    </ul>

...and then at the top of the category.html, add this little bit of javascript code;

Code:
<script> 
  function do_confirm(Rating,Star,LID) { 
     if (confirm('Are you sure you want to rate this link a ' + Star + ' star rating?')) window.location = "<%db_cgi_url%>/rate.cgi?ID=" + LID + ";rate=" + Rating; 
  } 
</script>

And last but not least, upload the attached image to /static/luna/.

That should be it Cool

Enjoy!

Cheers

Andy (mod)
andy@ultranerds.co.uk

Oct 22, 2005, 12:27 PM

erichcyber

User (211 posts)

Oct 22, 2005, 12:27 PM

Post #4 of 7

Shortcut

Re: [Andy] Cool "rate" system... In reply to

Hi Andy,

great that you picked this up and went through this CSS-star-rating; I do have some questions though:

1)
I would like to run this through "rate.cgi". When I am looking at the default G-Links rating-system, I can chosse rating from 1 to 10. With this CSS-star-rating I can choose rating from 1 to 5 (stars). How to change this to "1 to 5" ? Is there a need to change some code in the system ?

2)
Do you know how to implement the "CSS-star-rating" into a "Rating Box" ? So that link-owners can easily put this "Rating-Box" on their own website.
The CSS-code should be included in the code. The CSS should not be in a separate .css-file (because people might not know how to include a separate .css-file into their website).

Similar to the "Rating-Box" on the following website, but probably with something like this: "please rate our website" (which actually shows the CSS-stars).
By clicking on the CSS-stars, it forwards to the log-in-screen of the "G-Links search-engine" and if somebody registers or is logging in, he will be forwarded to the link he wants to give a rating on.

http://www.aspin.com/...p;id=4047210&rid

Again, many thanks !

Erich

Last edited by:

erichcyber: Oct 22, 2005, 12:42 PM

Oct 23, 2005, 3:52 AM

Andy

Veteran / Moderator (17297 posts)

Oct 23, 2005, 3:52 AM

Post #5 of 7

Shortcut

Re: [erichcyber] Cool "rate" system... In reply to

Hi,

Quote:

With this CSS-star-rating I can choose rating from 1 to 5 (stars). How to change this to "1 to 5" ? Is there a need to change some code in the system ?

You don't need to change anything else =)

1 Star = normal rating of 2
2 Star = normal rating of 4
3 Star = normal rating of 6
4 Star = normal rating of 8
5 Star = normal rating of 10

Quote:

2)
Do you know how to implement the "CSS-star-rating" into a "Rating Box" ? So that link-owners can easily put this "Rating-Box" on their own website.
The CSS-code should be included in the code. The CSS should not be in a separate .css-file (because people might not know how to include a separate .css-file into their website).

Afraid thats a pretty big job in itself ;) This was aimed at simply providing a tutorial on how to get it on your site Angelic

Cheers

Andy (mod)
andy@ultranerds.co.uk

Oct 24, 2005, 2:55 PM

Jag

Enthusiast (648 posts)

Oct 24, 2005, 2:55 PM

Post #6 of 7

Shortcut

Re: [erichcyber] Cool "rate" system... In reply to

In Reply To:

The CSS should not be in a separate .css-file (because people might not know how to include a separate .css-file into their website).

You wouldn't necessarily need to have them include a CSS file or add CSS to their own CSS file you could just link to your own "mini" css file that only contains the above code that Andy has kindly modified to Links users needs.

CSS allows you to reference a style sheet that isn't on your server, so your users can also reference on their web pages the mini style sheet on your web site. You would obviously have to make sure that your CSS code doesn't come in conflict with theirs and vice versa since you will be combining CSS stylesheets (and or CSS styles) in some cases...

Note : the last references CSS stylesheet takes precedence over any previous stylesheets

This is how some of the new html type emails work by using an externally referenced stylesheet to display the page.

Ref : http://www.w3.org/.../present/styles.html

Hope that helps you with a simplified version of what you're looking for...

Thanks,

John
Significant Media

Dec 6, 2006, 1:11 PM

Evoir

Enthusiast (518 posts)

Dec 6, 2006, 1:11 PM

Post #7 of 7

Shortcut

Re: [Jag] Cool "rate" system... In reply to

Hi, the css star system works just great for the actual rating part, but it does not display the current rating (or am I missing something? Basically, I'd like to use this very same CSS code but use it to actually display the current rating as well. Is this possible? YouTube does it where there is just 1 color used, and when you arrive on the page, the stars are at, say 3 stars. Then when you hover over them, they increase as you hover towards the right. Then you click and shazam, you have voted. (ruby on rails?) Netflix uses a 2 color system Red being a system color and Yellow being a user color. So, when you land on the page, there are 3 stars in Red. They hover as Yellow and once clicked -- they turn Yellow permanently, indicating you have already voted.

As a standard in Luna, the template uses this to display the current rating:

Code:
<%~if Votes%>     
    <%~set intRating = $Rating i/ 1%>     
    <img src="<%Links::Utils::image_url("stars-10-${intRating}.gif")%>" alt="<%intRating%> out of 10 stars" title="<%intRating%> out of 10 stars" /> (<%Votes%> vote<%if Votes != 1%>s<%endif%>)     
  <%~endif%>    

And I'd like to use the new fabu stars that Eliot supplied (in an above post):

<ul class='star-rating'>
<li><a href='#' onclick="javascript: do_confirm(2,1,<%ID%>);" title='Rate this 1 star out of 5' class='one-star'>1</a></li>
<li><a href='#' onclick="javascript: do_confirm(4,2,<%ID%>);" title='Rate this 2 stars out of 5' class='two-stars'>2</a></li>
<li><a href='#' onclick="javascript: do_confirm(6,3,<%ID%>);" title='Rate this 3 stars out of 5' class='three-stars'>3</a></li>
<li><a href='#' onclick="javascript: do_confirm(8,4,<%ID%>);" title='Rate this 4 stars out of 5' class='four-stars'>4</a></li>
<li><a href='#' onclick="javascript: do_confirm(10,5,<%ID%>);" title='Rate this 5 stars out of 5' class='five-stars'>5</a></li>
</ul>[/code]

Or something like it. It could work with either the Netflix or the YouTube model. Has anyone done this before?

Last edited by:

Evoir: Dec 6, 2006, 2:03 PM

Cool "rate" system...

Attached Files:

Last edited by:

Last edited by: