Difference between revisions of "Team:Reading/Team"
Line 1: | Line 1: | ||
− | {{ | + | <html> |
− | <table style="margin:0px; border:0px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color:#e3e3e3; width:100%;"> | + | |
+ | <HEAD> | ||
+ | <SCRIPT LANGUAGE="JavaScript"> | ||
+ | |||
+ | //each of these are the main headings for the menu, | ||
+ | //lists with one entry are basic links | ||
+ | //links with two or more are submenus, the first entry is not a link but is displayed | ||
+ | //each entry must have a matching entry in the list with the "ad" prefix. | ||
+ | |||
+ | var home = ["Home"]; | ||
+ | var team = ["Team"]; | ||
+ | var project = ["Project", "Description", "Experiment And Protocols", "Results", "Design"]; | ||
+ | var parts = ["Parts", "Team Parts", "Basic Parts", "Composite Parts", "Part Collection"]; | ||
+ | var notebook = ["Lab book"]; | ||
+ | var attributions = ["Attributions", "Attributions", "Collaborations", "Human Practices"]; | ||
+ | var saftey = ["Saftey"]; | ||
+ | var modeling = ["Modelling"]; | ||
+ | var measument = ["Measument"]; | ||
+ | var software = ["Software"]; | ||
+ | var entrepreneurship = ["Application"]; | ||
+ | var pagenames = [home, team, project, parts, notebook, attributions, saftey, modeling, measument, software, entrepreneurship]; | ||
+ | |||
+ | var adhome = ["Reading"]; | ||
+ | var adteam = ["Reading/Team"]; | ||
+ | var adproject = ["Reading/Description", "Reading/Experiments", "Reading/Results", "Reading/Design"]; | ||
+ | var adparts = ["Reading/TeamParts", "Reading/BasicParts", "Reading/CompositeParts", "Reading/PartCollection"]; | ||
+ | var adnotebook = ["Reading/Notebook"]; | ||
+ | var adattributions = ["Reading/Attributions", "Reading/Collaborations", "Reading/HumanPractices"]; | ||
+ | var adsaftey = ["Reading/saftey"]; | ||
+ | var admodeling = ["Reading/Modeling"]; | ||
+ | var admeasument = ["Reading/Measument"]; | ||
+ | var adsoftware = ["Reading/Software"]; | ||
+ | var adentrepreneurship = ["Reading/Entrepreneurship"]; | ||
+ | var address = [adhome, adteam, adproject, adparts, adnotebook, adattributions,adsaftey, admodeling, admeasument, adsoftware, adentrepreneurship]; | ||
+ | var menuactive = 0; | ||
+ | var menucount = 0; | ||
+ | |||
+ | function changeBioContent(index){ | ||
+ | //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>"; | ||
+ | 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>"; | ||
+ | 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>"; | ||
+ | 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>"; | ||
+ | var mattBio = "<p style=\"font-size:160%\">Matt \"Gets things done\" Shepherd.</p>"; | ||
+ | var nasserBio = "<p style=\"font-size:160%\">Nasser Al-Farhan. Not sure if he has hair.</p>"; | ||
+ | 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>"; | ||
+ | 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>"; | ||
+ | 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>"; | ||
+ | var tomWLBio = "<p style=\"font-size:160%\">Tom \"Hannah\" Ward-Leggat. </br> From the ghetto. Stripper by night, pimp by day.</p>"; | ||
+ | var jennyPasang = "<p style=\"font-size:160%\">Jenny Pasang</p>"; | ||
+ | var bios = [bennyBio, chrisBio, emilyBio, izzahBio, mattBio, nasserBio, peteRBio, PeteWHBio, tomBBio, tomWLBio, jennyPasang]; | ||
+ | document.getElementById("bioframe").innerHTML= bios[index]; | ||
+ | } | ||
+ | |||
+ | function buildPage(){ | ||
+ | buildMenu(); | ||
+ | buildTeamGrid(); | ||
+ | setInterval(function(){ | ||
+ | if(menuactive <= 0){ | ||
+ | menucount = menucount - 1; | ||
+ | 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(){ | ||
+ | var menuHTML = '.'; | ||
+ | for(i1 = 0; i1 < pagenames.length; i1++){ | ||
+ | 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 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> | ||
+ | <div id = "PageContents"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | <table style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color:#e3e3e3; width:100%;"> | ||
<tr> | <tr> | ||
<td width="50%"> | <td width="50%"> | ||
Line 13: | Line 195: | ||
</tr> | </tr> | ||
</table> | </table> | ||
− |
Revision as of 23:41, 24 July 2015
.
|
Roll over the images to see the team member bio and extra photos in here. |