Template:Team:Bonn:Network
From 2013.igem.org
(Difference between revisions)
(54 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<script> | <script> | ||
+ | function showTile(id) { | ||
+ | $("#page-box-"+id+"-content").stop().fadeOut(); | ||
+ | $("#page-box-"+id+"-content").stop().fadeIn(); | ||
+ | $("#page-box-"+id+"-content").fadeIn(50); | ||
+ | } | ||
+ | function hideTile(id) { | ||
+ | $("#page-box-"+id+"-content").stop().fadeIn(); | ||
+ | $("#page-box-"+id+"-content").stop().fadeOut(); | ||
+ | $("#page-box-"+id+"-content").fadeOut(50); | ||
+ | } | ||
+ | function showNode(node) { | ||
+ | var divContent = "subpage-middle"; | ||
+ | var mainContent = document.getElementById("content-page"); | ||
+ | if(document.getElementById(divContent)) { | ||
+ | |||
+ | } else { | ||
+ | mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;width:1100px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'> <div> <div style='float:right;display:inline; '> <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'> <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'> </div> <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div> <div id='subpage-title'></div> <div id='subpage-summary'></div> <div id='subpage-text'> </div> </div> </div> </div></div>"; | ||
+ | initiateNetwork(1); | ||
+ | } | ||
+ | var content = document.getElementById(divContent); | ||
+ | getElements(node); | ||
+ | showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text); | ||
+ | } | ||
function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { | function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { | ||
var divContent = "subpage-middle"; | var divContent = "subpage-middle"; | ||
Line 6: | Line 29: | ||
var divSummary = "subpage-summary"; | var divSummary = "subpage-summary"; | ||
var divText = "subpage-text"; | var divText = "subpage-text"; | ||
+ | var divType = "subpage-type"; | ||
var divnetworkBottom = "networkBottom"; | var divnetworkBottom = "networkBottom"; | ||
var divnetworkTop = "networkTop"; | var divnetworkTop = "networkTop"; | ||
+ | var divNetworkTitle = "networkTitle"; | ||
+ | var divNetworkSummary = "networkSummary"; | ||
+ | var mainContent = document.getElementById("content-page"); | ||
+ | switch(action) { | ||
+ | |||
+ | case "network": | ||
var content = document.getElementById(divContent); | var content = document.getElementById(divContent); | ||
- | + | getElements(node); | |
var contentTitle = document.getElementById(divTitle); | var contentTitle = document.getElementById(divTitle); | ||
var contentSummary = document.getElementById(divSummary); | var contentSummary = document.getElementById(divSummary); | ||
var contentText = document.getElementById(divText); | var contentText = document.getElementById(divText); | ||
- | + | var contentType = document.getElementById(divType); | |
- | + | var networkTitle = document.getElementById(divNetworkTitle); | |
- | + | var networkSummary = document.getElementById(divNetworkSummary); | |
if(document.getElementById(divnetworkTop)) { | if(document.getElementById(divnetworkTop)) { | ||
var divs = document.getElementById(divnetworkTop); | var divs = document.getElementById(divnetworkTop); | ||
divs.innerHTML = ''; | divs.innerHTML = ''; | ||
} | } | ||
- | contentTitle.innerHTML = titleLong; | + | contentTitle.innerHTML = "<h1>"+titleLong+"</h1>"; |
- | contentSummary.innerHTML = summary; | + | contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>"; |
contentText.innerHTML = text; | contentText.innerHTML = text; | ||
+ | contentTitle.innerHTML = "<h1>"+titleLong+"</h1>"; | ||
+ | contentType.innerHTML = content.type; | ||
if(parents.length) { | if(parents.length) { | ||
createNetwork({ | createNetwork({ | ||
n:parents, | n:parents, | ||
- | height: | + | height:230, |
width:300, | width:300, | ||
start:230, | start:230, | ||
Line 32: | Line 64: | ||
mainnode:node, | mainnode:node, | ||
type:"parent", | type:"parent", | ||
- | cheight: | + | cheight:17, |
- | cwidth: | + | cwidth:17, |
- | cradius: | + | cradius:17 |
}); | }); | ||
Line 41: | Line 73: | ||
createNetwork({ | createNetwork({ | ||
n:childs, | n:childs, | ||
- | height: | + | height:230, |
width:300, | width:300, | ||
start:50, | start:50, | ||
Line 47: | Line 79: | ||
mainnode:node, | mainnode:node, | ||
type:"child", | type:"child", | ||
- | cheight: | + | cheight:17, |
- | cwidth: | + | cwidth:17, |
- | cradius: | + | cradius:17 |
}); | }); | ||
+ | } | ||
+ | if(childs.length || parents.length) { | ||
+ | var networkTitle = document.getElementById(divNetworkTitle); | ||
+ | var networkSummary = document.getElementById(divNetworkSummary); | ||
+ | networkSummary.innerHTML = summary; | ||
+ | networkTitle.innerHTML = titleLong; | ||
} | } | ||
break; | break; | ||
case "navigation": | case "navigation": | ||
+ | if(document.getElementById(divContent)) { | ||
+ | |||
+ | } else { | ||
+ | mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'> <div> <div style='float:right;display:inline; '> <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'> <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'> </div> <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div> <div id='subpage-title'></div> <div id='subpage-summary'></div> <div id='subpage-text'> </div> </div> </div> </div></div>"; | ||
+ | } | ||
+ | var content = document.getElementById(divContent); | ||
+ | getElements(node); | ||
+ | var contentTitle = document.getElementById(divTitle); | ||
+ | var contentSummary = document.getElementById(divSummary); | ||
+ | var contentText = document.getElementById(divText); | ||
+ | var contentType = document.getElementById(divType); | ||
+ | var networkTitle = document.getElementById(divNetworkTitle); | ||
+ | var networkSummary = document.getElementById(divNetworkSummary); | ||
if(document.getElementById(divnetworkBottom)) { | if(document.getElementById(divnetworkBottom)) { | ||
var divs = document.getElementById(divnetworkBottom); | var divs = document.getElementById(divnetworkBottom); | ||
divs.innerHTML = ''; | divs.innerHTML = ''; | ||
} | } | ||
- | contentTitle.innerHTML = titleLong; | + | if(content.visited) { |
- | contentSummary.innerHTML = summary; | + | for(a = 0;a < content.visited.length; a++) { |
+ | } | ||
+ | content.visited[a+1] = node; | ||
+ | } else { | ||
+ | content.visited = new Array; | ||
+ | content.visited[0]; | ||
+ | } | ||
+ | |||
+ | contentTitle.innerHTML = "<h1>"+titleLong+"</h1>"; | ||
+ | contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>"; | ||
contentText.innerHTML = text; | contentText.innerHTML = text; | ||
+ | contentTitle.innerHTML = "<h1>"+titleLong+"</h1>"; | ||
+ | contentType.innerHTML = content.type; | ||
+ | networkSummary.innerHTML = summary; | ||
+ | networkTitle.innerHTML = titleLong; | ||
if(parents.length) { | if(parents.length) { | ||
+ | var parentsStart = 260 - parents.length*3/2; | ||
+ | var parentsEnd = 280 + parents.length*3/2; | ||
circle({ | circle({ | ||
n:parents, | n:parents, | ||
height:1100, | height:1100, | ||
- | width: | + | width:1040, |
- | start: | + | start:parentsStart, |
- | end: | + | end:parentsEnd, |
mainnode:node, | mainnode:node, | ||
type:"parent" | type:"parent" | ||
Line 75: | Line 141: | ||
} | } | ||
if(childs.length) { | if(childs.length) { | ||
+ | var childsStart = 80 - childs.length*3/2; | ||
+ | var childsEnd = 100 + childs.length*3/2; | ||
circle({ | circle({ | ||
n:childs, | n:childs, | ||
height:1100, | height:1100, | ||
- | width: | + | width:1040, |
- | start: | + | start:childsStart, |
- | end: | + | end:childsEnd, |
mainnode:node, | mainnode:node, | ||
type:"child" | type:"child" | ||
Line 101: | Line 169: | ||
} | } | ||
break; | break; | ||
+ | case "mainpage": | ||
+ | mainContent.innerHTML = "<style type='text/css'>.kachelheading{font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:-2px; bottom:-11px;}</style><div id='page-box1' style='margin: 20px auto 40px auto;width:800px;height:320px;'><img width='800px' style='margin-top:-60px' src='https://static.igem.org/mediawiki/2013/6/6d/Bonn_Licht_ist_geil_weiß.png'></div><div id='page-row1' class='page-row' style='width:800px;height:260px;margin:0 auto 0 auto;position:relative;'><div id='page-box-2' onclick=showNode(37) onmouseover=showTile(2) onmouseout=hideTile(2) class='page-box-width' style='float:left;margin:0 15px 0 0;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/c/cd/Bonn_Project.png'><p class='kachelheading'>project</p> <div id='page-box-2-content' class='page-box-width' style='background-color:black; float:left;opacity:0.9;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We engineer a photoswitchable protein degradation system relying on the ClpXP protease system and a LOV domain from avena sativa</p><p class='kachelheading'>project</p> </div> </div> <div id='page-box-3' onmouseover=showTile(3) onclick=showNode(200) onmouseout=hideTile(3) class='page-box-small' style='float:right;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/a/a0/Bonn_Safety.png'><p class='kachelheading'>safety</p> <div id='page-box-3-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Since safety is an important concern for any iGEM team, we gave deep thought to it. In this article our reflections about safety measures presented.</p><p class='kachelheading'>safety</p> </div> </div></div><div id='page-row2' class='page-row' style='width:800px;height:800px;position:relative;margin:20px auto 0 auto'> <div id='page-box-4' onclick=showNode(2) onmouseover=showTile(4) onmouseout=hideTile(4) class='page-box-high' style='position:absolute;left:0px;top:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/2/2c/Bonn_Background.png'><p class='kachelheading'>background</p> <div id='page-box-4-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Introduction to the concept of protein activity regulation</p><p class='kachelheading'>background</p> </div> </div> <div id='page-box-5' onclick=showNode(100) onmouseover=showTile(5) onmouseout=hideTile(5) class='page-box-width' style='position:absolute;right:0px;top:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/9/92/Bonn_HumanPractice.png'><p class='kachelheading'>Human Practice</p> <div id='page-box-5-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The major goal in Human Practice is to make synthetic biology easily understandable and interesting for everybody. For that purpose our project's design follows the well-known franchise of Star Wars; our project name "LOV WARS" was born. The constant references to the Star Wars movies facilitate the access to synthetic biology to a person that is not familiar with the subject. With the most famous icon of Star Wars being the laser sword it offers a great opportunity to present our light induction system in an entertaining way. We put great effort into adapting every aspect of our public presence to Star Wars.</p><p class='kachelheading'>Human Practice</p> </div> </div> <div id='page-box-6' onclick=showNode(131) onmouseover=showTile(6) onmouseout=hideTile(6) class='page-box-small' style='position:absolute;width:242px;height:242px;top:278px;left:278px;'><img width='242px'; src='https://static.igem.org/mediawiki/2013/f/fd/PictureGallaryNew.png'><p class='kachelheading'>picture gallery</p> <div id='page-box-6-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-242px;width:242px;height:242px'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Pictures from any Event hosted by our Team and many more</p><p class='kachelheading'>picture gallery</p> </div> </div> <div id='page-box-7' onclick=showNode(111) onmouseover=showTile(7) onmouseout=hideTile(7) class='page-box-width' style='position:absolute;left:0px;bottom:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/1/17/Bonn_Game.png'><p class='kachelheading'>game</p> <div id='page-box-7-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Play our awesome lov-wars mini shooter.</p><p class='kachelheading'>game</p> </div> </div><div id='page-box-8' onmouseover=showTile(8) onmouseout=hideTile(8) class='page-box-high' style='position:absolute;right:0px;bottom:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/f/f0/Bonn_Comic.png'><p class='kachelheading'>comic</p> <div id='page-box-8-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We introduced a hand drawn comic series called "LOV Wars" about Obi-Wan E. Coli and his adventures in the Galaxy of Petri. Basic concepts of synthetic biology are explained along the way.</p><p class='kachelheading'>comic</p> </div></div></div><div id='page-row3' class='page-row' style='width:800px;height:260px;margin:20px auto 0 auto '> <div id='page-box-9' onmouseover=showTile(9) onmouseout=hideTile(9) class='page-box-small' style='float:left;margin:0 15px 0 0;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/7/73/Bonn_Analysis.png'> <p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>results</p> <div id='page-box-9-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'></p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>results</p> </div> </div><div id='page-box-10' onmouseover=showTile(10) onmouseout=hideTile(10) class='page-box-width' style='float:right;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/f/f5/Bonn_Team.png'><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>team</p> <div id='page-box-10-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The Team - Presentation of all team members</p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>team</p></div> </div></div> </div> </div> </div> </div>"; | ||
+ | |||
+ | |||
+ | break; | ||
} | } | ||
Latest revision as of 12:42, 27 October 2013