[MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.

[bash-t]

Hello everybody!
Since KurtW's mods went away, I was missing a way to place an image-rating without page reload. So I programmed a mod, that will let the user rate a picture with stars, like seen on Youtube e.g.
I made the frontend in base of the Star-Display of waynenort of this Thread: http://www.4homepages.de/forum/index.php?topic=25451.0 Thanksgiving to him from my side for providing the code!

Some annotations before I will start:
This will be my first mod. So please take this into consideration if you comment my mod (which I really would appreciate)

Update:

• I made a Demo Gallery, where you can try this mod (go on the details of an image): http://www.pawlikonline.de/temp/4images/
• This is v.1.0 of the Ajax Star Rating. Soon I will release a v.1.1. Then you'll be able to use this star rating element on categories and index pages aswell. Until I will implement it into this install description, please stick to the information of this post http://www.4homepages.de/forum/index.php?topic=25666.msg140435#msg140435 , after you have done the steps below. Thanks!

I made a few screenshots, so that you can take a picture:
Initial look of a non-rated image:
- Image not longer available -

While mouse-over, the stars and the label changes:
- Image not longer available -

Rate image without page reload. Immediately see the changes in the rating
- Image not longer available -

It is still not possible to flood the rating:
- Image not longer available -

Let's go now:

Summary of files affected

[change] details.php
[change] includes/constants.php
[change] includes/functions.php
[change] includes/page_header.php
[change] lang/(your_lang)/main.php
[change] templates/(your_template)/details.html
[change] templates/(your_template)/header.html
[change] templates/(your_template)/rate_form.html
[change] templates/(your_template)/style.css

[new] ajaxrating.php
[new] scripts/ajaxrating.js
[new] scripts/yui/2.7.0/build/connection/connection-min.js
[new] scripts/yui/2.7.0/build/json/json-min.js
[new] scripts/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
[new] templates/(your_template)/images/stars.gif
[new] templates/(your_template)/rate_form_readonly.html


1. Open details.php

Locate:
$site_template->print_template($site_template->parse_template($main_template));

Insert ^before:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$site_template->register_vars(array(

"ajax_rating_labels_0" => $lang['ajax_rating_labels'][0],

"ajax_rating_labels_1" => $lang['ajax_rating_labels'][1],

"ajax_rating_labels_2" => $lang['ajax_rating_labels'][2],

"ajax_rating_labels_3" => $lang['ajax_rating_labels'][3],

"ajax_rating_labels_4" => $lang['ajax_rating_labels'][4],

"ajax_rating_labels_5" => $lang['ajax_rating_labels'][5],

"ajax_rating_messages_0" => $lang['ajax_rating_messages'][0],

"ajax_rating_messages_1" => $lang['ajax_rating_messages'][1],

"ajax_rating_messages_2" => $lang['ajax_rating_messages'][2],

"ajax_rating_messages_3" => $lang['ajax_rating_messages'][3],

"ajax_rating_points" => $lang['ajax_rating_points']
));
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END

2. Open includes/constants.php
Locate:
define('MAX_RATING', 5);

Replace with:
define('MAX_RATING', 6);


3. Open includes/functions.php
Locate:
$rate_form = "";
  if (check_permission("auth_vote", $image_row['cat_id'])) {
    $site_template->register_vars("rate", $lang['rate']);
    $rate_form = $site_template->parse_template("rate_form");
  }
  $site_template->register_vars("rate_form", $rate_form);

Replace with:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
  $rate_form = "";
  if (check_permission("auth_vote", $image_row['cat_id'])) {

$rate_form = $site_template->parse_template("rate_form");
  }
  else {
  $site_template->register_vars(

"ajax_rating_messages_3", $lang['ajax_rating_messages'][3]);

$rate_form = $site_template->parse_template("rate_form_readonly");
  }
  $site_template->register_vars("rate_form", $rate_form);
    
  /*The original code goes here:
  $rate_form = "";
  if (check_permission("auth_vote", $image_row['cat_id'])) {
    $site_template->register_vars("rate", $lang['rate']);
    $rate_form = $site_template->parse_template("rate_form");
  }
  $site_template->register_vars("rate_form", $rate_form);*/
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END


4. Open lang/(your_lang)/main.php
Locate:
$lang['voting_success'] = "Ihre Bewertung wurde gespeichert";
$lang['voting_error'] = "Bewertung ungültig!";
$lang['already_voted'] = "Sie haben dieses Bild bereits bewertet!";

Replace with:
//$lang['voting_success'] = "Ihre Bewertung wurde gespeichert";

   //disabled due to AJAX rating MOD
//$lang['voting_error'] = "Bewertung ungültig!";

   //disabled due to AJAX rating MOD
//$lang['already_voted'] = "Sie haben dieses Bild bereits bewertet!";//disabled due to AJAX rating MOD


At the very end Locate:
?>

Insert ^before:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$lang['ajax_rating_labels'] = array (

0 => "Noch nicht bewertet",

1 => "Öde",

2 => "Nichts besonderes",

3 => "Sehenswert",

4 => "Echt cool",

5 => "Genial!"
);
$lang['ajax_rating_messages'] = array (

0 => "Bewertung ungültig", //voting_error

1 => "Vielen Dank für Deine Bewertung!", // voting_success

2 => "Du hast das Bild bereits bewertet.", //already_voted

3 => "Weitere Bewertungen sind für dieses Bild deaktiviert."
);
$lang['ajax_rating_points'] = "Punkte";
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END

5. Open templates/(your_template)/details.html
At the very top locate:

Code: [Select]

{header}
Insert _after:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<script type="text/javascript">
YAHOO.namespace('rating');
YAHOO.rating.star={
display_percentage : false, //set to true if a percentaged value shall be shown beneath the stars.
display_lables: true, //set to true if a ranking label shall be displayed beneath the stars at mouseover.
//do not modify the properties below!
num : 0,
successfully_voted : false,
labels : [ '{ajax_rating_labels_0}' , '{ajax_rating_labels_1}', '{ajax_rating_labels_2}', '{ajax_rating_labels_3}', '{ajax_rating_labels_4}', '{ajax_rating_labels_5}'],
msgs : [ '{ajax_rating_messages_0}' , '{ajax_rating_messages_1}', '{ajax_rating_messages_2}']
};
</script>
<script type="text/javascript" src="scripts/ajaxrating.js"></script>
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->
Note: The code above will give you two configuration triggers:
1.

Code: [Select]

display_percentagechange this attribute to true, then a number will be posted right beside the stars, that will show you the current rating level in percent (0% - 100%)
2.

Code: [Select]

display_lablesif you set this attribute to true, a label will be shown beside the stars, showing a textual kind of rating. The values of the $lang['ajax_rating_labels'] array will be shown here.


Note: the variable {rate_form} of the following code will provide both: displaying the rating and give the user the chace to place a rating (if it is allowed for this category).
Therefore it is no need to use the {if rate_form} tag, as it will be checked within the variable.
Locate:

Code: [Select]

{if rate_form}
                  <br />
<div align="center">{rate_form}</div>
                  {endif rate_form}
Replace with:

Code: [Select]

<div align="center">{rate_form}</div>
Put the following code anywhere on your details page (usually directly below the div tag posted beforehand:

Code: [Select]

<span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points}
6. Open templates/(your_template)/header.html
Locate:

Code: [Select]

{if has_rss}
Insert ^before:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<script type="text/javascript" src="scripts/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/2.7.0/build/json/json-min.js"></script>
<script type="text/javascript" src="scripts/yui/2.7.0/build/connection/connection-min.js"></script>
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->

Open templates/(your_template)/rate_form.html
Replace the whole file with the following code:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<form method="post" id="ajax_rate_form">
<div id="star"><br style="clear: both;" />
 <ul id="star0" class="star" onmousedown="YAHOO.rating.star.update(event,this)" onmousemove="YAHOO.rating.star.mouse(event,this)">
<li id="starCur0" class="curr" title="{image_rating}" style="width: 0px;"></li>
 </ul>
 <div style="color: rgb(136, 136, 136);" id="starUser0" class="user" percent="0"></div>
 <div id="star_rating_label" class="user"></div>
 <div id="star_rating_msg" class="user"></div>
</div>
<input type="hidden" name="rating" value="0" />
<input type="hidden" name="action" value="rateimage" />
<input type="hidden" name="id" value="{image_id}" />
</form>
<br style="clear: both;" />
<!--
<form method="post" action="{self}">
  <table border="0" cellspacing="0" cellpadding="1">
    <tr>
      <td class="head1">
        <table border="0" cellspacing="0" cellpadding="3" class="row1">
          <tr>
            <td valign="bottom">
              <select name="rating" class="select">
                <option value="">--</option>
                <option value="5">5</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="2">2</option>
                <option value="1">1</option>
              </select>
            </td>
            <td>
              <input type="hidden" name="action" value="rateimage" />
              <input type="hidden" name="id" value="{image_id}" />
              <input type="submit" value="{rate}" class="button" name="submit" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>-->
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->
7. Open templates/(your_template)/style.css
At the very end insert:

Code: [Select]

/*-----------------------------------------------------*/
/*--- [MOD] Ajax Star Rating --------------by Bash-T---*/
/*START------------------------------------------------*/
#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 0px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('images/stars.gif') repeat-x; CURSOR: pointer; }
#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; left:0px; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 11px; FONT-FAMILY: Arial; COLOR: #717E7D; }
/*-----------------------------------------------------*/
/*--- [MOD] Ajax Star Rating --------------by Bash-T---*/
/*--------------------------------------------------END*/

8. Open includes/page_header.php
Locate:

//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
if ($action == "rateimage" && $id) {
  $rating = intval($HTTP_POST_VARS['rating']);
  $cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
  $cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
  if ($rating && $rating <= MAX_RATING && $id) {
    if (!isset($session_info['rated_imgs'])) {
      $session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
    }
    $split_list = array();
    if (!empty($session_info['rated_imgs'])) {
      $split_list = explode(" ", $session_info['rated_imgs']);
    }
    if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
      $session_info['rated_imgs'] .= " ".$id;
      $session_info['rated_imgs'] = trim($session_info['rated_imgs']);
      $site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
      $cookie_rated[] = $id;
      $cookie_expire = time() + 60 * 60 * 24 * 4;
      setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
      update_image_rating($id, $rating);
      $msg = $lang['voting_success'];
    }
    else {
      $msg = $lang['already_voted'];
    }
  }
  else {
    $msg = $lang['voting_error'];
  }
}


