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

[Inny]

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.

 
<script type="text/javascript">
<!--
var set=false;
var v=0;
var a;
function loadStars()
{
star1 = new Image();
star1.src = "http://www.ednasia.com/images/unratedStar.gif";
star2 = new Image();
star2.src= "http://www.geekpedia.com/Samples/Rate/star2.gif";
}
 
function highlight(x)
{
if (set==false)
    {
    y=x*1+1
    switch(x)
        {
        case "1": document.getElementById(x).src= star2.src;
        document.getElementById('vote').innerHTML="one star";
        break;
        case "2":for (i=1;i<y;i++)
        {
        document.getElementById(i).src= star2.src;
        }
        document.getElementById('vote').innerHTML="two stars"
        break;
        case "3":for (i=1;i<y;i++)
        {
        document.getElementById(i).src= star2.src;
        }
        document.getElementById('vote').innerHTML="three stars"
        break;
        case "4":for (i=1;i<y;i++)
        {
        document.getElementById(i).src= star2.src;
        }
        document.getElementById('vote').innerHTML="four stars"
        break;
        case "5":for (i=1;i<y;i++)
        {
        document.getElementById(i).src= star2.src;
        }
        document.getElementById('vote').innerHTML="five stars"
        break;
        }
    }
}
function losehighlight(x)
{
if (set==false)
    {
    for (i=1;i<6;i++)
        {
        document.getElementById(i).src=star1.src;
        document.getElementById('vote').innerHTML=""
        }
    }
}
function setStar(x)
{
y=x*1+1
if (set==false)
    {
    switch(x)
        {
        case "1": a="1" 
        flash(a);
        break;
        case "2": a="2" 
        flash(a);
        break;
        case "3": a="3" 
        flash(a);
        break;
        case "4":a="4" 
        flash(a);
        break;
        case "5":a="5" 
        flash(a);
        break;
        }
    set=true;
    document.getElementById('vote').innerHTML="Thank you for your vote!"
    }    
}
function flash()
{
y=a*1+1
switch(v)
    {
    case 0:
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star1.src;
        }
    v=1
    setTimeout(flash,200)
    break;
    case 1:    
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star2.src;
        }
    v=2
    setTimeout(flash,200)
    break;
    case 2:
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star1.src;
        }
    v=3
    setTimeout(flash,200)
    break;
    case 3:
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star2.src;
        }
    v=4
    setTimeout(flash,200)
    break;
    case 4:
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star1.src;
        }
    v=5
    setTimeout(flash,200)
    break;
    case 5:
    for (i=1;i<y;i++)    
        {
        document.getElementById(i).src= star2.src;
        }
    v=6
    setTimeout(flash,200)
    break;
    }
}
loadStars()
-->
</script>
 
 
 
<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;" />
<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;" />
<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;" />
<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;" />
<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 />
<div id="vote" style="font-family:tahoma; color:red;"></div>
 

[acoder]

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?

[Inny]

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?

[Inny]

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

<?
 
// User settings
$rater_ip_voting_restriction = true; // restrict ip address voting (true or false)
$rater_ip_vote_qty=1; // how many times an ip address can vote
$rater_already_rated_msg="You have already rated this item. You were allowed ".$rater_ip_vote_qty." vote(s).";
$rater_not_selected_msg="You have not selected a rating value.";
$rater_thankyou_msg="Thankyou for voting.";
$rater_generic_text="this item"; // generic item text
$rater_end_of_line_char="n"; // may want to change for different operating systems
 
 
if(!isset($rater_id)) $rater_id=1;
if(!isset($rater_item_name)) $rater_item_name=$rater_generic_text;
 
 
// DO NOT MODIFY BELOW THIS LINE
$rater_filename='item_'.$rater_id.".rating";
$rater_rating=0;
$rater_stars="";
$rater_stars_txt="";
$rater_rating=0;
$rater_votes=0;
$rater_msg="";
 
