Team:Johns Hopkins-Wetware/Team
From 2012.igem.org
(Difference between revisions)
(Prototype team page) |
|||
Line 1: | Line 1: | ||
- | + | <html></div></div></div></div></div></div></p> | |
- | < | + | <head> |
- | < | + | <title>JHU iGEM 2012 Team</title> |
- | < | + | <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2012/b/be/Bluejay_2_32x32x32.pngo"> |
- | + | <link rel="stylesheet" type="text/css" href="https://2012.igem.org/Team:Johns_Hopkins-Wetware/templates/css/style?action=raw&ctype=text/css" /> | |
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> |
+ | <!--This jquery stuff is going to be moved to its own file--> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <!--Changes the name and description on mouseover of the portraits--> | |
- | + | <script type="text/javascript"> | |
- | + | $(document).ready(function(){ | |
- | + | ||
- | + | var names = ["<div class='content' id='name'>James Chuang</div>", | |
- | + | "<div class='content' id='name'>Anne Marie Noronha</div>", | |
- | + | "<div class='content' id='name'>Jake Kim</div>", | |
- | + | "<div class='content' id='name'>Jerry Wang</div>", | |
- | + | "<div class='content' id='name'>Margo Heston</div>", | |
- | + | "<div class='content' id='name'>Scott Tan</div>", | |
- | + | "<div class='content' id='name'>Andy Tu</div>", | |
+ | "<div class='content' id='name'>Daniel Wolozny</div>", | ||
+ | "<div class='content' id='name'>Dr. Leslie Mitchell</div>", | ||
+ | "<div class='content' id='name'>Dr. Yizhi 'Patrick' Cai</div>", | ||
+ | "<div class='content' id='name'>Dr. Giovanni Stracquadanio</div>", | ||
+ | "<div class='content' id='name'>Dr. Shigehito Ikushima</div>", | ||
+ | "<div class='content' id='name'>Dr. Jef Boeke</div>", | ||
+ | "<div class='content' id='name'>Dr. Takanari Inoue</div>", | ||
+ | "<div class='content' id='name'>Dr. Karen Zeller</div>", | ||
+ | "<div class='content' id='name'>Dr. Debra Mathews</div>", | ||
+ | "<div class='content' id='name'>Dr. Marc Ostermeier</div>", | ||
+ | "<div class='content' id='name'>Dr. Joel Bader</div>",]; | ||
+ | var descriptions = ["<p id = 'infobox_content'>James Chuang</p>", | ||
+ | "<p id = 'infobox_content'>Anne Marie Noronha</p>", | ||
+ | "<p id = 'infobox_content'>Jake Kim</p>", | ||
+ | "<p id = 'infobox_content'>Jerry Wang</p>", | ||
+ | "<p id = 'infobox_content'>Margo Heston</p>", | ||
+ | "<p id = 'infobox_content'>Scott Tan</p>", | ||
+ | "<p id = 'infobox_content'>Andy Tu</p>", | ||
+ | "<p id = 'infobox_content'>Daniel Wolozny</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Leslie Mitchell</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Yizhi 'Patrick' Cai</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Giovanni Stracquadanio</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Shigehito Ikushima</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Jef Boeke</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Takanari Inoue</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Karen Zeller</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Debra Mathews</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Marc Ostermeier</p>", | ||
+ | "<p id = 'infobox_content'>Dr. Joel Bader</p>",]; | ||
+ | |||
- | + | $(".portrait").each(function(i){ | |
- | + | $(this).attr("picindex",i); | |
- | + | }); | |
- | + | ||
+ | $(".portrait").mouseover(function(){ | ||
+ | var picnum = $(this).attr("picindex"); | ||
+ | $("#name").replaceWith(names[picnum]); | ||
+ | |||
+ | $("#infobox_content").replaceWith(descriptions[picnum]); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <!--<script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $(".portrait").addClass("minportrait"); | ||
+ | $(".portrait").hover( | ||
+ | function(){ | ||
+ | $(this).animate({ | ||
+ | width: "190px", | ||
+ | height: "254px" | ||
+ | }, 100); | ||
+ | }, | ||
+ | function(){ | ||
+ | $(this).animate({ | ||
+ | width: "152px", | ||
+ | height: "203px" | ||
+ | }, 100); | ||
+ | } | ||
+ | ); | ||
+ | }) | ||
+ | </script>--> | ||
- | + | </head> | |
- | + | <body> | |
- | + | <div id="global_container"> | |
- | + | <div id="header"> | |
- | + | <div id="header_logo"> | |
- | + | <a href="index.html"><img src="images/header.png"/></a> | |
- | + | </div> <!--end div header_logo--> | |
- | + | <ul id="navbar"> | |
- | + | <li><a href="team.html">team</a> | |
- | + | </li> | |
- | + | <li><a href="lightproject.html">projects</a> | |
- | + | <ul> | |
- | + | <li><a href="summary.html">At a Glance</a></li> | |
- | + | <li><a href="etohproject.html">Ethanol control</a></li> | |
- | + | <li><a href="lightproject.html">Optogenetic control</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="lightnotebook.html">notebooks</a> | |
- | + | <ul> | |
- | + | <li><a href="lightnotebook.html">Optogenetic control</a></li> | |
- | < | + | <li><a href="etohnotebook.html">Ethanol control</a></li> |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="standard.html">Golden Gate</a> | |
- | + | </li> | |
- | + | <li><a href="humanpractice.html">human practice</a> | |
- | + | <li><a href="safety.html">safety</a> | |
- | + | </li> | |
- | </ | + | </ul> |
- | + | </div> <!--end div header--> | |
- | + | <div class="content_container"> | |
- | == | + | <div class= "content_header"> |
- | + | <img src="images/team-header.png" alt="The Team"/> | |
- | + | </div> | |
- | + | <div class="content center_align"> | |
- | + | <img class="portrait" src="images/profile-jc.png" alt=""/> | |
- | == | + | <img class="portrait" src="images/profile-mh.png" alt=""/> |
+ | <img class="portrait" src="images/profile-jw.png" alt=""/> | ||
+ | <img class="portrait" src="images/profile-jk.png" alt=""/> | ||
+ | <img class="portrait" src="images/profile-st.png" alt=""/> | ||
+ | <img class="portrait" src="images/profile-amn.png" alt=""/> | ||
+ | <img class="portrait" src="images/profile-at.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-dw.jpg" alt=""/> | ||
+ | </div> | ||
+ | <div class="content" id="name"> | ||
+ | Mouseover for more | ||
+ | </div> | ||
+ | <br><br> | ||
+ | |||
+ | <div class="content_header"> | ||
+ | <img src="images/advisors.png" alt="Advisors"/> | ||
+ | </div> | ||
+ | <div class="content center_align"> | ||
+ | <img class="portrait" src="images/profile-lm.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-pc.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-gs.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-si.png" alt=""/> | ||
+ | <img class="portrait" src="images/profile-jb.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-ti.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-dm.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/profile-mo.jpg" alt=""/> | ||
+ | <img class="portrait" src="images/bader.jpg" alt=""/> | ||
+ | </div> | ||
+ | <div class="content" id= "infobox_content"> | ||
+ | <p> Mouseover for more</p> | ||
+ | </div> | ||
+ | <br><br> | ||
+ | <div class="content_header"> | ||
+ | <img src="images/Attributions.png" alt="Attributions"/> | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | This is a required section. | ||
+ | </div> | ||
+ | <div class="content_header"> | ||
+ | </div> | ||
+ | </div> <!--end div content_container--> | ||
+ | </div> <!--end div global_container--> | ||
+ | </body> | ||
+ | </html> |