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