// Rating action
if(isset($_REQUEST["rate".$rater_id])){
 if(isset($_REQUEST["rating_".$rater_id])){
  while(list($key,$val)=each($_REQUEST["rating_".$rater_id])){
   $rater_rating=$val;
  }
  $rater_ip = getenv("REMOTE_ADDR"); 
  $rater_file=fopen($rater_filename,"a+");
  $rater_str="";
  $rater_str = rtrim(fread($rater_file, 1024*8),$rater_end_of_line_char);
  if($rater_str!=""){
   if($rater_ip_voting_restriction){
    $rater_data=explode($rater_end_of_line_char,$rater_str);
    $rater_ip_vote_count=0;
    foreach($rater_data as $d){
     $rater_tmp=explode("|",$d);
     $rater_oldip=str_replace($rater_end_of_line_char,"",$rater_tmp[1]);
     if($rater_ip==$rater_oldip){
      $rater_ip_vote_count++;
     }
    }
    if($rater_ip_vote_count > ($rater_ip_vote_qty - 1)){
     $rater_msg=$rater_already_rated_msg;
    }else{
     fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
     $rater_msg=$rater_thankyou_msg;
    }
   }else{
    fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
    $rater_msg=$rater_thankyou_msg;
   }
  }else{
   fwrite($rater_file,$rater_rating."|".$rater_ip.$rater_end_of_line_char);
   $rater_msg=$rater_thankyou_msg;
  }
  fclose($rater_file);
 }else{
  $rater_msg=$rater_not_selected_msg;
 }
}
 
// Get current rating
if(is_file($rater_filename)){
 $rater_file=fopen($rater_filename,"r");
 $rater_str="";
 $rater_str = fread($rater_file, 1024*8);
 if($rater_str!=""){
  $rater_data=explode($rater_end_of_line_char,$rater_str);
  $rater_votes=count($rater_data)-1;
  $rater_sum=0;
  foreach($rater_data as $d){
   $d=explode("|",$d);
   $rater_sum+=$d[0];
  }
  $rater_rating=number_format(($rater_sum/$rater_votes), 2, '.', '');
 }
 fclose($rater_file);
}else{
 $rater_file=fopen($rater_filename,"w");
 fclose($rater_file);
}
 
// Assign star image
if ($rater_rating <= 0  ){$rater_stars = "http://h1.ripway.com/Inny/rate/00star.gif";$rater_stars_txt="Not Rated";}
if ($rater_rating >= 0.5){$rater_stars = "http://h1.ripway.com/Inny/rate/05star.gif";$rater_stars_txt="0.5";}
if ($rater_rating >= 1  ){$rater_stars = "http://h1.ripway.com/Inny/rate/1star.gif";$rater_stars_txt="1";}
if ($rater_rating >= 1.5){$rater_stars = "http://h1.ripway.com/Inny/rate/15star.gif";$rater_stars_txt="1.5";}
if ($rater_rating >= 2  ){$rater_stars = "http://h1.ripway.com/Inny/rate/2star.gif";$rater_stars_txt="2";}
if ($rater_rating >= 2.5){$rater_stars = "http://h1.ripway.com/Inny/rate/25star.gif";$rater_stars_txt="2.5";}
if ($rater_rating >= 3  ){$rater_stars = "http://h1.ripway.com/Inny/rate/3star.gif ";$rater_stars_txt="3";}
if ($rater_rating >= 3.5){$rater_stars = "http://h1.ripway.com/Inny/rate/35star.gif";$rater_stars_txt="3.5";}
if ($rater_rating >= 4  ){$rater_stars = "http://h1.ripway.com/Inny/rate/4star.gif";$rater_stars_txt="4";}
if ($rater_rating >= 4.5){$rater_stars = "http://h1.ripway.com/Inny/rate/45star.gif";$rater_stars_txt="4.5";}
if ($rater_rating >= 5  ){$rater_stars = "http://h1.ripway.com/Inny/rate/5star.gif";$rater_stars_txt="5";}
 
