Super Custom Rating Stars Tutorial

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Super Custom Rating Stars Tutorial

Postby Asj » January 4th, 2010, 7:42 pm

For people who want to understand and create unique rating stars. Difficulty level: intermediate/high
The rating stars for the Smackjeeves comic layouts are actually very versatile. I haven't seen much about customizing Rating Stars and thought I'd say something about it. If this turns out good enough, it might go on the Smackjeeves Wikipedia.
But, I need some people to help me out! T_T
It'd be really nice if you can tell me if you don't understand something. You can also request types of rating stars, so I'll have some examples and explanations that people actually want (and you get some code to use for your comic).

This first post will just go over a few rules, and the default rating star code. I'll have more posts for modifying the code and examples.


Rules and Shortcomings

The Smackjeeves TOS sets these rules:

Do not tamper with the ratings system in any way that would give your comic an unfair advantage over the other comics on Smack Jeeves. Examples of tampering with the ratings system include, but are not limited to:
•Creating new user accounts to vote on your comic with
•Manipulating the ratings code so that when people click on one rating (say a 3) a different one actually comes up (say a 5)
•Manipulating the ratings code so that not all of the ratings (1 through 5) are available to be clicked on (this does not apply to people who removed ratings from their comic altogether)
Tampering with the ratings system is a good way to have your ratings deleted and/or your comic deleted and/or your account banned. All punishments are up to the sole discretion of the Smack Jeeves administration.

I won't tell anyone how to do those things. In addition, here's a few other things that this tutorial won't go over:
(I may add to this list later)

