"
Template:Bielefeld Recipes 2010
From 2010.igem.org
(Difference between revisions)
| Line 32: | Line 32: | ||
background-color: #aaffaa; | background-color: #aaffaa; | ||
} | } | ||
| - | + | .reviews { | |
float:right; | float:right; | ||
width:140px; | width:140px; | ||
margin-right:20px; | margin-right:20px; | ||
} | } | ||
| - | + | .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 { | |
position:absolute; | position:absolute; | ||
z-index:100; | z-index:100; | ||
| Line 53: | Line 53: | ||
</STYLE> | </STYLE> | ||
| + | <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( | ||
| Line 85: | Line 88: | ||
$('#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+"'></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:28.875px; background-color:#4444ff'></div>"); | ||
| + | $('#review5_'+i).append("<div style='position:absolute;top:0px;right:5px;'>(77)</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:7.875px; background-color:#4444ff'></div>"); | ||
| + | $('#review4_'+i).append("<div style='position:absolute;top:0px;right:5px;'>(21)</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:16.5px; background-color:#4444ff'></div>"); | ||
| + | $('#review3_'+i).append("<div style='position:absolute;top:0px;right:5px;'>(44)</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:4.875px; background-color:#4444ff'></div>"); | ||
| + | $('#review2_'+i).append("<div style='position:absolute;top:0px;right:5px;'>(13)</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:1.875px; background-color:#4444ff'></div>"); | ||
| + | $('#review1_'+i).append("<div style='position:absolute;top:0px;right:5px;'>(5)</div>"); | ||
| + | |||
| + | } // 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.id + " selected was '" + value + "'\n\nWith this callback function I can automatically submit the form with this code:\nthis.form.submit();"); | ||
| + | |||
| + | // 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> | ||
Revision as of 21:27, 9 September 2010
