Template:Bielefeld Recipes 2010

From 2010.igem.org

(Difference between revisions)
(New page: <html> <script> $(document).ready( function(){ $('#recipe_container').append("Welcome, "+wgUserName+". I know you are logged in!"); } ); </script> <div id="recipe_container"></div> </htm...)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<STYLE type='text/css'>
 +
.compatibility_div ul,
 +
.compatibility_div li {
 +
display: inline;
 +
}
 +
.compatibility_div li {
 +
position: relative;
 +
padding-top: 2px;
 +
padding-left:4px;
 +
padding-right:3px;
 +
margin-right:2px;
 +
margin-bottom: 5px;
 +
}
 +
.compatibility_div .box {
 +
top:  35px;
 +
width: 200px;
 +
left:  0px;
 +
}
 +
.compatibility_div .box_white {
 +
border: 1px solid gray;
 +
background-color: white;
 +
}
 +
.compatibility_div .box_red {
 +
border: 1px solid #dd6666;
 +
background-color: #ffcccc;
 +
background-image: url('http://partsregistry.org/images/red_not/red_box.png');
 +
background-repeat: none;
 +
}
 +
.compatibility_div .box_green {
 +
border: 1px solid #44ee44;
 +
background-color: #aaffaa;
 +
}
 +
.reviews {
 +
    float:right;
 +
    width:140px;
 +
    margin-right:20px;
 +
}
 +
.reviews .review_box {
 +
    position:relative;
 +
    padding: 2px 5px 5px 5px;
 +
    border:1px solid #aaa;
 +
    font-size:85%;
 +
    cursor: pointer;
 +
}
 +
.reviews .histogram {
 +
    position:absolute;
 +
    z-index:100;
 +
    height:9px;
 +
    left:15px;
 +
    top:3px;
 +
}
 +
 +
</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(){
 +
if(wgUserName != null){
  $('#recipe_container').append("Welcome, "+wgUserName+". I know you are logged in!");
  $('#recipe_container').append("Welcome, "+wgUserName+". I know you are logged in!");
 +
} else {
 +
$('#recipe_container').append("Please log in. Guests can neither submit nor vote.");
}
}
 +
 +
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"));
 +
            }
 +
        );
 +
    });
 +
}
 +
 +
);
);
 +
 +
function recipes(recipeList){
 +
var statusHTML = "";
 +
  for (var i=0; i<recipeList.length-1; i++) {
 +
    var rid = recipeList[i].rid;
 +
    var author = recipeList[i].author;
 +
    var title = recipeList[i].title;
 +
    var text = recipeList[i].text;
 +
    var taste = recipeList[i].taste;
 +
    var comments = recipeList[i].comments;
 +
 +
    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('<div id="recipeCompatibility_'+i+'" class="compatibility_div" style="display:inline;"></div>');
 +
          $('#recipeCompatibility_'+i).append("<p>Taste Compatibilty:</p>");
 +
          $('#recipeCompatibility_'+i).append('<ul id="taste_ul_'+i+'"></ul>');
 +
              $('#taste_ul_'+i).append("<LI id='taste_li_"+i+"_"+1+"' class='boxctrl box_red'>sweet<DIV class='box'<DIV>Where I come from, we say CANDY.</div></div></LI><LI id='taste_li_"+i+"_"+2+"' class='boxctrl box_red'>mild<DIV class='box'><DIV>My toast was better flavored.</div></div></LI><LI id='taste_li_"+i+"_"+3+"' class='boxctrl box_red'>spiced<DIV class='box'><DIV>I found traces of spice.</div></div></LI><LI id='taste_li_"+i+"_"+4+"' class='boxctrl box_red'>hot<DIV class='box'><DIV>Yay! That was hot!</div></div></LI><LI id='taste_li_"+i+"_"+5+"' class='boxctrl box_red'>burnin'<DIV class='box'><DIV>Can't... talk... *snief*</div></div></LI>");
 +
              $('#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>
<div id="recipe_container"></div>
<div id="recipe_container"></div>
</html>
</html>

Latest revision as of 13:46, 4 October 2010

Retrieved from "http://2010.igem.org/Template:Bielefeld_Recipes_2010"