By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,528 Members | 1,324 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,528 IT Pros & Developers. It's quick & easy.

Simple rating Script needs modify - unique path/url attribute automatically

P: 77
Hello,
I found this simple js star rating script that I want to modify slightly.

firstly I want to retain current vote , say 3 stars, untill its changed again.

right now it resets to unvoted on refresh. I know you could use cookies but

I also want to give it a unique identifier so that if i put it in my topic header templet, its unique to each topic (retaining whatever vote for each topic untill changed again) .

perhaps this is not possible without a database. I have no access to my hosts server.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript">
  3. <!--
  4. var set=false;
  5. var v=0;
  6. var a;
  7. function loadStars()
  8. {
  9. star1 = new Image();
  10. star1.src = "http://www.ednasia.com/images/unratedStar.gif";
  11. star2 = new Image();
  12. star2.src= "http://www.geekpedia.com/Samples/Rate/star2.gif";
  13. }
  14.  
  15. function highlight(x)
  16. {
  17. if (set==false)
  18.     {
  19.     y=x*1+1
  20.     switch(x)
  21.         {
  22.         case "1": document.getElementById(x).src= star2.src;
  23.         document.getElementById('vote').innerHTML="one star";
  24.         break;
  25.         case "2":for (i=1;i<y;i++)
  26.         {
  27.         document.getElementById(i).src= star2.src;
  28.         }
  29.         document.getElementById('vote').innerHTML="two stars"
  30.         break;
  31.         case "3":for (i=1;i<y;i++)
  32.         {
  33.         document.getElementById(i).src= star2.src;
  34.         }
  35.         document.getElementById('vote').innerHTML="three stars"
  36.         break;
  37.         case "4":for (i=1;i<y;i++)
  38.         {
  39.         document.getElementById(i).src= star2.src;
  40.         }
  41.         document.getElementById('vote').innerHTML="four stars"
  42.         break;
  43.         case "5":for (i=1;i<y;i++)
  44.         {
  45.         document.getElementById(i).src= star2.src;
  46.         }
  47.         document.getElementById('vote').innerHTML="five stars"
  48.         break;
  49.         }
  50.     }
  51. }
  52. function losehighlight(x)
  53. {
  54. if (set==false)
  55.     {
  56.     for (i=1;i<6;i++)
  57.         {
  58.         document.getElementById(i).src=star1.src;
  59.         document.getElementById('vote').innerHTML=""
  60.         }
  61.     }
  62. }
  63. function setStar(x)
  64. {
  65. y=x*1+1
  66. if (set==false)
  67.     {
  68.     switch(x)
  69.         {
  70.         case "1": a="1" 
  71.         flash(a);
  72.         break;
  73.         case "2": a="2" 
  74.         flash(a);
  75.         break;
  76.         case "3": a="3" 
  77.         flash(a);
  78.         break;
  79.         case "4":a="4" 
  80.         flash(a);
  81.         break;
  82.         case "5":a="5" 
  83.         flash(a);
  84.         break;
  85.         }
  86.     set=true;
  87.     document.getElementById('vote').innerHTML="Thank you for your vote!"
  88.     }    
  89. }
  90. function flash()
  91. {
  92. y=a*1+1
  93. switch(v)
  94.     {
  95.     case 0:
  96.     for (i=1;i<y;i++)    
  97.         {
  98.         document.getElementById(i).src= star1.src;
  99.         }
  100.     v=1
  101.     setTimeout(flash,200)
  102.     break;
  103.     case 1:    
  104.     for (i=1;i<y;i++)    
  105.         {
  106.         document.getElementById(i).src= star2.src;
  107.         }
  108.     v=2
  109.     setTimeout(flash,200)
  110.     break;
  111.     case 2:
  112.     for (i=1;i<y;i++)    
  113.         {
  114.         document.getElementById(i).src= star1.src;
  115.         }
  116.     v=3
  117.     setTimeout(flash,200)
  118.     break;
  119.     case 3:
  120.     for (i=1;i<y;i++)    
  121.         {
  122.         document.getElementById(i).src= star2.src;
  123.         }
  124.     v=4
  125.     setTimeout(flash,200)
  126.     break;
  127.     case 4:
  128.     for (i=1;i<y;i++)    
  129.         {
  130.         document.getElementById(i).src= star1.src;
  131.         }
  132.     v=5
  133.     setTimeout(flash,200)
  134.     break;
  135.     case 5:
  136.     for (i=1;i<y;i++)    
  137.         {
  138.         document.getElementById(i).src= star2.src;
  139.         }
  140.     v=6
  141.     setTimeout(flash,200)
  142.     break;
  143.     }
  144. }
  145. loadStars()
  146. -->
  147. </script>
  148.  
  149.  
  150.  
  151. <img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:30px; height:30px; float:left;" />
  152. <img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:30px; height:30px; float:left;" />
  153. <img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:30px; height:30px; float:left;" />
  154. <img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:30px; height:30px; float:left;" />
  155. <img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:30px; height:30px; float:left;" /><br /><br />
  156. <div id="vote" style="font-family:tahoma; color:red;"></div>
  157.  
