Team:Marburg SYNMIKRO/Team
From 2012.igem.org
(Difference between revisions)
(→Teambilder) |
|||
Line 1: | Line 1: | ||
{{:Team:Marburg_SYNMIKRO:Template:Header}} | {{:Team:Marburg_SYNMIKRO:Template:Header}} | ||
+ | <html> | ||
+ | <style type="text/css"> | ||
+ | #people{ | ||
+ | border: hidden 0px; | ||
+ | border-bottom: black dotted 1px; | ||
+ | background: transparent; | ||
+ | color: darkblue; | ||
+ | width:169px; | ||
+ | text-align: right; | ||
+ | } | ||
- | { | + | #container{ |
- | + | height: 623px; | |
- | + | width: 798px; | |
- | + | position: relative; | |
- | + | margin-left:50%; | |
- | + | left:-284px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
+ | #linkcontainer{ | ||
+ | height: 523px; | ||
+ | width: 171px; | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | text-align: right; | ||
+ | border-top: black dotted 1px; | ||
+ | } | ||
+ | #image{ | ||
+ | height: 543px; | ||
+ | width: 282px; | ||
+ | border-left: black dotted 1px; | ||
+ | border-right: black dotted 1px; | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | } | ||
+ | #infobox{ | ||
+ | height: 523px; | ||
+ | width: 336px; | ||
+ | float:right; | ||
+ | position:relative; | ||
+ | padding-left:5px; | ||
+ | } | ||
- | + | #al{ | |
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-top: 10px solid transparent; | ||
+ | border-bottom: 10px solid transparent; | ||
+ | border-right:10px solid black; | ||
+ | border-left:0px white; | ||
+ | background: white; | ||
+ | position:relative; | ||
+ | bottom: 60px; | ||
+ | right:111px; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | #ar{ | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-top: 10px solid transparent; | ||
+ | border-bottom: 10px solid transparent; | ||
+ | border-left:10px solid black; | ||
+ | border-right:0px white; | ||
+ | background: white; | ||
+ | position:relative; | ||
+ | bottom: 60px; | ||
+ | left:111px; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | #hd{ | ||
+ | height:91px; | ||
+ | width: 163px; | ||
+ | } | ||
+ | |||
+ | #td{ | ||
+ | position: relative; | ||
+ | height:197px; | ||
+ | } | ||
+ | |||
+ | #ld{ | ||
+ | position: relative; | ||
+ | height:235px; | ||
+ | } | ||
+ | #bs { | ||
+ | background: black; | ||
+ | color:white; | ||
+ | border: 1px dashed white; | ||
+ | width:284px; | ||
+ | position:relative; | ||
+ | left:-1px; | ||
+ | } | ||
- | + | </style> | |
- | + | <script src="http://web383.mis60.de/inprogress/teambilder/js/jquery.cycle.all.js"></script> | |
- | + | <script type="text/javascript"> | |
+ | infos = new Array( | ||
+ | "<b>Michael Bölker</b><br><br>Age: -<br><br>Studies: <br>-<br><br> Semester: -<br><br> iGEM team role:<br> -", | ||
+ | "<b>Oliver Schauer</b><br><br>Age: 25<br><br>Studies: <br>MSc. Molecular and Cellular Biology (Microbiology)<br><br> Semester: 2<br><br> iGEM team role:<br> labwork, SYNMIKRO commissioner, presentation", | ||
+ | "<b>Daniel Kleinsorge</b><br><br>Age: 24<br><br>Studies: <br>MSc. Biology<br><br> Semester: 2<br><br> iGEM team role:<br>lab leader, wiki", | ||
+ | "<b>Marian Vogt</b><br><br>Age: 22<br><br>Studies: <br>BSc. Biology <br><br> Semester: 4<br><br> iGEM team role:<br> secretary, labwork", | ||
+ | "<b>Agnieszka Zarzycka</b><br><br>Age: 24<br><br>Studies: <br>MSc. Biology<br><br> Semester: 2<br><br> iGEM team role:<br>presentation", | ||
+ | "<b>Oliver Leicht</b><br><br>Age: -<br><br>Studies: <br>-<br><br> Semester: 2<br><br> iGEM team role:<br> -", | ||
+ | "<b>Margarita Derbenev</b><br><br>Age: 24<br><br>Studies: <br>BSc. Biology <br><br> Semester: 6<br><br> iGEM team role:<br> some poster design assistance, human practices, labwork", | ||
+ | "<b>Elisabeth Ignatz</b><br><br>Age: 24<br><br>Studies: <br>MSc. Biology <br><br> Semester: 2<br><br> iGEM team role:<br> labwork", | ||
+ | "<b>Julian Pechstein</b><br><br>Age: 24<br><br>Studies: <br>MSc. Molecular and Cellular Biology (Virology)<br><br> Semester: 2<br><br> iGEM team role:<br> labwork", | ||
+ | "<b>Johannes Schuh</b><br><br>Age: 25<br><br>Studies: <br>MSc. Molecular and Cellular Biology (Neurobiology)<br><br> Semester: 2<br><br> iGEM team role:<br> wiki maintenance, technical support", | ||
+ | "<b>Max Diesner</b><br><br>Age: 25<br><br>Studies: <br>MSc. Molecular and Cellular Biology (Neurobiology)<br><br> Semester: 4<br><br> iGEM team role:<br>some poster design assistance, wiki maintenance, technical support", | ||
+ | "<b>Svetlana Uscherenko</b><br><br>Age: 25<br><br>Studies: <br>MSc. Biology (Genetics)<br><br> Semester: 2<br><br> iGEM team role:<br>treasurer, labwork" | ||
+ | ); | ||
+ | var numpeople=12; | ||
+ | var headnum=0; | ||
+ | var torsonum=0; | ||
+ | var legsnum=0; | ||
+ | var i=0; | ||
+ | var headimages=""; | ||
+ | var torsoimages=""; | ||
+ | var legsimages=""; | ||
+ | $(function() { | ||
+ | for (i=0; i<numpeople; i++) | ||
+ | { | ||
+ | headimages=headimages + "<img border='0' src='http://web383.mis60.de/inprogress/teambilder/" + i + "a.png' width='163' height='91'> "; | ||
+ | torsoimages=torsoimages + "<img border='0' src='http://web383.mis60.de/inprogress/teambilder/" + i + "b.png' width='163' height='197'> "; | ||
+ | legsimages=legsimages + "<img border='0' src='http://web383.mis60.de/inprogress/teambilder/" + i + "c.png' width='163' height='235'> "; | ||
+ | } | ||
+ | document.getElementById("s1").innerHTML=(headimages); | ||
+ | document.getElementById("s2").innerHTML=(torsoimages); | ||
+ | document.getElementById("s3").innerHTML=(legsimages); | ||
- | |||
- | + | $('#s1').cycle({ | |
- | + | fx: 'scrollHorz', | |
- | + | speed: 300, | |
+ | timeout: 0, | ||
+ | }); | ||
+ | $('#s2').cycle({ | ||
+ | fx: 'scrollHorz', | ||
+ | speed: 300, | ||
+ | timeout: 0, | ||
+ | }); | ||
+ | $('#s3').cycle({ | ||
+ | fx: 'scrollHorz', | ||
+ | speed: 300, | ||
+ | timeout: 0, | ||
+ | }); | ||
+ | |||
+ | |||
+ | }); | ||
- | |||
- | + | function headleft() | |
- | + | { | |
- | + | if(headnum==0){ | |
- | + | headnum=(numpeople-1); | |
- | + | $('#s1').cycle('prev'); | |
- | + | } | |
- | + | else{ | |
+ | headnum=(headnum-1); | ||
+ | $('#s1').cycle(headnum); | ||
+ | } | ||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | } | ||
+ | function headright() | ||
+ | { | ||
+ | if(headnum==(numpeople-1)){ | ||
+ | headnum=0; | ||
+ | $('#s1').cycle('next'); | ||
+ | } | ||
+ | else{ | ||
+ | headnum=(headnum+1); | ||
+ | $('#s1').cycle(headnum); | ||
+ | } | ||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | } | ||
- | + | function torsoleft() | |
- | + | { | |
- | + | if(torsonum==0){ | |
- | + | torsonum=(numpeople-1); | |
- | + | $('#s2').cycle('prev'); | |
- | + | } | |
- | + | else{ | |
- | + | torsonum=(torsonum-1); | |
- | + | $('#s2').cycle(torsonum); | |
- | + | } | |
- | + | document.getElementById("infobox").innerHTML=(""); | |
+ | } | ||
- | == ''' | + | function torsoright() |
+ | { | ||
+ | if(torsonum==(numpeople-1)){ | ||
+ | torsonum=0; | ||
+ | $('#s2').cycle('next'); | ||
+ | } | ||
+ | else{ | ||
+ | torsonum=(torsonum+1); | ||
+ | $('#s2').cycle(torsonum); | ||
+ | } | ||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | } | ||
- | ( | + | function legsleft() |
+ | { | ||
+ | if(legsnum==0){ | ||
+ | legsnum=(numpeople-1); | ||
+ | $('#s3').cycle('prev'); | ||
+ | } | ||
+ | else{ | ||
+ | legsnum=(legsnum-1); | ||
+ | $('#s3').cycle(legsnum); | ||
+ | } | ||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | } | ||
- | == ''' | + | function legsright() |
+ | { | ||
+ | if(legsnum==(numpeople-1)){ | ||
+ | legsnum=0; | ||
+ | $('#s3').cycle('next'); | ||
+ | } | ||
+ | else{ | ||
+ | legsnum=(legsnum+1); | ||
+ | $('#s3').cycle(legsnum); | ||
+ | } | ||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | } | ||
+ | |||
+ | |||
+ | function random() | ||
+ | { | ||
+ | |||
+ | headnum=Math.round(Math.random()*(numpeople-1)); | ||
+ | $('#s1').cycle(headnum); | ||
+ | |||
+ | torsonum=Math.round(Math.random()*(numpeople-1)); | ||
+ | $('#s2').cycle(torsonum); | ||
+ | |||
+ | legsnum=Math.round(Math.random()*(numpeople-1)); | ||
+ | $('#s3').cycle(legsnum); | ||
+ | |||
+ | document.getElementById("infobox").innerHTML=(""); | ||
+ | |||
+ | } | ||
+ | |||
+ | function setall(num) | ||
+ | { | ||
+ | $('#s1').cycle(num);$('#s2').cycle(num);$('#s3').cycle(num); | ||
+ | headnum=num; | ||
+ | torsonum=num; | ||
+ | legsnum=num; | ||
+ | |||
+ | document.getElementById("infobox").innerHTML=infos[num]; | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="container"> | ||
+ | <div id="linkcontainer""> | ||
+ | <button id="people" onclick="setall(0);">Prof. Michael Bölker</button> | ||
+ | <button id="people" onclick="setall(1);">Oliver Schauer</button> | ||
+ | <button id="people" onclick="setall(2);">Daniel Kleinsorge</button> | ||
+ | <button id="people" onclick="setall(3);">Marian Vogt</button> | ||
+ | <button id="people" onclick="setall(4);">Agnieszka Zarzycka</button> | ||
+ | <button id="people" onclick="setall(5);">Oliver Leicht</button> | ||
+ | <button id="people" onclick="setall(6);">Margarita Derbenev</button> | ||
+ | <button id="people" onclick="setall(7);">Elisabeth Ignatz</button> | ||
+ | <button id="people" onclick="setall(8);">Julian Pechstein</button> | ||
+ | <button id="people" onclick="setall(9);">Johannes Schuh</button> | ||
+ | <button id="people" onclick="setall(10);">Max Diesner</button> | ||
+ | <button id="people" onclick="setall(11);">Svetlana Uscherenko</button> | ||
+ | </div> | ||
+ | |||
+ | <div id="image"> | ||
+ | <center> | ||
+ | <div id="hd"> | ||
+ | <div id="s1" class="pics"> | ||
+ | </div> | ||
+ | <button id="al" onclick="headleft()"></button> | ||
+ | <button id="ar" onclick="headright()"></button> | ||
+ | </div> | ||
+ | |||
+ | <div id="td"> | ||
+ | <div id="s2" class="pics"> | ||
+ | </div> | ||
+ | <button id="al" onclick="torsoleft()"></button> | ||
+ | <button id="ar" onclick="torsoright()"></button> | ||
+ | </div> | ||
+ | |||
+ | <div id="ld"> | ||
+ | <div id="s3" class="pics"> | ||
+ | </div> | ||
+ | <button id="al" onclick="legsleft()"></button> | ||
+ | <button id="ar" onclick="legsright()"></button> | ||
+ | </div> | ||
+ | <button id="bs" onclick="random()">Recombine!</button> | ||
+ | </center> | ||
+ | </div> | ||
+ | |||
+ | <div id="infobox"></div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="ausgabe"></div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </html> |
Revision as of 09:55, 25 September 2012