and delete this block or comment it like this one:

//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
/* [MOD] Ajax Star Rating. Code block disabled. Modified code in /ajaxrating.php
if ($action == "rateimage" && $id) {
  $rating = intval($HTTP_POST_VARS['rating']);
  $cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
  $cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
  if ($rating && $rating <= MAX_RATING && $id) {
    if (!isset($session_info['rated_imgs'])) {
      $session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
    }
    $split_list = array();
    if (!empty($session_info['rated_imgs'])) {
      $split_list = explode(" ", $session_info['rated_imgs']);
    }
    if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
      $session_info['rated_imgs'] .= " ".$id;
      $session_info['rated_imgs'] = trim($session_info['rated_imgs']);
      $site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
      $cookie_rated[] = $id;
      $cookie_expire = time() + 60 * 60 * 24 * 4;
      setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
      update_image_rating($id, $rating);
      $msg = $lang['voting_success'];
    }
    else {
      $msg = $lang['already_voted'];
    }
  }
  else {
    $msg = $lang['voting_error'];
  }
}*/

In the attached zip file you will find all the files, that are marked as [new] in the agenda above.
Please keep the directory structure and provide the html files in your specific template.

If everything worked well, then you should see the new star-rating element at the place, where you put the {rate_form} Tag.

Please let me know what you think of this mod.