Nov 6 '07 #1
Share this Question
Share on Google+
15 Replies


acoder
Expert Mod 15k+
P: 16,027
right now it resets to unvoted on refresh. I know you could use cookies but

I also want to give it a unique identifier so that if i put it in my topic header templet, its unique to each topic (retaining whatever vote for each topic untill changed again)
If you want something unique across all clients, you will need server-side data storage. By "unique to each topic", do you mean for all users or a particular user?
Nov 6 '07 #2

P: 77
Yes for all for all users, anyone can change it, but if it has 3 stars current for topic (a) and 4 stars for topic(b) it should be unique rating for each topic i meant, sorry. probly cannot be done except server side.
Perhaps I could find a reliable remote hosted rater that will work that way.
Where would I search?
Nov 6 '07 #3

P: 77
Yes for all for all users, anyone can change it, but if it has 3 stars current for topic (a) and 4 stars for topic(b) it should be unique rating for each topic i meant, sorry. probly cannot be done except server side.
Perhaps I could find a reliable remote hosted rater that will work that way.
Where would I search?
Edit: found a php code but im wondering if it could be used by hosting the php and using

<scripr src="http://h1.ripway.com/Inny/rate/rate.php"></script>
<script src="http://h1.ripway.com/Inny/rate/item.php"></script>

dosent seem to work. sure ive done something wrong. and can it be made automatically unique to whatever topic it appears in?