// Output
echo '<div class="hreview">';
echo '<form method="post" action="'.$_SERVER["PHP_SELF"].'">';
echo '<h3 class="item">Rate <span class="fn">'.$rater_item_name.'</span></h3>';
echo '<div>';
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>.';
echo '</div>';
echo '<div>';
echo '<label for="rate5_'.$rater_id.'"><input type="radio" value="5" name="rating_'.$rater_id.'[]" id="rate5_'.$rater_id.'" />Excellent</label>';
echo '<label for="rate4_'.$rater_id.'"><input type="radio" value="4" name="rating_'.$rater_id.'[]" id="rate4_'.$rater_id.'" />Very Good</label>';
echo '<label for="rate3_'.$rater_id.'"><input type="radio" value="3" name="rating_'.$rater_id.'[]" id="rate3_'.$rater_id.'" />Good</label>';
echo '<label for="rate2_'.$rater_id.'"><input type="radio" value="2" name="rating_'.$rater_id.'[]" id="rate2_'.$rater_id.'" />Fair</label>';
echo '<label for="rate1_'.$rater_id.'"><input type="radio" value="1" name="rating_'.$rater_id.'[]" id="rate1_'.$rater_id.'" />Poor</label>';
echo '<input type="hidden" name="rs_id" value="'.$rater_id.'" />';
echo '<input type="submit" name="rate'.$rater_id.'" value="Rate" />';
echo '</div>';
if($rater_msg!="") echo "<div>".$rater_msg."</div>";
echo '</form>';
echo '</div>';
 
?>

item

<?
$rater_id=1;
$rater_item_name='Item 1';
include("rater.php");
?>

[Inny]

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

 
 
 
 
 
 
 <script language='javascript' type='text/javascript'>
    <!--
     function link_to_post(pid)
    {
        temp = prompt( "{ibf.lang.tt_prompt}", "{ibf.script_url}showtopic={$ibforums->input['t']}&view=findpost&p=" + pid );
        return false;
    }
 
    function delete_post(theURL) {
       if (confirm('{ibf.lang.js_del_1}')) {
          window.location.href=theURL;
       }
       else {
          alert ('{ibf.lang.js_del_2}');
       } 
    }
 
    function PopUp(url, name, width,height,center,resize,scroll,posleft,postop) {
    if (posleft != 0) { x = posleft }
    if (postop  != 0) { y = postop  }
    if (!scroll) { scroll = 1 }
    if (!resize) { resize = 1 }
    if ((parseInt (navigator.appVersion) >= 4 ) && (center)) {
      X = (screen.width  - width ) / 2;
      Y = (screen.height - height) / 2;
    }
    if (scroll != 0) { scroll = 1 }
    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');
    }
 
    function ShowHide(id1, id2) {
      if (id1 != '') expMenu(id1);
      if (id2 != '') expMenu(id2);
    }
 
    function expMenu(id) {
      var itm = null;
      if (document.getElementById) {
        itm = document.getElementById(id);
      } else if (document.all){
        itm = document.all[id];
      } else if (document.layers){
        itm = document.layers[id];
      }
 
      if (!itm) {
       // do nothing
      }
      else if (itm.style) {
        if (itm.style.display == "none") { itm.style.display = ""; }
        else { itm.style.display = "none"; }
      }
      else { itm.visibility = "show"; }
    }
    //-->
    </script>
 
<a name='top'></a>
<!--IBF.FORUM_RULES-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
 <td align='left' width="20%" nowrap="nowrap">{$data['TOPIC']['SHOW_PAGES']}&nbsp;{$data['TOPIC']['go_new']}</td>
 <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>
</tr>
</table>
<br />
<div class="tableborder">
    <div class='maintitle'><{CAT_IMG}>&nbsp;<b>{$data['TOPIC']['title']}</b>{$data['TOPIC']['description']}</div>
    <!--{IBF.POLL}-->
    <div align='right' class='postlinksbar'>
      <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> |
      <a href='{ibf.script_url}act=Forward&amp;f={$data['FORUM']['id']}&amp;t={$data['TOPIC']['tid']}'>{ibf.lang.forward}</a> |
      <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>
    </div>
 

thanks again, cheers from Australia

[acoder]

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.

[acoder]

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.

[Inny]

error with minchars code

[gits]

hi ...

could you explain your problem in more detail?

kind regards

[Inny]

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

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.

[acoder]

I've merged these threads because they seem to relate to the same problem.

[Inny]

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 :)

[acoder]

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.

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.

[Inny]

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.

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. :)

[acoder]

Ill ask them how to do that Thanks. :)

Er... ask who?

[Inny]

Er... ask who?

The folk who made and host the code.