Kind regards,
Bash-T


Bugfixes:
18.08.09 15:15
 - Fixes CSS Display Bug in IE. Perform Step 7 again to display the stars properly in Internet Explorer
17.08.09 22:59
 - Edited some HTML Comments, as they seem to not close correctly in some case.
17.08.09 21:22
 - IE Display Bugfix in ajaxrating.js - download attatched zip for update
17.08.09 17:22
 - Step 8 fixed (a closing "}" was missing)
 - Demo HP added

16.08.09 20:32
 - Step 8 added.

[rinaldos]

Sounds good, but is it possible to see a DEMO?

[Sunny C.]

NICE NICE NICE!
More of that!

[rinaldos]

@Sumale.in
Hast du es ausprobiert?

[Sunny C.]

Hy,

nein noch nicht! Wollte das gleich mal testen und dann eventuell in die Liste aufnehmen!
Werde bescheid geben! Ca. in einer Stunde weiß ich mehr!

Edit://

Fehler:

Parse error: syntax error, unexpected '}' in /www/htdocs/w00b2576/anitube/includes/page_header.php on line 359

//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
/* [MOD] Ajax Star Rating. Code block disabled. Modified code in /ajaxrating.php
if ($action == "rateimage" && $id) {
  $rating = intval($HTTP_POST_VARS['rating']);
  $cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
  $cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
  if ($rating && $rating <= MAX_RATING && $id) {
    if (!isset($session_info['rated_imgs'])) {
      $session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
    }
    $split_list = array();
    if (!empty($session_info['rated_imgs'])) {
      $split_list = explode(" ", $session_info['rated_imgs']);
    }
    if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
      $session_info['rated_imgs'] .= " ".$id;
      $session_info['rated_imgs'] = trim($session_info['rated_imgs']);
      $site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
      $cookie_rated[] = $id;
      $cookie_expire = time() + 60 * 60 * 24 * 4;
      setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
      update_image_rating($id, $rating);
      $msg = $lang['voting_success'];
    }
    else {
      $msg = $lang['already_voted'];
    }
  }
  else {
    $msg = $lang['voting_error'];
  }
}*/
}