rate.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. // User settings
  4. $rater_ip_voting_restriction = true; // restrict ip address voting (true or false)
  5. $rater_ip_vote_qty=1; // how many times an ip address can vote
  6. $rater_already_rated_msg="You have already rated this item. You were allowed ".$rater_ip_vote_qty." vote(s).";
  7. $rater_not_selected_msg="You have not selected a rating value.";
  8. $rater_thankyou_msg="Thankyou for voting.";
  9. $rater_generic_text="this item"; // generic item text
  10. $rater_end_of_line_char="n"; // may want to change for different operating systems
  11.  
  12.  
  13. if(!isset($rater_id)) $rater_id=1;
  14. if(!isset($rater_item_name)) $rater_item_name=$rater_generic_text;
  15.  
  16.  
  17. // DO NOT MODIFY BELOW THIS LINE
  18. $rater_filename='item_'.$rater_id.".rating";
  19. $rater_rating=0;
  20. $rater_stars="";
  21. $rater_stars_txt="";
  22. $rater_rating=0;
  23. $rater_votes=0;
  24. $rater_msg="";
  25.  
  26. // Rating action
  27. if(isset($_REQUEST["rate".$rater_id])){
  28.  if(isset($_REQUEST["rating_".$rater_id])){
  29.   while(list($key,$val)=each($_REQUEST["rating_".$rater_id])){
  30.    $rater_rating=$val;
  31.   }
  32.   $rater_ip = getenv("REMOTE_ADDR"); 
  33.   $rater_file=fopen($rater_filename,"a+");
  34.   $rater_str="";
  35.   $rater_str = rtrim(fread($rater_file, 1024*8),$rater_end_of_line_char);
  36.   if($rater_str!=""){
  37.    if($rater_ip_voting_restriction){
  38.     $rater_data=explode($rater_end_of_line_char,$rater_str);
  39.     $rater_ip_vote_count=0;
  40.     foreach($rater_data as $d){
  41.      $rater_tmp=explode("|",$d);
  42.      $rater_oldip=str_replace($rater_end_of_line_char,"",$rater_tmp[1]);
  43.      if($rater_ip==$rater_oldip){
  44.       $rater_ip_vote_count++;
  45.      }
  46.     }
  47.     if($rater_ip_vote_count > ($rater_ip_vote_qty - 1)){
  48.      $rater_msg=$rater_already_rated_msg;
  49.     }else{
  50.      fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
  51.      $rater_msg=$rater_thankyou_msg;
  52.     }
  53.    }else{
  54.     fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
  55.     $rater_msg=$rater_thankyou_msg;
  56.    }
  57.   }else{
  58.    fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
  59.    $rater_msg=$rater_thankyou_msg;
  60.   }
  61.   fclose($rater_file);
  62.  }else{
  63.   $rater_msg=$rater_not_selected_msg;
  64.  }
  65. }
  66.  
  67. // Get current rating
  68. if(is_file($rater_filename)){
  69.  $rater_file=fopen($rater_filename,"r");
  70.  $rater_str="";
  71.  $rater_str = fread($rater_file, 1024*8);
  72.  if($rater_str!=""){
  73.   $rater_data=explode($rater_end_of_line_char,$rater_str);
  74.   $rater_votes=count($rater_data)-1;
  75.   $rater_sum=0;
  76.   foreach($rater_data as $d){
  77.    $d=explode("|",$d);
  78.    $rater_sum+=$d[0];
  79.   }
  80.   $rater_rating=number_format(($rater_sum/$rater_votes), 2, '.', '');
  81.  }
  82.  fclose($rater_file);
  83. }else{
  84.  $rater_file=fopen($rater_filename,"w");
  85.  fclose($rater_file);
  86. }
  87.  
  88. // Assign star image
  89. if ($rater_rating <= 0  ){$rater_stars = "http://h1.ripway.com/Inny/rate/00star.gif";$rater_stars_txt="Not Rated";}
  90. if ($rater_rating >= 0.5){$rater_stars = "http://h1.ripway.com/Inny/rate/05star.gif";$rater_stars_txt="0.5";}
  91. if ($rater_rating >= 1  ){$rater_stars = "http://h1.ripway.com/Inny/rate/1star.gif";$rater_stars_txt="1";}
  92. if ($rater_rating >= 1.5){$rater_stars = "http://h1.ripway.com/Inny/rate/15star.gif";$rater_stars_txt="1.5";}
  93. if ($rater_rating >= 2  ){$rater_stars = "http://h1.ripway.com/Inny/rate/2star.gif";$rater_stars_txt="2";}
  94. if ($rater_rating >= 2.5){$rater_stars = "http://h1.ripway.com/Inny/rate/25star.gif";$rater_stars_txt="2.5";}
  95. if ($rater_rating >= 3  ){$rater_stars = "http://h1.ripway.com/Inny/rate/3star.gif ";$rater_stars_txt="3";}
  96. if ($rater_rating >= 3.5){$rater_stars = "http://h1.ripway.com/Inny/rate/35star.gif";$rater_stars_txt="3.5";}
  97. if ($rater_rating >= 4  ){$rater_stars = "http://h1.ripway.com/Inny/rate/4star.gif";$rater_stars_txt="4";}
  98. if ($rater_rating >= 4.5){$rater_stars = "http://h1.ripway.com/Inny/rate/45star.gif";$rater_stars_txt="4.5";}
  99. if ($rater_rating >= 5  ){$rater_stars = "http://h1.ripway.com/Inny/rate/5star.gif";$rater_stars_txt="5";}
  100.  
  101. // Output
  102. echo '<div class="hreview">';
  103. echo '<form method="post" action="'.$_SERVER["PHP_SELF"].'">';
  104. echo '<h3 class="item">Rate <span class="fn">'.$rater_item_name.'</span></h3>';
  105. echo '<div>';
  106. echo '<span  class="rating"><img src="'.$rater_stars.'?x='.uniqid((double)microtime()*1000000,1).'" alt="'.$rater_stars_txt.' stars" /> Ave. rating: '.$rater_stars_txt.'</span> from <span class="reviewcount"> '.$rater_votes.' votes</span>.';
  107. echo '</div>';
  108. echo '<div>';
  109. echo '<label for="rate5_'.$rater_id.'"><input type="radio" value="5" name="rating_'.$rater_id.'[]" id="rate5_'.$rater_id.'" />Excellent</label>';
  110. echo '<label for="rate4_'.$rater_id.'"><input type="radio" value="4" name="rating_'.$rater_id.'[]" id="rate4_'.$rater_id.'" />Very Good</label>';
  111. echo '<label for="rate3_'.$rater_id.'"><input type="radio" value="3" name="rating_'.$rater_id.'[]" id="rate3_'.$rater_id.'" />Good</label>';
  112. echo '<label for="rate2_'.$rater_id.'"><input type="radio" value="2" name="rating_'.$rater_id.'[]" id="rate2_'.$rater_id.'" />Fair</label>';
  113. echo '<label for="rate1_'.$rater_id.'"><input type="radio" value="1" name="rating_'.$rater_id.'[]" id="rate1_'.$rater_id.'" />Poor</label>';
  114. echo '<input type="hidden" name="rs_id" value="'.$rater_id.'" />';
  115. echo '<input type="submit" name="rate'.$rater_id.'" value="Rate" />';
  116. echo '</div>';
  117. if($rater_msg!="") echo "<div>".$rater_msg."</div>";
  118. echo '</form>';
  119. echo '</div>';
  120.  
  121. ?>
