|
|
(79 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| + | {{ReadingTeamFunctions}} |
| + | {{reading2}} |
| <html> | | <html> |
| + | <body onload="buildTeamPage()"> |
| | | |
− | <HEAD> | + | <table style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; width:100%;"> |
− | <SCRIPT LANGUAGE="JavaScript">
| + | <tr> |
− | | + | <td> |
− | {{MenuTemplate}}
| + | <title1>Team members</title1> |
− | | + | </td> |
− | function changeBioContent(index){
| + | </tr> |
− | //add a </br> to break the line, also do not include " without a \ before, eg: \"
| + | |
| | | |
− | var bennyBio = "<p style=\"font-size:160%\">Benny \"Cereal\" Bostock. </br> Claims to be a stand-up comedic genius. Has yet to prove this. </br> Life Aim: to become a regular in all pubs, everywhere.</p>";
| + | <tr> |
− | var chrisBio = "<p style=\"font-size:160%\">Chris \"Shisha King\" Tucker. </br> Chris is an avid computer gamer. He also has a shisha pipe. Nuff said.</p>"; | + | <td width="50%"> |
− | var emilyBio = "<p style=\"font-size:160%\">Emily \"Awesomest person ever\" Capes. </br> Emily is very helpful and always offers people lifts in her car. </br> Do not accept this, she has no sense of direction or time. </br> Consequently, you will not make it to your destination.</p>";
| + | <div id="teamtable" style = "padding:10px;float:left; width:calc(100% - 20px);"> |
− | var izzahBio = "<p style=\"font-size:160%\">Izzah \"Coolest person ever\" Elahi. </br> Most Commonly found: In vicinity of street corners, red light district, or Nandos. Or all three at once.</p>"; | + | </div> |
− | var mattBio = "<p style=\"font-size:160%\">Matt \"Gets things done\" Shepherd.</p>";
| + | </td> |
− | var nasserBio = "<p style=\"font-size:160%\">Nasser Al-Farhan. Not sure if he has hair.</p>";
| + | <td width="50%" valign="top"> |
− | var peteRBio = "<p style=\"font-size:160%\">Pete \"Com-Peter Science\" Roe. </br> Best coder in the universe. Most commonly found: Near/around computer or in the gym. </br> Life Aim: To be in both places at once</p>";
| + | <div id="bioframe" style="color:#000000; top:150px; padding: 30px; border-radius: 25px; border-style: solid; border-width 70px; border-color:#e3e3e3; height:500px; width:calc(95 - 50px); background-color:#ffffff"> |
− | var PeteWHBio = "<p style=\"font-size:160%\">Pete \"Boeing 747\" Whitehead. </br> Can't hold alcohol. When drunk he will imitate an aeroplane, sounds effects included. </br> Life Aim: To become a plane.</p>";
| + | <p style="font-size:130%">Roll over the images to see the team member bio and extra photos in here.</p> |
− | var tomBBio = "<p style=\"font-size:160%\">Tom \"Mr Punctual\" Biggs. </br> Knows everything there is to know about genetics, he is an invaluable member of the team. </br> Unfortunately, he turns up a day late.</p>"; | + | </div> |
− | var tomWLBio = "<p style=\"font-size:160%\">Tom \"Hannah\" Ward-Leggat. </br> From the ghetto. Stripper by night, pimp by day.</p>"; | + | </td> |
− | var jennyPasang = "<p style=\"font-size:160%\">Jenny Pasang</p>";
| + | </tr> |
− | var bios = [bennyBio, chrisBio, emilyBio, izzahBio, mattBio, nasserBio, peteRBio, PeteWHBio, tomBBio, tomWLBio, jennyPasang];
| + | |
− | document.getElementById("bioframe").innerHTML= bios[index];
| + | |
− | }
| + | |
| | | |
− | function buildPage(){
| + | <tr> |
− | buildMenu();
| + | <td> |
− | buildTeamGrid();
| + | </br> |
− | setInterval(function(){
| + | <title1>Advisers</title1> |
− | if(menuactive <= 0){
| + | </td> |
− | menucount = menucount - 1;
| + | </tr> |
− | if(menucount <= 0){
| + | |
− | document.getElementById("SubMenu").style.visibility = "hidden";
| + | |
− | }
| + | |
− | }
| + | |
− | },10);
| + | |
− | }
| + | |
− |
| + | |
− | function buildTeamGrid(){
| + | |
− | var index = 0;
| + | |
− | var names = ["Benny Bostock", "Chris Tucker", "Emily Capes", "Izzah Elahi", "Matt Shepherd", "Nasser Al-Farhan", "Pete Roe", "Pete Whitehead", "Tom Biggs", "Thomas Ward-Leggat", "Jenny Pasang"];
| + | |
− | var pictureName = ["/c/c2/BennyBostock.jpg", "/e/ea/ChrisTucker.jpg", "/0/02/EmilyMichelleCapes.jpg", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png", "/4/41/Blankprofile.png"];
| + | |
− | var teamHTML = '<table style="width:100%; color:#05a4ff; background-color:#e3e3e3; border-spacing: 25px;">';
| + | |
− | var newline = true;
| + | |
− | while(newline){
| + | |
− | teamHTML += '<tr>';
| + | |
− | for(i2 = 0; i2 < 3; i2++){
| + | |
− | if(index < names.length){teamHTML += '<td align="center"><b>' + names[index] + '</b><div style="border-style:solid; border-color:#ffffff; border-width:5px; border-radius:50px; height: 100px; width: 150px; background-size:cover; background-image:url(https://static.igem.org/mediawiki/2015' + pictureName[index] + ');" onmouseover="changeBioContent(' + index + ')"></div></td>';
| + | |
− | index += 1;}
| + | |
− | else{
| + | |
− | newline = false;
| + | |
− | }
| + | |
− | }
| + | |
− | teamHTML += '</tr>';
| + | |
− | }
| + | |
− | teamHTML += '</table>';
| + | |
− | document.getElementById("teamtable").innerHTML= teamHTML;
| + | |
− | }
| + | |
| | | |
− | function buildMenu(){
| + | <tr> |
− | var menuHTML = '.';
| + | <td> |
− | for(i1 = 0; i1 < pagenames.length; i1++){
| + | <div id="adviserstable" style = "padding:10px;float:left; width:calc(100% - 20px);"> |
− | if(pagenames[i1].length <= 1){
| + | |
− | menuHTML += '<div onmouseout="dullMenu(this)"onmouseover="lightUpMenu(this, ' + i1 + ')" style = "vertical-align:text-bottom; height:100%; width:80px; float:left; text-align:center;"><a style = "color: #ffffff;text-decoration:none;" href="https://2015.igem.org/Team:' + address[i1][0] + '">' + pagenames[i1][0] + '</a></div>';
| + | |
− | }else{
| + | |
− | menuHTML += '<div onmouseout="dullMenu(this)"onmouseover="lightUpMenu(this, ' + i1 + ')" style = "vertical-align:text-bottom; height:100%; width:80px; float:left; text-align:center;">' + pagenames[i1][0] + '</div>';
| + | |
− | }
| + | |
− | } | + | |
− | document.getElementById("Menu").innerHTML= menuHTML;
| + | |
− | //document.getElementById("SubMenu").style.visibility = "hidden";
| + | |
− | }
| + | |
− | | + | |
− | function lightUpMenu(Button, index){
| + | |
− | menuactive = 1;
| + | |
− | menucount = 15;
| + | |
− | Button.style.backgroundColor = '#25d4e9';
| + | |
− | Button.style.Color = '#000000';
| + | |
− | if(index == -1){
| + | |
− |
| + | |
− | }else if(pagenames[index].length > 1){
| + | |
− | editSubMenu(index);
| + | |
− | document.getElementById("SubMenu").style.visibility = "visible";
| + | |
− | }else{
| + | |
− | document.getElementById("SubMenu").style.visibility = "hidden";
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | function editSubMenu(index){
| + | |
− | var i1 = 0;
| + | |
− | var submenuHTML = '';
| + | |
− | for(i1 = 0; i1 < pagenames[index].length - 1; i1++){
| + | |
− | submenuHTML += '<div onmouseout="dullMenu(this)"onmouseover="lightUpMenu(this, ' + -1 + ')" style = "padding:7px; margin:0px; text-align:left;"><a style = "color: #ffffff;text-decoration:none;" href="https://2015.igem.org/Team:' + address[index][i1] + '">' + pagenames[index][i1 + 1] + '</a></div>';
| + | |
− | }
| + | |
− | var subM = document.getElementById("SubMenu");
| + | |
− | subM.innerHTML= submenuHTML;
| + | |
− | var offset = document.getElementById("main").style.marginLeft;
| + | |
− | offset = 80 * (index);
| + | |
− | subM.style.marginLeft = offset + 'px';
| + | |
− | }
| + | |
− | | + | |
− | function dullMenu(Button){
| + | |
− | Button.style.backgroundColor = '#05a4ff';
| + | |
− | Button.style.Color = '#ffffff';
| + | |
− | menuactive = 0;
| + | |
− | }
| + | |
− | | + | |
− | window.onload = buildPage;
| + | |
− | | + | |
− | </SCRIPT>
| + | |
− | | + | |
− | <style>
| + | |
− | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| + | |
− | display:none;
| + | |
− | }
| + | |
− | #top-section {
| + | |
− | border: none;
| + | |
− | height: 0px;
| + | |
− | }
| + | |
− | #content {
| + | |
− | border:none;
| + | |
− | border:0px;
| + | |
− | margin:0px;
| + | |
− | padding:0px;
| + | |
− | width:100%;
| + | |
− | height:100%;
| + | |
− | background:none;
| + | |
− | }
| + | |
− | </style>
| + | |
− | | + | |
− | </HEAD>
| + | |
− | | + | |
− | <body style="background-image:url(https://static.igem.org/mediawiki/2015/9/9e/Reading%2BBackground.jpg); padding:0px; margin:0px;height:100%;">
| + | |
− | <div id = "main" style="border-width:10px;border-radius:20px;border:2px; border-style:solid; border-color:#ffffff;margin:auto;width:85%; min-width:960px; background-Color:#ffffff;">
| + | |
− | | + | |
− | <div style="height:355px; width:100%;">
| + | |
− | <div style="background-repeat:no-repeat; border-top-left-radius: 20px; border-top-right-radius: 20px; height:100%; width:(100%-54px);padding:15px; background-image:url(https://static.igem.org/mediawiki/2015/2/26/Team_Reading_banner.jpg)"></div>
| + | |
| </div> | | </div> |
− |
| + | </td> |
− |
| + | </tr> |
− | <div id = "Menu" style="background-Color:#05a4ff; color:#ffffff;height: 25px;">
| + | |
− | </div>
| + | |
− |
| + | |
− | <div id = "SubMenu" style="visibility:hidden; position:absolute; background-Color:#05a4ff; color:#ffffff;">
| + | |
− | .
| + | |
− | </div>
| + | |
− |
| + | |
− | <table style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color:#e3e3e3; width:100%;">
| + | |
− | <tr>
| + | |
− | <td width="50%">
| + | |
− | <div id="teamtable" style = "padding:10px;float:left; border-bottom-width: 15px; width:calc(100% - 20px);">
| + | |
− | </div>
| + | |
− | </td>
| + | |
− | <td width="50%">
| + | |
− | <div id="bioframe" style="color:#000000; top:150px; padding: 30px; border-radius: 25px; border-style: solid; border-width 70px; border-color:#ffffff; height:500px; width:calc(100% - 140px); background-color:#ffffff">
| + | |
− | <p style="font-size:160%">Roll over the images to see the team member bio and extra photos in here.</p>
| + | |
− | </div>
| + | |
− | </td>
| + | |
− | </tr>
| + | |
− | </table>
| + | |
| | | |
| + | </table> |
| + | <div> |
| </div> | | </div> |
| </body> | | </body> |
| </html> | | </html> |
| + | {{ReadingFooter}} |