Die letzte Klammer stört wohl! (hier zeile 35) Wenn ich diese entferne, dann kann ich die Seite wieder betreten!

Nächste Problem: Detailsansicht.
Da wo eigentlich das Rateform sein sollte, sehe ich nur folgendes:


Ich bin die Installation zweimal durchgegangen!

Edit:2//
Bis jetzt war ich nicht in der Lage es einzubauen!

[bash-t]

Hallo zusammen,

ich habe die Anleitung auf Basis meiner gemoddeten 4images Version erstellt. Es kann sein, dass noch hier und da ein kleiner Schönheitsfehler drin ist. Wenn ich heute Abend die Zeit finde, werde ich den Mod auf einer frischen Installation auf Basis meiner obigen Anleitung erstellen und die Fehler ausmerzen.

Sorry schon mal, dass es nicht auf anhieb geklappt hat.

Viele Grüße,
Bash-T

[Sunny C.]

Hy,

ist doch alles kein Problem.
Schön, dass es jemand neues gibt der diverse Modifikationen erstellt und auch alte, wie in diesem Fall "Ajax Starrating" *neu schreibt.

Ps.: Hab dir mal eine PN geschrieben!

[Nicky]

bash-t,

vorerst, vielen dank für deine bemühungen, nur weiter so! 

wäre aber auch nicht schlecht wenn es eine DEMO zum ansehen gäbe..

btw.
Benny, bash-t, schöne Avatars habt ihr da

btw.2
bash-t, jetzt wird's Sumale.nin(Benny) website erst nicht fertig 

[Sunny C.]

Nicky,

hättest du auch gern solch ein Avatar? Rinaldos habe ich auch schon eines via Pn geschickt.

Zur Webseite:
, immer das gleiche ^^, aber keine Sorge. Dauert nicht mehr allzulang. Derweil bin ich ja auch daran das All-In-One Paket zu erstellen. Aber in Moment ist einfach meine Familie mir wichtiger.

[bash-t]

Fehler:

Parse error: syntax error, unexpected '}' in /www/htdocs/w00b2576/anitube/includes/page_header.php on line 359

//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
/* [MOD] Ajax Star Rating. Code block disabled. Modified code in /ajaxrating.php
if ($action == "rateimage" && $id) {
  $rating = intval($HTTP_POST_VARS['rating']);
  $cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
  $cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
  if ($rating && $rating <= MAX_RATING && $id) {
    if (!isset($session_info['rated_imgs'])) {
      $session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
    }
    $split_list = array();
    if (!empty($session_info['rated_imgs'])) {
      $split_list = explode(" ", $session_info['rated_imgs']);
    }
    if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
      $session_info['rated_imgs'] .= " ".$id;
      $session_info['rated_imgs'] = trim($session_info['rated_imgs']);
      $site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
      $cookie_rated[] = $id;
      $cookie_expire = time() + 60 * 60 * 24 * 4;
      setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
      update_image_rating($id, $rating);
      $msg = $lang['voting_success'];
    }
    else {
      $msg = $lang['already_voted'];
    }
  }
  else {
    $msg = $lang['voting_error'];
  }
}*/
}

Die letzte Klammer stört wohl! (hier zeile 35) Wenn ich diese entferne, dann kann ich die Seite wieder betreten!

Du hast recht, es fehlte die auskommentierung der letzten schließenden geschweiften Klammer. Habe dies oben im Code berichtigt.

Nächste Problem: Detailsansicht.
Da wo eigentlich das Rateform sein sollte, sehe ich nur folgendes:

Hmm, kannst Du mir mal bitte den umgebenden HTML Code der fertig gerenderten Seite posten? (Oder einen Link wo ich es mir ansehen kann?)
Es scheint mir so, als ob sich bei dir irgend ein sich öffnendes <input type="submit" Tag oder dergleichen noch versteckt.

Ich habe den Code eben 1:1 (bis auf ein paar fehlende Kommentare) in einer frischen Installation eingebaut:
http://www.pawlikonline.de/temp/4images/details.php?image_id=1

Dort funktioniert es einwandfrei.

Allerdings zickt der IE wohl noch rum, da er wohl mit dem einen von mir selbst definierten Attribut eines DIV-Tags nicht klar kommt. Das schaue ich mir heute Abend mal an.

Grüße,
Bash-T

[Sunny C.]

Soweit hat die Installation nun geklappt, aber die Darstellung klappt nicht:


details.html:

Code: [Select]

{header}
<!-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START----------------------------------------------->
<script type="text/javascript">
YAHOO.namespace('rating');
YAHOO.rating.star={
display_percentage : false, //set to true if a percentaged value shall be shown beneath the stars.
display_lables: true, //set to true if a ranking label shall be displayed beneath the stars at mouseover.
//do not modify the properties below!
num : 0,
successfully_voted : false,
labels : [ '{ajax_rating_labels_0}' , '{ajax_rating_labels_1}', '{ajax_rating_labels_2}', '{ajax_rating_labels_3}', '{ajax_rating_labels_4}', '{ajax_rating_labels_5}'],
msgs : [ '{ajax_rating_messages_0}' , '{ajax_rating_messages_1}', '{ajax_rating_messages_2}']
};
</script>
<script type="text/javascript" src="scripts/ajaxrating.js"></script>
<!-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//-----------------------------------------------END-->
<div id="content">
  <div id="sidebar">
    <div id="submenu">
      <h1>Lesezeichen</h1>
      <br />
      <ul>
        {clickstream}
      </ul>
    </div>
  </div>
  <div id="text">
    <h1>Videodetails</h1>
    <div id="modul">
      <div id="modul_portfolio">
        <table summary="text" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td align="left" width="50%"><p><b>{image_name}</b>{if cat_is_new}<span style="color:#093"> <sup>{lang_new}</sup></span>{endif cat_is_new}</p></td>
              <td align="right" width="50%"><p>{if prev_image_name}<a href="{prev_image_url}" title="{lang_prev_image} {prev_image_name}">«</a>&nbsp;{endif prev_image_name}{if next_image_name}<a title="{lang_next_image} {next_image_name}" href="{next_image_url}">»</a>{endif next_image_name}</p></td>
            </tr>
          </tbody>
        </table>
        <div class="show"> {image} <img src="http://demo.cms2day.de/includes/upload/echoimwald_1-show.jpg" alt="" style="display: none;" border="0">
          <div id="screen_navi"><a id="vollbild1" title="Echo im Wald | Mittwoch, 17. Juni 2009, 11:22 Uhr" rel="lytebox" href="http://demo.cms2day.de/includes/upload/echoimwald_1.jpg">{lightbox_button} {postcard_button}</a></div>
          <div id="portfolio_navi">{if admin_links}{admin_links}{endif admin_links}</div>
          <div align="center">{rate_form}</div>
          <span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points} </div>
        <h1>Informationen</h1>
        <p class="portfolio_headline">{image_name}</p>
        <table width="100%" border="0" cellpadding="3" cellspacing="0">
          <tr>
            <td valign="top" class="row2"><b>{lang_keywords}</b></td>
            <td valign="top" class="row2">{image_keywords}</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_date}</b></td>
            <td valign="top" class="row1">{image_date}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_hits}</b></td>
            <td valign="top" class="row2">{image_hits}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_rating}</b></td>
            <td valign="top" class="row2">{image_rating} ({image_votes}
              {lang_votes})</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_file_size}</b></td>
            <td valign="top" class="row1">{image_file_size}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_added_by}</b></td>
            <td valign="top" class="row2">{user_name_link}</td>
          </tr>
        </table>
        <p class="portfolio_headline">{lang_description}</p>
        {image_description} <br />
        <br />
        <p>
        <h1>Download</h1>
        </p>
        <p class="portfolio_headline">Einstellungen</p>
        Das Feature, um die Videos downloaden zu können, stammt von <a href="http://www.filsh.net" target="_blank">Filsh.net</a>. Hier habt ihr direkt die Möglichkeit das Video in dem Format <strong>*.mp4</strong> zu downloaden. Auf <a href="http://www.filsh.net" target="_blank">Filsh.net</a> gibt es allerdings noch mehr Möglichkeiten das Video optimal einzustellen.<br />
        Was <a href="http://www.filsh.net" target="_blank">Filsh.net</a> ist? Hier die Antwort: <strong><a href="http://www.filsh.net/howto/" class="float-right help" target="_blank">Anleitungsvideo</a></strong>
        <!-- Filsh.net Video Download -->
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/environment.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.js"></script>
        <script type="text/javascript">
var lang = {'accept_rules': 'Bitte akzeptiere die Nutzungsbedingungen von Filsh.net, um mit dem Download fortzufahren.'};
</script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.ui.core.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.ui.slider.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/form.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/startup.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/AC_RunActiveContent.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/swfobject.js"></script>
        <style type="text/css">
/* Slider styling */
.slider { width:250px; margin-top: 10px; }

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 12px; height: 18px; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: 1px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #dedfe0/*{borderColorContent}*/; background-color: #ffffff/*{bgColorContent}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background-color: #cccccc/*{bgColorHeader}*/ ; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

.ui-state-default, .ui-widget-content .ui-state-default { margin-top: -3px; border: none; /*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(/static/images/slider.png)/*{bgImgUrlDefault}*/ 0/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; cursor: pointer; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }

.sidebar-entry {
width: 220px;
padding: 10px;
padding-right: 15px;
background-image: url('http://www.filsh.net/static/images/sidebar-background.png');
background-repeat: repeat-x;
background-position: bottom center;
border-top: 2px solid #e9e9ea;
font: normal 14px 'Myriad Pro',helvetica,arial,sans-serif;
color: #878787;
padding-bottom: 20px;
margin-bottom: 20px;
}

.sidebar-entry h3 {
font: normal 18px 'Myriad Pro',helvetica,arial,sans-serif;
color: #4c4b4b;
}