-I won’t tell how to make rating stars change position on the page when you hover over them (although I'm not sure why you would want to do that).
-I won't tell how to change the actual voting system (this because I think it'd be against the rules, and also, you probably can't change much anyhow)


Default Code Walkthrough

http://smackjeeves.com/oldforum/viewtop ... 486#237486
Also see this link. It’s not very detailed, but there’s some useful stuff.

I’ve been using a slight modification of Top Banner V2, so I’m going to use the code from that. I think the code for the rating stars is very similar for different templates, but if there's any major differences, let me know and I’ll add code from more layouts.

Before I begin talking about modifying things, here's a little about the code for the rating stars. I'll go through the code from the beginning to the ending (the spoilers are just to make things easier to find).

How to find your rating star code:
Spoiler! :
This code is found in the “Comic Page” template.
How to get to your "Comic Page" template (starting at the Smackjeeves home page):
There are several ways of doing this, but the easiest is to click on the little arrow beside the "My Webcomics" tab, then select the comic name from the dropdown menu.
Image
Now at the management page, go to “Page Design / Appearance” - you could either scroll down to it, or select it from the “Jump To:” dropdown menu at the top.
And finally, go to “Comic Page”
The script:
Spoiler! :
Code: Select all
<script language="JavaScript" type="text/javascript">

This is an opening script tag. All the rating star stuff is between this opening tag, and an ending script tag </script>. What are html tags? (important to know): http://wiki.smackjeeves.com/index.php/T ... s_it_do.3F
This opening tag says that the following is JavaScript. That’s the language which the rating star code is written in. I think the rating star script is always at the top of the comic template.
dir and selected/unselected images (defining variables and what the images are):
Spoiler! :
Code: Select all
var dir = "http://www.smackjeeves.com/templates/default/images/";
var pic_unselected = "star-unselected.gif";
var pic_selected = "star-selected.gif";

These three lines create three variables (var is short for "variable"). A variable is like a nickname (it can also be like a container, something you store things in).
The first variable is dir. dir is short for "directory", and usually holds most of the url for the rating stars. dir is useful when all the rating star images are located at the same place on the web (but it's not necessary). A dir url should always end with a /. The other two variables are for the image names. They should always end with .gif, .jpg, .png, or some other image extension. It may help to think of it this way: dir is the website folder you're storing your files on, and the other two variables are the files you're storing. When you put dir and either of the other two variables together, it makes a complete url. The whole url for star-selected.gif is http://www.smackjeeves.com/templates/de ... lected.gif
Image
When using your own rating star images, you can make the dir variable empty (written like this: var dir=""; ) and the other two variables include the whole image urls. This needs to be done when the images are located at different places on the web.

The lower two variables need a little more explanation. One is pic_unselected, which is the image seen (repeated five times) on a comic page when the mouse cursor isn't close by. When the mouse cursor is hovering over a particular star, that star and the stars to the left of it are each the pic_selected image.
Image
There's only two images in the default code, but you can have many more images. I have 14 images for one of my comics. I'll later explain how to add more images and why.
the default_rating variable and “Comic Page Loops & Switches”:
Spoiler! :
Code: Select all
<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
<!-- END switch_user_hasnt_voted -->

Does this look a little confusing? Well, what about the code below?

Code: Select all
var default_rating = {switch_user_has_voted.RATING};
var default_rating = 0;

The stuff with those greater than/less than symbols and dashes makes it harder to see what's happening for the moment (but don't delete those from your code).
So, here’s two more variables being created. But they’re both named default_rating! In truth, only one default_rating is created. Which one depends on the situation. Both versions of default_rating is surrounded by matching BEGIN and END switch tags (look at the original code posted above). These are like light switches. When a switch isn't turned on, nothing inside is visible. Right now, the code just states what to do if there's a situation in the future that causes a switch to be flipped on.
<!--BEGIN switch_user_has_voted --> means, "has the user voted? If so, turn on this switch." If the user has voted, that switch is turned on and the line of code inside becomes visible.
{switch_user_has_voted.RATING} is a constant (a constant is a variable that is already equal to something, and you can't change it. Constants are written in all capital letters) that can only be used within the user_has_voted switch.
Remember this: people can vote on a comic page by clicking a rating star. When a person votes, they assign a rating to the comic page, which is a number between 1 and 5.
Let's say that a person views a comic page. If the person has voted for the comic page (switch_user_has_voted), the default_rating is set to the person's rating (the user RATING). Else, if the person has not yet voted (switch_user_hasnt_voted), the default_rating is set to 0 (a person can only rate a page between 1 and 5. So, zero is an impossible rating, symbolizing that they haven’t assigned a rating for the comic page).

If you look at those lines I hid from view, you’ll see that those, and {switch_user_has_voted.RATING}, are all in the “Comic Page Loops & Switches” section, which you can show or hide, and which is located above the template code. These sections are there to make stuff easier, and you might find something interesting in one of them.
Image
build_vote function part 1 (sets up the rating stars, going to talk about the for loop and if block):
Spoiler! :
Code: Select all
function build_vote()
{
document.write('Rate it: ');
for (n = 1; n<= 5; n++)
{
if (n <= default_rating)
{
default_pic = pic_selected;
} else {
default_pic = pic_unselected;
}
...

This function (named ‘build_vote’) determines which images to show where and get them to show up on the page correctly, when the rater first goes to the page. This is before the rater hovers over the rating stars, but the rater could have voted in the past and came back to the page.
A function is a grouping of lines of code. Knowing exactly what a function is and how it works isn't necessary for knowing how the rating star code works.
The for loop is there because there’s five rating stars. The code within the for loop is done for each rating star, numbered 1 through 5 (through the variable ‘n’). for (n = 1; n<= 5; n++) means, do the following code, beginning at 1 (n=1), while n is less than or equal to 5 (stop repeating the code after n is greater than 5), and increase n by 1 each time through. I wouldn’t suggest changing anything between those parentheses in your code.
The if block (within the body of the for loop) checks to see if the current star (n) is less than or equal to default_rating (the rating which the rater has previously given the page - see the short discussion of the default_rating variable). The condition of the if block (the part in parentheses after the word ‘if’) can be modified (and so can the body of the if block, to better match the new condition). Don’t change the code unless you know what you’re doing. And if you change anything here, you probably also need to change the function ‘rateover’ as well (which will be mentioned later).
The default code makes all the stars up to default_rating selected, and all the stars below unselected (if n is less than or equal to default_rating, the nth star is selected, else it’s unselected).
default_pic is just a holding variable (it is set equal to what pic_selected/unselected was set equal to). It’s used later in this function (to see the rest of the for loop and the end of the function, see “build_vote function part 2”).
build_vote function part 2 (writing html tags for the linked rating star images):
Spoiler! :
Code: Select all
...
document.write('<a href="#" onclick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '" style="border:0px;" /></a>&nbsp;');
}
document.write('');
}

This part of the code continues the for loop within the build_vote function and actually gets the rating stars on the page.
The tags within that ‘.write’ are html, but it’s written with javascript. Because the .write is within the for loop, this code is done for each rating star (the values of n from 1 to 5). If you don't know what a tag is, please look at this: http://wiki.smackjeeves.com/index.php/T ... s_it_do.3F
The first html tag is setting up links for the rating stars. If the rater clicks on a star, the vote function is called, and if the rater either hovers over a star or removes the mouse from a star, the rateover function is called.
The img tag, between the opening and ending link tags, puts the star images on the page. Within the img tag, src is set equal to the address of the rating stars (see the discussion on the dir variable, and the last thing said on part one of this function, about default_pic). Each rating star is also given a name (star_1, star_2, etc) so they can be found easily later on. The style is set to have no border (the border is 0 pixels in length for each image). The img tag ends after the style ( /> ), and then there’s the ending link tag ( </a> ). Next is the html code for a space ( &nbsp; ). It’s only there to put a little room between the rating stars, and you can delete it or have other stuff between the stars if you like (that’s the only thing here that you can safely change). After the space, ') signals the end of the .write, } signals the end of the for loop, there’s another .write that writes nothing (some layouts do write something. If you put something between the apostrophes, it will place it right after the rating stars), and after that is the ending brace of the function.
the rateover function (its dual roles and da_code variable):
Spoiler! :
Code: Select all
function rateover(star_num)
{

for (n = 1; n <= 5; n++)
{
if (n <= star_num)
{
da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
} else {
da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
}

eval(da_code);
}
}

The function rateover takes in a parameter ‘star_num’. A parameter is a variable that is set equal to something from a different function (in this case, the value of star_num comes from the build_vote function).
Code: Select all
document.write('<a href="#" onclick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);">

This is from the second part of build_vote. When the rater hovers over a star, n is passed into rateover and is renamed star_num. When the rater moves the mouse away from a star, default_rating is passed into rateover and renamed star_num. This means that the rateover function does two different things: show the rating stars when the rater is hovering over them, and act as build_vote (or part of it) when the rater moves the mouse away from them. These two, sometimes unrelated, roles of rateover is important to keep in mind when modifying the code. It’s also important to remember that both build_vote and rateover control what the rating stars look like when the rater isn’t hovering over them.
Within this function, there is a for loop that contains an if block, like in build_vote. It does almost the same thing, but goes about it in a different way.
There is a variable called da_code that is set equal to something. In the case of n=3, ‘document.star_’ + n is saying, within this document, there’s something called star_3 - find it and put it here. Since this is within a for loop, the stars from 1 to 5 are found. The .src part is replacing the rating stars images. It’s important that the code is a little different than the html tags within the build_vote function. If you replace this code with something more similar to what’s in build_vote, then every time the rater hovers over a rating star, five more stars will show up on the screen. The difference is that, rateover is reusing the stars that build_vote put on the screen. First, it finds the star, and then it changes the address of the image.
After the if block, but within the for loop, there is a call to a function named eval, and da_code is passed into it as a parameter. This function isn’t actually in the template, and what it does, and how it does it, isn’t important. However, if eval isn’t called, da_code would just be a bunch of letters, like what I’m writing right now. So, my explanation of da_code isn’t quite accurate. eval is what makes it work.
the vote function (making a pop-up window):
Spoiler! :
Code: Select all
function vote(rating)
{
var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
new_window.focus();
}

This is the last function before the ending script tag. This function is called within the build_vote function with this: onclick="vote(' + n + ')
So, when someone clicks on one of the rating stars, vote is called, and n (a number between 1 and 5) is passed into vote as ‘rating’. So, rating is just another name for n.
The body of this function isn’t too hard to follow. It opens a new window, with the dimensions 300x400. There’s some code that I don’t think you should change, but it should be safe to change the height and width (just that, it might be annoying to have a huge window pop up, or one too small to see everything in it).
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Re: Super Custom Rating Stars Tutorial

Postby leadzumba » February 18th, 2011, 7:44 am

Actually. I don't understand what is the totally concept on how to create a rating stars. But I want to try. I really confuse it. :roll: Hopefully I will get to understand the whole concept.
leadzumba
 

Re: Super Custom Rating Stars Tutorial

Postby thrashmodule » March 28th, 2012, 10:15 am

Thank you for this one step closer to not looking so ordinary! :D
Image
User avatar
thrashmodule
 
Posts: 4
Joined: March 16th, 2012, 9:20 am

Re: Super Custom Rating Stars Tutorial

Postby SoupCandy » April 9th, 2012, 12:17 pm

I'm curious. Has anyone been able to give a separate image for each of the five stars?
/threadkiller
SoupCandy
 
Posts: 36
Joined: June 29th, 2011, 7:23 pm

Re: Super Custom Rating Stars Tutorial

Postby Asj » April 9th, 2012, 12:35 pm

sure. ^_^
I was going to mention a bunch of stuff, but I haven't gotten around to it yet. ^_^"
Where you have the rating star variables...
Code: Select all
var pic_unselected = ... ;
var pic_selected = ... ;

make the variables an array. Then you can have up to five different images for each one (or ten images altogether, five for unselected, five for selected - you could also have five for a roll-over variable, if you wanted one, but that would make up to 15 total). Like this:
Code: Select all
var pic_unselected = new Array();
pic_unselected[0] = "S1.jpg";
pic_unselected[1] = "S2.jpg";
pic_unselected[2] = "S3.jpg";
pic_unselected[3] = "S4.jpg";
pic_unselected[4] = "S5.jpg";

var pic_selected = new Array();
pic_selected[0] = "C1.jpg";
pic_selected[1] = "C2.jpg";
pic_selected[2] = "C3.jpg";
pic_selected[3] = "C4.jpg";
pic_selected[4] = "C5.jpg";

But you also need to edit all instances of "pic_unselected" and "pic_selected" to include index values, like, "pic_unselected[i]" where i would be a variable that goes from 0 to 4. It's not to complicated, but I want to explain it better sometime...
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Re: Super Custom Rating Stars Tutorial

Postby SoupCandy » April 9th, 2012, 4:28 pm

:?

I couldn't get this to work at all. It initially worked, albeit as a bulleted list, oddly. The second I added the section you just posted, it all went to hell. Everything shows up as photobucket's "picture does not exist" image. I tried using the version without the additional 4, and it worked until I put it into its own div element (and then the entire voting function disappeared). I'm clearly doing something wrong...

I'm trying to use the following images:
(Unselected)
http://i1091.photobucket.com/albums/i38 ... star11.png
http://i1091.photobucket.com/albums/i38 ... star21.png
http://i1091.photobucket.com/albums/i38 ... star31.png
http://i1091.photobucket.com/albums/i38 ... star41.png
http://i1091.photobucket.com/albums/i38 ... star51.png
(Selected)
http://i1091.photobucket.com/albums/i38 ... /star1.png
http://i1091.photobucket.com/albums/i38 ... /star2.png
http://i1091.photobucket.com/albums/i38 ... /star3.png
http://i1091.photobucket.com/albums/i38 ... /star4.png
http://i1091.photobucket.com/albums/i38 ... /star5.png

Code: Select all

<div align="center" style="width: 400px; background: #323A42; margin: 5px auto; padding: 2px;"><font color="#1b252e" size="2">

<script language="JavaScript" type="text/javascript"> var dir = "";
var pic_unselected = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/star11.png";
var pic_selected = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/star1.png";

    <!-- BEGIN switch_user_has_voted -->
    var default_rating = {switch_user_has_voted.RATING};
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar

%20SSR/ratedyours.png";
    <!-- END switch_user_has_voted -->
    <!-- BEGIN switch_user_hasnt_voted -->
    var default_rating = 0;
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar

%20SSR/ratepage.png";
    <!-- END switch_user_hasnt_voted -->

    function build_vote()
    {
    document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
    for (n = 1; n<= 5; n++)
    {
    if (n <= default_rating)
    {
    default_pic = pic_selected;
    } else {
    default_pic = pic_unselected;
    }

    document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover

(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '"

name="star_' + n + '"></a></li>');
    }
    document.write('</ul>');
    }

    function rateover(star_num)
    {

    for (n = 1; n <= 5; n++)
    {
    if (n <= star_num)
    {
    da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
    } else {
    da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
    }

    eval(da_code);
    }
    }

    function vote(rating)
    {
    var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic",

"height=300, width=400");
    new_window.focus();
    }

    </script>

    <div id="rating">
    <img src="http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/rateaverage.png"

alt="Average Rating:"> {AVERAGE_RATING}
    </div>
    <div id="rate">
    <script language="JavaScript">build_vote();</script>
</div>

</font>   </div>
SoupCandy
 
Posts: 36
Joined: June 29th, 2011, 7:23 pm

Re: Super Custom Rating Stars Tutorial

Postby Asj » April 9th, 2012, 7:13 pm

First of all, when I copied that and inserted it into a comic, it didn't work because it had some enters/line breaks in there. If you're using Notepad or something, make sure word wrap is turned off, in case that's the problem (sometimes word wrap can get confused and add enters where there aren't supposed to be any).
The bulleted list is there because that's the style of your rating stars. It's more correct to have them as a list, actually, but for that type of rating stars, you have to add some css to make it display differently.

see if this works. I deleted the enters I found. I'll give some more information later.
Code: Select all
<div align="center" style="width: 400px; background: #323A42; margin: 5px auto; padding: 2px;"><font color="#1b252e" size="2">

<script language="JavaScript" type="text/javascript"> var dir = "";
var pic_unselected = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/star11.png";
var pic_selected = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/star1.png";

    <!-- BEGIN switch_user_has_voted -->
    var default_rating = {switch_user_has_voted.RATING};
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/ratedyours.png";
    <!-- END switch_user_has_voted -->
    <!-- BEGIN switch_user_hasnt_voted -->
    var default_rating = 0;
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/ratepage.png";
    <!-- END switch_user_hasnt_voted -->

    function build_vote()
    {
    document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
    for (n = 1; n<= 5; n++)
    {
    if (n <= default_rating)
    {
    default_pic = pic_selected;
    } else {
    default_pic = pic_unselected;
    }

    document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');
    }
    document.write('</ul>');
    }

    function rateover(star_num)
    {

    for (n = 1; n <= 5; n++)
    {
    if (n <= star_num)
    {
    da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
    } else {
    da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
    }

    eval(da_code);
    }
    }

    function vote(rating)
    {
    var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
    new_window.focus();
    }

    </script>

    <div id="rating">
    <img src="http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/rateaverage.png" alt="Average Rating:"> {AVERAGE_RATING}
    </div>
    <div id="rate">
    <script language="JavaScript">build_vote();</script>
</div>

</font>   </div>


Oh, what did you have to begin with? If it didn't show up as a bulleted list before...

Edit:
Okay, so, I'm not sure how you messed up when you tried it earlier, but it's probably because I didn't go into detail about adding the array indices for later in the code (if you don't add that in, the code will be looking for the original type of rating star, and not find it, and would give the not found images). I'll show you what to put for all those.

So, to get it all working right...
First, I'm going to make the dir variable equal "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/" to make things slightly easier. (I did mention the dir variable in that big first post, by the way, if you're interested.) This way, all you need for the names is "star11.png" and so on.
like this:
Code: Select all
var dir = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/";
var pic_unselected = "star11.png";
var pic_selected = "star1.png";

Next, change the unselected and selected variables into arrays. Like this:
Code: Select all
var pic_unselected = new Array();
pic_unselected[0] = "star11.png";
pic_unselected[1] = "star21.png";
pic_unselected[2] = "star31.png";
pic_unselected[3] = "star41.png";
pic_unselected[4] = "star51.png";

var pic_selected = new Array();
pic_selected[0] = "star1.png";
pic_selected[1] = "star2.png";
pic_selected[2] = "star3.png";
pic_selected[3] = "star4.png";
pic_selected[4] = "star5.png";


This is the part I didn't mention in detail:
You need to find all the times "pic_" shows up in the code (ctrl + f will bring up the find bar - at least in windows and at least for most browsers). Searching for "pic_" will show you every time pic_selected or pic_unselected are mentioned.
It first shows up in the build_vote function.
Spoiler! :
Code: Select all
function build_vote()
    {
    document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
    for (n = 1; n<= 5; n++)
    {
    if (n <= default_rating)
    {
    default_pic = pic_selected;
    } else {
    default_pic = pic_unselected;
    }
You have to add [i ] (or a different letter, depending) to the end of both pic_selected and pic_unselected. But, i has to equal 0 to 4. If you'll notice, there's a for (n=1; n<=5; n++) near the beginning of the function. This means n is 1 to 5. So, one way of doing this is to add [n-1] to the end of those names (n-1 is your i). Like:
Code: Select all
    if (n <= default_rating)
    {
    default_pic = pic_selected[n-1];
    } else {
    default_pic = pic_unselected[n-1];
    }

The next time there's pic_selected and pic_unselected is in the rate_over function. It's the exact same - add [n-1] to the end of both of them.
And... that's it. :D
So the finished code would be this:
Code: Select all
<div align="center" style="width: 400px; background: #323A42; margin: 5px auto; padding: 2px;"><font color="#1b252e" size="2">

<script language="JavaScript" type="text/javascript"> var dir = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/";
var pic_unselected = new Array();
pic_unselected[0] = "star11.png";
pic_unselected[1] = "star21.png";
pic_unselected[2] = "star31.png";
pic_unselected[3] = "star41.png";
pic_unselected[4] = "star51.png";

var pic_selected = new Array();
pic_selected[0] = "star1.png";
pic_selected[1] = "star2.png";
pic_selected[2] = "star3.png";
pic_selected[3] = "star4.png";
pic_selected[4] = "star5.png";


    <!-- BEGIN switch_user_has_voted -->
    var default_rating = {switch_user_has_voted.RATING};
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/ratedyours.png";
    <!-- END switch_user_has_voted -->
    <!-- BEGIN switch_user_hasnt_voted -->
    var default_rating = 0;
    var rate_it_pic = "http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/ratepage.png";
    <!-- END switch_user_hasnt_voted -->

    function build_vote()
    {
    document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
    for (n = 1; n<= 5; n++)
    {
    if (n <= default_rating)
    {
    default_pic = pic_selected[n-1];
    } else {
    default_pic = pic_unselected[n-1];
    }

    document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');
    }
    document.write('</ul>');
    }

    function rateover(star_num)
    {

    for (n = 1; n <= 5; n++)
    {
    if (n <= star_num)
    {
    da_code = 'document.star_' + n + '.src="' + dir + pic_selected[n-1] + '"';
    } else {
    da_code = 'document.star_' + n + '.src="' + dir + pic_unselected[n-1] + '"';
    }

    eval(da_code);
    }
    }

    function vote(rating)
    {
    var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
    new_window.focus();
    }

    </script>

    <div id="rating">
    <img src="http://i1091.photobucket.com/albums/i385/swisschard/Lunar%20SSR/rateaverage.png" alt="Average Rating:"> {AVERAGE_RATING}
    </div>
    <div id="rate">
    <script language="JavaScript">build_vote();</script>
</div>

</font>   </div>

It still will show the bulleted list, though. The key to fixing that is this line:
Code: Select all
    document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');

<ul> is the beginning of a bulleted list. You need to have some css elsewhere that tells it to display as not a list. Change <ul> to <ul class="ratingstarlist">
Go to your overall layout template. I think you have this there?
Spoiler! :
Code: Select all
<style>

   @import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");

   div.post
   {
      padding: 1em;
      margin: .5em;
      border-style:none;
      background: #3d454d;
   }
   .date-header
   {
      margin: .2em 0 .8em;
   }

</style>

If so, add this right before </style>:
Code: Select all
   .ratingstarlist{

   margin:0;

   padding:0;

   list-style:none;

   }

See if that fixes everything.

My goal for this thread was to explain this type of thing so it'd be easy to do, but I'm not very good at explaining things, so it's easier to just do it for people. >_>"
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Re: Super Custom Rating Stars Tutorial

Postby SoupCandy » April 9th, 2012, 9:52 pm

I didn't even notice the list tags. It works now.

Thanks! You are all sorts of magic.
/threadkiller
SoupCandy
 
Posts: 36
Joined: June 29th, 2011, 7:23 pm

Re: Super Custom Rating Stars Tutorial

Postby xirux-nefer » January 20th, 2013, 7:06 am

Hello,
I am working on a template, and I want to move the rating script from the document head to an external file, in order to call it from the head like this:

Code: Select all
<head>
bla bla bla
...
<script type="text/javascript" src=http://mywebhost/ratingscript.js></script>
</head>


which is cleaner and better designed and gives better web performance than just writing everything in the head. But when I do that, there is some problem with the variable {COMIC_ID}. When I click on the rating stars, the litle window is opened, but it says that "the ID is wrong" or something like that.

Is there a way to make the javascript code work when calling it from an external file?
xirux-nefer
 
Posts: 3
Joined: August 15th, 2012, 6:05 am

Re: Super Custom Rating Stars Tutorial

Postby eishiya » January 20th, 2013, 9:07 am

xirux-nefer wrote:Hello,
I am working on a template, and I want to move the rating script from the document head to an external file, in order to call it from the head like this:

Code: Select all
<head>
bla bla bla
...
<script type="text/javascript" src=http://mywebhost/ratingscript.js></script>
</head>


which is cleaner and better designed and gives better web performance than just writing everything in the head. But when I do that, there is some problem with the variable {COMIC_ID}. When I click on the rating stars, the litle window is opened, but it says that "the ID is wrong" or something like that.

Is there a way to make the javascript code work when calling it from an external file?

If you can't code, then no, there's no way.
If you know how to code in JavaScript or a server-side scripting language your webhost supports: Have your ratingsscript.js take a parameter and use it wherever the COMIC_ID is needed, and call the script as "http://mywebhost/ratingscript.js?parametername={COMIC_ID}". This is so that the script knows what page is being rated. However, this solution will require putting the script into the Comic Page layout (so that {COMID_ID} can be used to pass the parameter), outside of Overall layout, which breaks the nice little "scripts go in <head>" structure you're trying to have.

I respect the HTML standards as much as you do, but unfortunately many real-world applications require that they be broken. SJ's template system is one of those applications. There are ways to make it conform to the standards, but they would make the system clunkier to use and create more problems than they would solve.
Image
User avatar
eishiya
 
Posts: 9366
Joined: December 5th, 2009, 11:17 am

Re: Super Custom Rating Stars Tutorial

Postby yainuwan » July 2nd, 2013, 1:58 am

Thank you. :D :D :D
yainuwan
 
Posts: 2
Joined: July 1st, 2013, 7:57 am

Re: Super Custom Rating Stars Tutorial

Postby reddog_f13 » July 6th, 2015, 7:17 am

have no idea where to post this, so iam posting here. DX

ive been having issues with the rating stars. no matter what i do the icons will not change. i am using the in silence template and i had to re-add the whole rating script. but even when i start from scratch with ALL the codeing these houses stay as the rating stars. when i DO manage to remove them and change the stars to my images, they wont highlight to the next image. they stay one or the other without change when hovering over. :x

i am highly suspicious that the code, or at least some, is not even in the comic page section. :evil:

i also have no idea what i am doing with code. i am just taking guesses. :?:
Image please check out my comic. =]
User avatar
reddog_f13
 
Posts: 22
Joined: April 13th, 2014, 2:36 am

Re: Super Custom Rating Stars Tutorial

Postby eishiya » July 6th, 2015, 7:34 am

reddog_f13 wrote:have no idea where to post this, so iam posting here. DX

ive been having issues with the rating stars. no matter what i do the icons will not change. i am using the in silence template and i had to re-add the whole rating script. but even when i start from scratch with ALL the codeing these houses stay as the rating stars. when i DO manage to remove them and change the stars to my images, they wont highlight to the next image. they stay one or the other without change when hovering over. :x

i am highly suspicious that the code, or at least some, is not even in the comic page section. :evil:

i also have no idea what i am doing with code. i am just taking guesses. :?:

If you need help, you should post your code or a link to the site where you're having this issue (JavaScript is client-side, so all the code would be available there too). It's impossible to see where your issue is without seeing what you've done. However, I recommend making a new thread instead of posting here, since your problem isn't directly related to the tutorial itself, but rather to the tutorial's subject (rating stars).
Image
User avatar
eishiya
 
Posts: 9366
Joined: December 5th, 2009, 11:17 am

Re: Super Custom Rating Stars Tutorial

Postby reddog_f13 » July 6th, 2015, 7:44 am

never mind, i was able to fix it.
Image please check out my comic. =]
User avatar
reddog_f13
 
Posts: 22
Joined: April 13th, 2014, 2:36 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests