(16 intermediate revisions by 4 users not shown) | |||
Line 37: | Line 37: | ||
} | } | ||
− | .mydescription.myMedium:hover{ | + | .mydescription:not(#Benjamin).myMedium:hover{ |
animation: expandCardMedium 0.5s; | animation: expandCardMedium 0.5s; | ||
animation-fill-mode: forwards; | animation-fill-mode: forwards; | ||
Line 273: | Line 273: | ||
</div> | </div> | ||
<div class="content"> | <div class="content"> | ||
− | <p class="header"> | + | <p class="header">Ludwig Bauer</p> |
<div class="meta"> | <div class="meta"> | ||
<p><span class="date">Master Biochemistry (TUM)</span><br>Age: 22<br>Origin: Erding, Germany</p> | <p><span class="date">Master Biochemistry (TUM)</span><br>Age: 22<br>Origin: Erding, Germany</p> | ||
Line 283: | Line 283: | ||
</div> | </div> | ||
<p> | <p> | ||
− | <b>Favorite thing about iGEM:</b> Learning about new things that are not directly related to my biochemistry studies.<br> | + | <b>Favorite thing about iGEM:</b> Learning about new things that are not directly related to my biochemistry studies and working in a multidisciplinary team.<br> |
<b>Scientific Interests:</b> Biological and natural products chemistry<br> | <b>Scientific Interests:</b> Biological and natural products chemistry<br> | ||
− | <b>Fun Fact:</b> He | + | <b>Fun Fact:</b> He keep smiling even in stressful situations.<br> |
− | <b>What makes you happy:</b> A large | + | <b>What makes you happy:</b> A large peak when purifying proteins.<br> |
− | <b>Role Model:</b> | + | <b>Role Model:</b> M. T. Cicero |
</p> | </p> | ||
</div> | </div> | ||
Line 452: | Line 452: | ||
<p class="header">Julian Reinhard</p> | <p class="header">Julian Reinhard</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">Bachelor Bioinformatics (LMU + TUM)</span><br>Age: 25<br>Origin: Bruchsal, Germany</p> | + | <p><span class="date">Bachelor Bioinformatics, Molecular Biotech. (LMU + TUM)</span><br>Age: 25<br>Origin: Bruchsal, Germany</p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 462: | Line 462: | ||
<b>Favorite thing about iGEM:</b> Trying and mixing new experimental protocols.<br> | <b>Favorite thing about iGEM:</b> Trying and mixing new experimental protocols.<br> | ||
<b>Scientific Interests:</b> Structural Bioinformatics and Systems Biology.<br> | <b>Scientific Interests:</b> Structural Bioinformatics and Systems Biology.<br> | ||
− | <b>Fun Fact:</b> Developed | + | <b>Fun Fact:</b> Developed RNase anxiety disorder during iGEM.<br> |
<b>What makes you happy:</b> Getting things to (finally!) work.<br> | <b>What makes you happy:</b> Getting things to (finally!) work.<br> | ||
<b>Role Model:</b> Craig Venter. | <b>Role Model:</b> Craig Venter. | ||
Line 619: | Line 619: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="ui card | + | <div class="ui card"> |
<div class="image"> | <div class="image"> | ||
<img src="https://static.igem.org/mediawiki/2017/0/04/T--Munich--ProfilePicture_Benjamin.jpg"> | <img src="https://static.igem.org/mediawiki/2017/0/04/T--Munich--ProfilePicture_Benjamin.jpg"> | ||
</div> | </div> | ||
− | <div class="content"> | + | <div onmouseenter="toggleCard($('#Benjamin'))" onmouseleave="toggleCard($('#Benjamin'))" class="content"> |
<p class="header">Benjamin Aleritsch</p> | <p class="header">Benjamin Aleritsch</p> | ||
<div class="meta"> | <div class="meta"> | ||
Line 629: | Line 629: | ||
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
− | <div class="mydescription myMedium" > | + | <div class="mydescription myMedium" id="Benjamin"> |
<div class="threeDots-container"> | <div class="threeDots-container"> | ||
<img alt ="three dots" src="https://static1.squarespace.com/static/5654cf16e4b00b463710ff91/t/56568104e4b0509ba9df9296/1448509701389/?format=750w"> | <img alt ="three dots" src="https://static1.squarespace.com/static/5654cf16e4b00b463710ff91/t/56568104e4b0509ba9df9296/1448509701389/?format=750w"> | ||
Line 668: | Line 668: | ||
<p class="header">Dong-Jiunn Jeffery Truong</p> | <p class="header">Dong-Jiunn Jeffery Truong</p> | ||
<div class="meta"> | <div class="meta"> | ||
− | <p><span class="date">PhD student | + | <p><span class="date">PhD student developing Molecular Tools for Non-Invasive Imaging and Actuation</span></p> |
</div> | </div> | ||
<div class="description" > | <div class="description" > | ||
Line 676: | Line 676: | ||
</div> | </div> | ||
<p> | <p> | ||
− | + | Jeff studied Molecular Biotechnology at TUM and is doing his PhD at the Helmholtz Zentrum München, where he is engineering molecular systems to control and observe cellular processes with different stimuli | |
− | like light, magnetic fields, and sound. | + | like light, magnetic fields, and sound. As an iGEM veteran, his experiences in the competition and the work |
dynamic have been very valuable, just like his knowledge in synthetic biology and biological engineering | dynamic have been very valuable, just like his knowledge in synthetic biology and biological engineering | ||
provided us with great ideas for our project. | provided us with great ideas for our project. | ||
Line 923: | Line 923: | ||
</td><td height="25" bgcolor=#ffffff></td></tr> | </td><td height="25" bgcolor=#ffffff></td></tr> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | $(".card").click(function(){ | ||
+ | |||
+ | $(this).toggleClass("locked"); | ||
+ | |||
+ | }); //With this click function, the locked class is added. Locked is simply use for a boolean expression no determine whether the animation on mouse hover should be trigger (see toggleCard). | ||
+ | |||
+ | var initialheight = $(".mydescription").css("height"); // We save the initialheight of any card (they all should have the same inital height) so we can use its value to reset the height once the card is deactivated. | ||
+ | |||
+ | function debugging(){ | ||
+ | alert(initialheight); | ||
+ | |||
+ | } | ||
+ | |||
+ | function toggleCard(object){ | ||
+ | |||
+ | if(!(object.parents().hasClass("locked"))){ | ||
+ | |||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | object.addClass("card-active"); | ||
+ | |||
+ | object.animate({ | ||
+ | |||
+ | height: 360 | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | if((object.hasClass("card-active"))){ | ||
+ | |||
+ | object.clearQueue(); | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | object.removeClass("card-active"); | ||
+ | |||
+ | object.animate({ | ||
+ | |||
+ | height: initialheight | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | |||
+ | object.clearQueue(); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } //Toggle function. Changes the card to its active, inactive state by using the animate function to gradually change its height to match that of the p (active) or to become initalheight (inactive). Adds the card-active class at the end to change the other css properties that do not require animation. | ||
+ | |||
+ | function toggleCardSudden(object){ | ||
+ | if(!(object.hasClass("card-active"))){ | ||
+ | if(object.attr("id")=="Dali") { | ||
+ | $("#DaliF").attr("src","https://scontent.xx.fbcdn.net/v/t31.0-8/19488772_1328753460507879_5404459836438295641_o.jpg?oh=42fee72c3e799515ca59f9a20809b612&oe=5A070989"); | ||
+ | |||
+ | |||
+ | }/* TODO: Delete this later and implement it in an good way. */ | ||
+ | object.animate({ | ||
+ | |||
+ | height: object.children("p").css("height") | ||
+ | |||
+ | },500, function(){ | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | if(object.attr("id")=="Dali") { | ||
+ | $("#DaliF").attr("src","D:\\Documentos\\IGEM\\wiki\\ProfileFotos\\Dali.jpg"); | ||
+ | |||
+ | |||
+ | }/* TODO: Delete this later and implement it in an good way. */ | ||
+ | object.css("height",initialheight); | ||
+ | } | ||
+ | |||
+ | object.toggleClass("card-active"); | ||
+ | } | ||
+ | |||
+ | |||
+ | function and(a, b){ | ||
+ | return (!(!(a || a) || !(b || b))); | ||
+ | } //Calculates the value of a and b, because why should the &&; operator work? | ||
+ | |||
+ | $('.dropdown').dropdown({on:'hover'}); | ||
+ | |||
+ | </script> | ||
</table></body></html> | </table></body></html> |
Latest revision as of 18:23, 15 December 2017