</style>
        <div class="content">
          <div class="clearfix">
            <div class="main-left">
              <form action="http://www.filsh.net/process/" method="post" onsubmit="return checkRules();" target="_blank">
                <div class="step-image step-1"></div>
                <div class="step-content">
                  <input name="url" value="http://www.{url}" class="styled-input" type="hidden">
                </div>
                <div class="step-content" id="options-container">
                  <div class="option" id="format">
                    <div class="option-label" style="color:#5C8CD8"><strong>Format:</strong></div>
                    <div class="option-form">
                      <select name="format" onchange="showOptionsForFormat(this.value)">
                        <option value="mp4" selected="selected">&nbsp;&nbsp;.MP4 (MPEG4 + AAC, iTunes/iPod/iPhone/PSP)</option>
                        <option value="none">(Keine Umwandlung)</option>
                      </select>
                    </div>
                  </div>
                  <!-- /option[format] -->
                  <input name="volume" id="volume-input" value="0" type="hidden">
                  <div class="option" id="volume">
                    <div class="option-label" style="color:#5C8CD8"><strong>Lautstärke:</strong></div>
                    <div class="option-form">
                      <div id="slider-volume" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="volume-value">0%</div>
                  </div>
                  <!-- /option[volume] -->
                  <input name="audiobit" id="audiobit-input" value="128" type="hidden">
                  <div class="option" id="audiobit">
                    <div class="option-label" style="color:#5C8CD8"><strong>Audio-Bitrate:</strong></div>
                    <div class="option-form">
                      <div id="slider-audiobit" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 33.3333%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="audiobit-value">128 kbit/s</div>
                  </div>
                  <!-- /option[audiobit] -->
                  <input name="videobit" id="videobit-input" value="192" type="hidden">
                  <div class="option" id="videobit">
                    <div class="option-label" style="color:#5C8CD8"><strong>Video-Bitrate:</strong></div>
                    <div class="option-form">
                      <div id="slider-videobit" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 13.3333%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="videobit-value">192 kbit/s</div>
                  </div>
                  <!-- /option[videobit] -->
                  <div class="option" id="dimensions">
                    <div class="option-label" style="color:#5C8CD8"><strong>Auflösung:</strong></div>
                    <div class="option-form">
                      <select name="dimensions">
                        <option value="none" selected="selected">(Original)</option>
                        <option value="128x96">128x96</option>
                        <option value="176x144">176x144</option>
                        <option value="220x176">220x176</option>
                        <option value="320x240">320x240</option>
                        <option value="480x320">480x320</option>
                      </select>
                    </div>
                  </div>
                  <!-- /option[timespan] -->
                  <div class="option" id="timespan">
                    <div class="option-label" style="color:#5C8CD8"><strong>Zeitspanne:</strong></div>
                    <div class="option-form"> von
                      <input name="timespan-start" value="00:00:00" id="timespan-start" size="8" maxlength="8" class="light" disabled="true" type="text">
                      &nbsp;&nbsp;&nbsp;
                      <input name="timespan-from-start" checked="checked" id="timespan-from-start" onchange="toggleEnabled('timespan-start','timespan-from-start')" type="checkbox">
                      <strong>Anfang</strong>&nbsp;&nbsp;&nbsp;bis
                      <input name="timespan-end" value="99:99:99" id="timespan-end" size="8" maxlength="8" class="light" disabled="true" type="text">
                      &nbsp;&nbsp;&nbsp;
                      <input name="timespan-to-end" checked="checked" id="timespan-to-end" onchange="toggleEnabled('timespan-end','timespan-to-end')" type="checkbox">
                      <strong>Ende</strong> </div>
                  </div>
                  <!-- /option[timespan] -->
                </div>
                <div class="rules-container">
                  <div class="rules float-right"> <span class="rules_text"><a onclick="toggleRules()">Ja, ich stimme den </a><a href="http://www.filsh.net/termsofuse" target="_blank">Nutzungsbedingungen</a> von <a href="http://www.filsh.net" target="_blank">Filsh.net</a> zu.</span>
                    <input name="rules_accepted" id="rules_accepted" type="checkbox">
                  </div>
                </div>
                <div class="submit-button float-right"> <span class="button">
                  <input name="submit" value="{image_name} Downloaden" type="submit">
                  </span> </div>
              </form>
            </div>
          </div>
          <!-- Filsh.net Video Download -->
        </div>
      </div>
    </div>
  </div>
