Template:Team:Bonn:Network

From 2013.igem.org

(Difference between revisions)
 
(42 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) {
   function showNode(node) {
         var divContent = "subpage-middle";
         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);
   var content =    document.getElementById(divContent);
   getElements(node);
   getElements(node);
Line 18: Line 34:
         var divNetworkTitle = "networkTitle";
         var divNetworkTitle = "networkTitle";
         var divNetworkSummary = "networkSummary";
         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);
+
            getElements(node);
         var contentTitle = document.getElementById(divTitle);
         var contentTitle = document.getElementById(divTitle);
         var contentSummary = document.getElementById(divSummary);
         var contentSummary = document.getElementById(divSummary);
Line 26: Line 46:
         var networkTitle = document.getElementById(divNetworkTitle);
         var networkTitle = document.getElementById(divNetworkTitle);
         var networkSummary = document.getElementById(divNetworkSummary);
         var networkSummary = document.getElementById(divNetworkSummary);
-
        switch(action) {
 
-
 
-
        case "network":
 
                 if(document.getElementById(divnetworkTop)) {
                 if(document.getElementById(divnetworkTop)) {
                         var divs = document.getElementById(divnetworkTop);
                         var divs = document.getElementById(divnetworkTop);
Line 34: Line 51:
                 }
                 }
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 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>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
Line 47: Line 64:
                                 mainnode:node,
                                 mainnode:node,
                                 type:"parent",
                                 type:"parent",
-
                                 cheight:10,
+
                                 cheight:17,
-
                                 cwidth:10,
+
                                 cwidth:17,
-
                                 cradius:10
+
                                 cradius:17
                         });
                         });
Line 62: Line 79:
                                 mainnode:node,
                                 mainnode:node,
                                 type:"child",
                                 type:"child",
-
                                 cheight:10,
+
                                 cheight:17,
-
                                 cwidth:10,
+
                                 cwidth:17,
-
                                 cradius:10
+
                                 cradius:17
                         });
                         });
                 }
                 }
Line 76: Line 93:
         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);
Line 82: Line 112:
                 if(content.visited) {
                 if(content.visited) {
                   for(a = 0;a < content.visited.length; a++) {
                   for(a = 0;a < content.visited.length; a++) {
-
                    alert(content.visited[a]);   
 
                   }
                   }
                   content.visited[a+1] = node;
                   content.visited[a+1] = node;
Line 91: Line 120:
                  
                  
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
                 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>";
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
Line 98: Line 127:
                 networkTitle.innerHTML = titleLong;
                 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:1200,
+
                                 width:1040,
-
                                 start:245,
+
                                 start:parentsStart,
-
                                 end:295,
+
                                 end:parentsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"parent"
                                 type:"parent"
Line 110: 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:1200,
+
                                 width:1040,
-
                                 start:65,
+
                                 start:childsStart,
-
                                 end:115,
+
                                 end:childsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"child"
                                 type:"child"
Line 136: 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 &quot;LOV WARS&quot; 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 &quot;LOV Wars&quot; 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