Template:Bielefeld Recipes 2010

From 2010.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 32: Line 32:
background-color: #aaffaa;
background-color: #aaffaa;
}
}
-
#reviews {
+
.reviews {
     float:right;
     float:right;
     width:140px;
     width:140px;
     margin-right:20px;
     margin-right:20px;
}
}
-
#reviews .review_box {
+
.reviews .review_box {
     position:relative;
     position:relative;
     padding: 2px 5px 5px 5px;
     padding: 2px 5px 5px 5px;
Line 44: Line 44:
     cursor: pointer;
     cursor: pointer;
}
}
-
#reviews .histogram {
+
.reviews .histogram {
     position:absolute;
     position:absolute;
     z-index:100;
     z-index:100;
Line 53: Line 53:
</STYLE>
</STYLE>
 +
    <script src='http://www.igem-bielefeld.de/recipes/inserts.js' type="text/javascript" language="javascript"></script>
 +
    <script src='http://www.igem-bielefeld.de/includes/star-rating/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
 +
    <script src='http://www.igem-bielefeld.de/includes/star-rating/jquery.rating.js' type="text/javascript" language="javascript"></script>
 +
    <link href='http://www.igem-bielefeld.de/includes/star-rating/jquery.rating.css' type="text/css" rel="stylesheet"/>
<script>
<script>
$(document).ready(
$(document).ready(
 +
function(){
function(){
Line 65: Line 70:
getRecipes();
getRecipes();
-
 
+
$(".form_c").submit(function(event){
 +
        var form_id = event.target.id;
 +
    $.get(
 +
            "http://www.igem-bielefeld.de/recipes/comment.php",
 +
            {rid: $("#"+form_id+" #rid").val() ,author:$("#"+form_id+" #author").val(),title:$("#"+form_id+" #title").val(),text:$("#"+form_id+" #text").val()},
 +
            function(data){
 +
                alert($("#"+form_id).attr("id"));
 +
            }
 +
        );
 +
    });
}
}
 +
 +
);
);
Line 72: Line 88:
var statusHTML = "";
var statusHTML = "";
   for (var i=0; i<recipeList.length-1; i++) {
   for (var i=0; i<recipeList.length-1; i++) {
 +
    var rid = recipeList[i].rid;
     var author = recipeList[i].author;
     var author = recipeList[i].author;
     var title = recipeList[i].title;
     var title = recipeList[i].title;
     var text = recipeList[i].text;
     var text = recipeList[i].text;
     var taste = recipeList[i].taste;
     var taste = recipeList[i].taste;
 +
    var comments = recipeList[i].comments;
-
       $('#recipe_container').append('<a name="'+title+'"></a><h3> <span class="mw-headline"> <b>'+title+'</b> </span></h3>');
+
    var r0 = recipeList[i].r0 * 1;
 +
    var r1 = recipeList[i].r1 * 1;
 +
    var r2 = recipeList[i].r2 * 1;
 +
    var r3 = recipeList[i].r3 * 1;
 +
    var r4 = recipeList[i].r4 * 1;
 +
    var r5 = recipeList[i].r5 * 1;
 +
 
 +
    var rSum = r0+r1+r2+r3+r4+r5;
 +
 
 +
 
 +
       $('#recipe_container').append('<a name="'+title+'"></a><h3 style="clear:both;"> <span class="mw-headline"> <b>'+title+'</b> </span></h3>');
       $('#recipe_container').append(text);
       $('#recipe_container').append(text);
       $('#recipe_container').append('<div id="recipeCompatibility_'+i+'" class="compatibility_div" style="display:inline;"></div>');
       $('#recipe_container').append('<div id="recipeCompatibility_'+i+'" class="compatibility_div" style="display:inline;"></div>');
Line 85: Line 113:
               $('#taste_li_'+i+'_'+taste).removeClass('box_red').addClass('box_green');
               $('#taste_li_'+i+'_'+taste).removeClass('box_red').addClass('box_green');
-
  }
+
        $('#recipe_container').append("<div id='reviews_"+i+"' class='reviews'></div>");
 +
          $('#reviews_'+i).append("<div id='reviewBox_"+i+"' class='review_box' title='Other chefs voted...'></div>");
 +
              $('#reviewBox_'+i).append("<div id='reviewVoting_"+i+"' style='height:14px;padding-left:15px;margin-bottom:4px;'></div>");
 +
                  $('#reviewVoting_'+i).append("<form id='reviewForm_"+i+"' name='"+rid+"'></form>");
 +
                    $('#reviewForm_'+i).append('<input class="auto-submit-star" type="radio" name="recipeRating_'+i+'" value="1"/>');
 +
                    $('#reviewForm_'+i).append('<input class="auto-submit-star" type="radio" name="recipeRating_'+i+'" value="2"/>');
 +
                    $('#reviewForm_'+i).append('<input class="auto-submit-star" type="radio" name="recipeRating_'+i+'" value="3"/>');
 +
                    $('#reviewForm_'+i).append('<input class="auto-submit-star" type="radio" name="recipeRating_'+i+'" value="4"/>');
 +
                    $('#reviewForm_'+i).append('<input class="auto-submit-star" type="radio" name="recipeRating_'+i+'" value="5"/>');
 +
          $('#reviewBox_'+i).append("<div style='height:11px;background-color:#ffffff; border:1px solid gray;text-align:center;line-height:12px;'>Experience: </div>");
 +
              $('#reviewBox_'+i).append("<div id='review5_"+i+"' style='position:relative;width:110px;height:10px'>5</div>");
 +
                $('#review5_'+i).append("<div class='histogram' style='width:60px; background-color:#9999ff'></div>");
 +
                $('#review5_'+i).append("<div class='histogram' style='width:"+(60*r5/rSum)+"px; background-color:#4444ff'></div>");
 +
                $('#review5_'+i).append("<div style='position:absolute;top:0px;right:5px;'>("+r5+")</div>");
 +
 +
              $('#reviewBox_'+i).append("<div id='review4_"+i+"' style='position:relative;width:110px;height:10px'>4</div>");
 +
                $('#review4_'+i).append("<div class='histogram' style='width:60px; background-color:#9999ff'></div>");
 +
                $('#review4_'+i).append("<div class='histogram' style='width:"+(60*r4/rSum)+"px; background-color:#4444ff'></div>");
 +
                $('#review4_'+i).append("<div style='position:absolute;top:0px;right:5px;'>("+r4+")</div>");
 +
 +
              $('#reviewBox_'+i).append("<div id='review3_"+i+"' style='position:relative;width:110px;height:10px'>3</div>");
 +
                $('#review3_'+i).append("<div class='histogram' style='width:60px; background-color:#9999ff'></div>");
 +
                $('#review3_'+i).append("<div class='histogram' style='width:"+(60*r3/rSum)+"px; background-color:#4444ff'></div>");
 +
                $('#review3_'+i).append("<div style='position:absolute;top:0px;right:5px;'>("+r3+")</div>");
 +
 +
              $('#reviewBox_'+i).append("<div id='review2_"+i+"' style='position:relative;width:110px;height:10px'>2</div>");
 +
                $('#review2_'+i).append("<div class='histogram' style='width:60px; background-color:#9999ff'></div>");
 +
                $('#review2_'+i).append("<div class='histogram' style='width:"+(60*r2/rSum)+"px; background-color:#4444ff'></div>");
 +
                $('#review2_'+i).append("<div style='position:absolute;top:0px;right:5px;'>("+r2+")</div>");
 +
 +
              $('#reviewBox_'+i).append("<div id='review1_"+i+"' style='position:relative;width:110px;height:10px'>1</div>");
 +
                $('#review1_'+i).append("<div class='histogram' style='width:60px; background-color:#9999ff'></div>");
 +
                $('#review1_'+i).append("<div class='histogram' style='width:"+(60*r1/rSum)+"px; background-color:#4444ff'></div>");
 +
                $('#review1_'+i).append("<div style='position:absolute;top:0px;right:5px;'>("+r1+")</div>");
 +
    $('#recipe_container').append( "<br />"+insert_form_comment(rid,comments) );
 +
  } // for-Schleife Ende
}
}
 +
 +
$(function(){
 +
$('.auto-submit-star').rating({
 +
  callback: function(value, link){
 +
  // 'this' is the hidden form element holding the current value
 +
  // 'value' is the value selected
 +
  // 'element' points to the link element that received the click.
 +
  alert("The value in " + this.form.name + " selected was '" + value + "'\n\nWith this callback function I can automatically submit the form with this code:\nthis.form.submit();");
 +
 
 +
  $.get(
 +
            "http://www.igem-bielefeld.de/recipes/rate.php",
 +
            {stars: value, rid: this.form.name, author:wgUserName},
 +
            function(data){
 +
                alert($("#"+form_id).attr("id"));
 +
            }
 +
        );
 +
 +
  // To submit the form automatically:
 +
  //this.form.submit();
 +
 
 +
  // To submit the form via ajax:
 +
  //$(this.form).ajaxSubmit();
 +
  }
 +
});
 +
});
</script>
</script>
<script type="text/javascript" src="http://www.igem-bielefeld.de/recipes/recipes.php" ></script>
<script type="text/javascript" src="http://www.igem-bielefeld.de/recipes/recipes.php" ></script>
<div id="recipe_container"></div>
<div id="recipe_container"></div>
</html>
</html>

Latest revision as of 13:46, 4 October 2010