</div>
{footer}
Ich weis nicht woran das liegt!

[bash-t]

Update:
Für den IE Javascript Bug habe ich die ajaxrating.js aus der Zip angepasst!
Falls jemand nicht die gesamte Zip herunterladen möchte, hier die Anpassungen:
scripts/ajaxrating.js
Locate:

Code: [Select]

failure:handleFailure,
replace with:

Code: [Select]

failure:handleFailure
Locate:

Code: [Select]

targetForm = YAHOO.util.Dom.get('ajax_rate_form');
Since the YUI has a bug while getting the form element, if an input field inside this form is named "id" (for further information read this: http://tinyurl.com/lqmtwy )
replace with:

Code: [Select]

targetForm = document.getElementById('ajax_rate_form');

Damit wären die JS Fehler behoben!
Allerdings gibt es im IE noch einen CSS-Bug und vielleicht kann mir jemand von Euch weiterhelfen...
Siehe folgenden Screenshot:


Wie man an der Wertung unten erkennt, sollten 2,81 Sterne ausgefüllt sein. Leider fangen die roten Sterne erst bei dem Wert 2,81 an...
Im Firefox & Co. wird die CSS korrekt interpretiert.
Hier einmal die dafür verwendeten CSS Properties und das HTML Snippet:
Es handelt sich dabei um das LI-Element, welches mit roten Sternen dargestellt auf dem UL-Element (welches die blauen Sterne darstellt) geklebt ist. Im IE ist die Position des LI Elements aus irgend einer Weise verschoben...

Code: [Select]

#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 0px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('images/stars.gif') repeat-x; CURSOR: pointer; }
#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 11px; FONT-FAMILY: Arial; COLOR: #717E7D; }

Code: [Select]

<div id="star"><br style="clear: both;" />
 <ul id="star0" class="star" onMouseDown="YAHOO.rating.star.update(event,this)" onMouseMove="YAHOO.rating.star.mouse(event,this)">
<li id="starCur0" class="curr" title="{image_rating}" style="width: 0px;"></li>
 </ul>
 <div style="color: rgb(136, 136, 136);" id="starUser0" class="user" percent="0"></div>
</div>
Wenn jemand eine Idee hat, nur raus damit


SOLVED!
Es ich habe dem #star li.curr ein left 0px; spendiert und schon hat der IE auch keine Anzeigeprobleme!

Grüße,
Bash-T

[Sunny C.]

Saubere Arbeit.
Danke für deine Tolle Hilfe und für die Super Mod.
Habs in meiner Liste aufgenommen:
http://www.4homepages.de/forum/index.php?topic=24888.0

[bash-t]

Ich habe eine Lösung für den IE CSS Bug aus dem vorletzten Post!

Eingebaut ist dieser ganz oben bereits in Schritt 7.

Jeder, der den Fix nachträglich einbauen möchte, hier die Änderung:

Open templates/(your_template)/style.css

Locate:

Code: [Select]

#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; FONT-SIZE: 1px; }
Replace with:

Code: [Select]

#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; left:0px; FONT-SIZE: 1px; }
Grüße,
Bash-T

[mawenzi]

... das sieht nun sehr gut und auch fehlerlos auf der Demoseite aus ...
... die erfolgreiche Installation nach der MOD-Beschreibung hat zwar noch keiner gemeldet, aber trotzdem ...
... MOD verschoben nach Mods & Plugins (Releases & Support) ...

... danke Bash-T für die top Arbeit und das Veröffentlichen hier im Forum ...
... denke bitte noch daran, den MOD im ersten Post immer auf dem aktuellen Stand zu halten ...