item

Expand|Select|Wrap|Line Numbers
  1. <?
  2. $rater_id=1;
  3. $rater_item_name='Item 1';
  4. include("rater.php");
  5. ?>
Nov 6 '07 #4

P: 77
folks I found a very nifty star rater thats hosted by a reliable company.

its basic html, but path attribute must unique for each instance of it.

problem is, there is not a seperate html for each page on my board, I need to add the code to my topic veiw header, but give a unique attribute that will make each rater unique to the page its on.

I thought of reg expression? like $ on the end of the path but it dosent work.

heres the code (the path needs the modification)

<div class="js-kit-rating" starColor="Green" view="combo" path="/showtopic=$"></div>
<script src="http://js-kit.com/ratings.js"></script>

not sure whats in the js.

company page explaining it is here

http://js-kit.com/ratings/

hope one of you can brain it out to work for me.

a typical url of a topic page is

http://herproom.5.forumer.com/index.php?showtopic=4748&st=0&#entry9626

the templet script is

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  <script language='javascript' type='text/javascript'>
  8.     <!--
  9.      function link_to_post(pid)
  10.     {
  11.         temp = prompt( "{ibf.lang.tt_prompt}", "{ibf.script_url}showtopic={$ibforums->input['t']}&view=findpost&p=" + pid );
  12.         return false;
  13.     }
  14.  
  15.     function delete_post(theURL) {
  16.        if (confirm('{ibf.lang.js_del_1}')) {
  17.           window.location.href=theURL;
  18.        }
  19.        else {
  20.           alert ('{ibf.lang.js_del_2}');
  21.        } 
  22.     }
  23.  
  24.     function PopUp(url, name, width,height,center,resize,scroll,posleft,postop) {
  25.     if (posleft != 0) { x = posleft }
  26.     if (postop  != 0) { y = postop  }
  27.     if (!scroll) { scroll = 1 }
  28.     if (!resize) { resize = 1 }
  29.     if ((parseInt (navigator.appVersion) >= 4 ) && (center)) {
  30.       X = (screen.width  - width ) / 2;
  31.       Y = (screen.height - height) / 2;
  32.     }
  33.     if (scroll != 0) { scroll = 1 }
  34.     var Win = window.open( url, name, 'width='+width+',height='+height+',top='+Y+',left='+X+',resizable='+resize+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no');
  35.     }
  36.  
  37.     function ShowHide(id1, id2) {
  38.       if (id1 != '') expMenu(id1);
  39.       if (id2 != '') expMenu(id2);
  40.     }
  41.  
  42.     function expMenu(id) {
  43.       var itm = null;
  44.       if (document.getElementById) {
  45.         itm = document.getElementById(id);
  46.       } else if (document.all){
  47.         itm = document.all[id];
  48.       } else if (document.layers){
  49.         itm = document.layers[id];
  50.       }
  51.  
  52.       if (!itm) {
  53.        // do nothing
  54.       }
  55.       else if (itm.style) {
  56.         if (itm.style.display == "none") { itm.style.display = ""; }
  57.         else { itm.style.display = "none"; }
  58.       }
  59.       else { itm.visibility = "show"; }
  60.     }
  61.     //-->
  62.     </script>
  63.  
  64. <a name='top'></a>
  65. <!--IBF.FORUM_RULES-->
  66. <table width="100%" cellpadding="0" cellspacing="0" border="0">
  67. <tr>
  68.  <td align='left' width="20%" nowrap="nowrap">{$data['TOPIC']['SHOW_PAGES']}&nbsp;{$data['TOPIC']['go_new']}</td>
  69.  <td align='right' width="80%">{$data[TOPIC][REPLY_BUTTON]}<a href='{ibf.script_url}act=Post&amp;CODE=00&amp;f={$data[FORUM]['id']}' title='{ibf.lang.start_new_topic}'><{A_POST}></a>{$data[TOPIC][POLL_BUTTON]}</td>
  70. </tr>
  71. </table>
  72. <br />
  73. <div class="tableborder">
  74.     <div class='maintitle'><{CAT_IMG}>&nbsp;<b>{$data['TOPIC']['title']}</b>{$data['TOPIC']['description']}</div>
  75.     <!--{IBF.POLL}-->
  76.     <div align='right' class='postlinksbar'>
  77.       <strong><!--{IBF.START_NEW_POLL}--><a href='{ibf.script_url}act=Track&amp;f={$data['FORUM']['id']}&amp;t={$data['TOPIC']['tid']}'>{ibf.lang.track_topic}</a> |
  78.       <a href='{ibf.script_url}act=Forward&amp;f={$data['FORUM']['id']}&amp;t={$data['TOPIC']['tid']}'>{ibf.lang.forward}</a> |
  79.       <a href='{ibf.script_url}act=Print&amp;client=printer&amp;f={$data['FORUM']['id']}&amp;t={$data['TOPIC']['tid']}'>{ibf.lang.print}</a></strong>
  80.     </div>
  81.  
thanks again, cheers from Australia
Nov 6 '07 #5

acoder
Expert Mod 15k+
P: 16,027
You could still use JavaScript for the rating aspect, but you will need some server-side code for persistent storage for any user to see the rate. If it had to be "saved" for one user, a cookie would suffice.

If the PHP generates JavaScript code, you could probably use it within script tags, but the rate.php script doesn't.
Nov 7 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Why not use the topic id, e.g. 4748?

Use the location.search property to get the URL query part from "?" onwards as a string.
Nov 7 '07 #7

P: 77
error with minchars code
Nov 10 '07 #8

gits
Expert Mod 5K+
P: 5,390
hi ...

could you explain your problem in more detail?

kind regards
Nov 10 '07 #9

P: 77
hi ...

could you explain your problem in more detail?

kind regards
sorry mate the post above was to let whomever owns this site know that when I tried to post a question earlier, I kep getting an error 'post is too short, min 20 chars etc' on submit, so i wasnt able to post.

I will add thequestions here incase this works again.

Q. Im using 2 widgets by JS-Kits

http://js-kit.com/ratings/

Ratings widget in conjunction with toprated widget. (i wont add the JS involved here to save space, you could simply look at it in a browser window to see how both widgets work)

My site generates pages on the fly (its a forum), hence a new topic is posted=new page. This is not a problem per say, im using a path (unique) so that each new topic/page created is assigned a new ratings widget.

path im using in ratings widget
Expand|Select|Wrap|Line Numbers
  1. path="/t={$data['TOPIC']['tid']}" 
this is the only path that seems to work this way to allow each topic/page to be rated individually.

A typical URL to a topic on my site looks like this

http://herproom.5.forumer.com/index.php?showtopic=4748&st=0&#entry9626

note the numerical stuffat the end. Herin lies the problem. With the top rated widget, I cannot offer a 'permalink' to any particular topic, so topics linked at the toprated widget (very bottom of site) dont show the topic title, just the topic number. I will end up with a box of links to numbers, they will be mystery links :D

What I want to do is find a way to write 'permalink' that is generated on the fly (like the path) that will give me topic titles as link text in the toprated widget.

If you look at my source code it may help to see how the pages are coded, though hard coding is in php and inaccessable.

hope you understood this, again, any help appreciated, cheers from australia.
Nov 10 '07 #10

acoder
Expert Mod 15k+
P: 16,027
I've merged these threads because they seem to relate to the same problem.
Nov 12 '07 #11

P: 77
I've merged these threads because they seem to relate to the same problem.
Why not use the topic id, e.g. 4748?

Use the location.search property to get the URL query part from "?" onwards as a string.
Acoder could you please be specific, I have no idea what that means in syntax im afraid :)
Nov 12 '07 #12

acoder
Expert Mod 15k+
P: 16,027
Acoder could you please be specific, I have no idea what that means in syntax im afraid :)
Use location.search to get the URL parameters from ? onwards.

Then use the String object's split() method to split the string into an array using "&" as the delimiter, e.g.
Expand|Select|Wrap|Line Numbers
  1. var splt = params.split("&");
Then splt[0] would be 'showtopic=4748' which you can use to get the number 4748 to use in your script as required.
Nov 13 '07 #13

P: 77
Use location.search to get the URL parameters from ? onwards.

Then use the String object's split() method to split the string into an array using "&" as the delimiter, e.g.
Expand|Select|Wrap|Line Numbers
  1. var splt = params.split("&");
Then splt[0] would be 'showtopic=4748' which you can use to get the number 4748 to use in your script as required.
Ill ask them how to do that Thanks. :)
Nov 13 '07 #14

acoder
Expert Mod 15k+
P: 16,027
Ill ask them how to do that Thanks. :)
Er... ask who?
Nov 13 '07 #15

P: 77
Er... ask who?
The folk who made and host the code.
Nov 15 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.