Team:Tec-Monterrey/projectparts
From 2011.igem.org
(Difference between revisions)
(Created page with "info about parts") |
|||
Line 1: | Line 1: | ||
- | + | <html xmlns="http://www.w3.org/1999/xhtml"><head> | |
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <title>wiki</title> | ||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | #top-section { | ||
+ | |||
+ | height: 100px; | ||
+ | border: none; | ||
+ | height:20px | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | #footer-box { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #catlinks { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #menubar { background: none repeat transparent; } | ||
+ | |||
+ | |||
+ | #menubar ul li a { color: white; } | ||
+ | |||
+ | |||
+ | .right-menu li a { | ||
+ | color: black; | ||
+ | background: none repeat transparent; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | background: none repeat scroll 0 0 transparent; | ||
+ | border-left: 0 solid; | ||
+ | border-right: 0 solid; | ||
+ | } | ||
+ | #content{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #headover ul{ | ||
+ | list-style: none; | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 1.2em; | ||
+ | left: 0.2em; | ||
+ | } | ||
+ | |||
+ | .firstHeading { | ||
+ | display: none;} | ||
+ | |||
+ | body { | ||
+ | font: 12px Tahoma, Geneva, sans-serif; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/f/f4/Fondo03.png); | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | margin-left: 10%; | ||
+ | margin-right: 10%; | ||
+ | color: #FFFFF; | ||
+ | } | ||
+ | |||
+ | /* ~~ Element/tag selectors ~~ */ | ||
+ | ul, ol, dl { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | h1, h2, h3, h4, h5, h6, p { | ||
+ | margin-top: 0; | ||
+ | padding-right: 10px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | a img { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | a:link { | ||
+ | |||
+ | color: #F90; | ||
+ | } | ||
+ | a:visited { | ||
+ | color: #c02355; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | a:hover, a:active, a:focus { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .container { | ||
+ | width: 100%; | ||
+ | max-width: 1260px; | ||
+ | min-width: 780px; | ||
+ | overflow: hidden; | ||
+ | color:#FFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | .sidebar1 { | ||
+ | float: left; | ||
+ | width: 20%; | ||
+ | padding-bottom: 10px; | ||
+ | background-color:#04191d; | ||
+ | |||
+ | } | ||
+ | .content { | ||
+ | |||
+ | padding: none; | ||
+ | width: 80%; | ||
+ | float: left; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .content ul, .content ol { | ||
+ | padding: 0 15px 15px 40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav { | ||
+ | list-style: none; | ||
+ | border-top:none; | ||
+ | margin-bottom: 15px; | ||
+ | |||
+ | } | ||
+ | ul.nav li { | ||
+ | border-bottom: 0px solid #04191d; | ||
+ | |||
+ | } | ||
+ | ul.nav a, ul.nav a:visited { | ||
+ | |||
+ | padding: 5px 5px 5px 15px; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | color:#FFF; | ||
+ | |||
+ | } | ||
+ | ul.nav a:hover, ul.nav a:active, ul.nav a:focus { | ||
+ | background: #f6af1b; /*float amarillo*/ | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | .fltrt { | ||
+ | float: right; | ||
+ | margin-left: 8px; | ||
+ | } | ||
+ | .fltlft { | ||
+ | float: left; | ||
+ | margin-right: 8px; | ||
+ | } | ||
+ | .clearfloat { | ||
+ | clear:both; | ||
+ | height:0; | ||
+ | font-size: 1px; | ||
+ | line-height: 0px; | ||
+ | } | ||
+ | |||
+ | /* panel */ | ||
+ | .panel, .panelcollapsed | ||
+ | { | ||
+ | margin: 3px; | ||
+ | width: auto; | ||
+ | -moz-border-radius: 4px; | ||
+ | -webkit-border-radius: 4px; | ||
+ | border-top-width: 10px; | ||
+ | border-right-width: 0px; | ||
+ | border-bottom-width: 10px; | ||
+ | border-left-width: 3px; | ||
+ | padding-bottom: 5px; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | table { | ||
+ | background: none repeat scroll 0 0 transparent} | ||
+ | |||
+ | |||
+ | /* panel heading */ | ||
+ | .panel h2, .panelcollapsed h2 | ||
+ | { | ||
+ | color: #FFF; | ||
+ | font-weight: normal; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | -moz-border-radius: 3px; | ||
+ | -webkit-border-radius: 3px; | ||
+ | border-bottom: 0px solid #04191d; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* panel heading on rollover */ | ||
+ | .panel h2:hover, .panelcollapsed h2:hover { | ||
+ | background-color: #FC3; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | /* heading of a collapsed panel */ | ||
+ | .panelcollapsed h2 | ||
+ | { | ||
+ | background-image: url(arrow-dn.gif); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 280px; | ||
+ | } | ||
+ | |||
+ | /* panel content - do not set borders or paddings */ | ||
+ | .panelcontent | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | /* collapsed panel content */ | ||
+ | .panelcollapsed .panelcontent { display: none; } | ||
+ | |||
+ | --> | ||
+ | </style><!--[if lte IE 7]> | ||
+ | <style> | ||
+ | .content { margin-right: -1px; } | ||
+ | ul.nav a { zoom: 1; } | ||
+ | </style> | ||
+ | <![endif]--> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | <!-- | ||
+ | |||
+ | function changeImg(n) { | ||
+ | |||
+ | //url goes here | ||
+ | var imgname = new Array(); | ||
+ | imgname[0] = "https://static.igem.org/mediawiki/2011/5/58/Highlights01.png"; | ||
+ | imgname[1] = "https://static.igem.org/mediawiki/igem.org/a/ad/Highlights02.png"; | ||
+ | imgname[2] = "https://static.igem.org/mediawiki/igem.org/e/eb/Highlights03.png"; | ||
+ | imgname[3] = "https://static.igem.org/mediawiki/igem.org/4/4a/Highlights04.png"; | ||
+ | |||
+ | |||
+ | var name = imgname[n]; | ||
+ | document.getElementById('imagered').src=name; | ||
+ | } | ||
+ | |||
+ | // ----------------------------------------------------------------------------------------------- | ||
+ | // PANELS | ||
+ | var PANEL_NORMAL_CLASS = "panel"; | ||
+ | var PANEL_COLLAPSED_CLASS = "panelcollapsed"; | ||
+ | var PANEL_HEADING_TAG = "h2"; | ||
+ | var PANEL_CONTENT_CLASS = "panelcontent"; | ||
+ | var PANEL_COOKIE_NAME = "panels"; | ||
+ | var PANEL_ANIMATION_DELAY = 20; /*ms*/ | ||
+ | var PANEL_ANIMATION_STEPS = 10; | ||
+ | |||
+ | function setUpPanels() | ||
+ | { | ||
+ | loadSettings(); | ||
+ | |||
+ | // get all headings | ||
+ | var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); | ||
+ | |||
+ | // go through all tags | ||
+ | for (var i=0; i<headingTags.length; i++) | ||
+ | { | ||
+ | var el = headingTags[i]; | ||
+ | |||
+ | // make sure it's the heading inside a panel | ||
+ | if ( el.parentNode.className != PANEL_COLLAPSED_CLASS) | ||
+ | if(el.parentNode.className != PANEL_NORMAL_CLASS) | ||
+ | continue; | ||
+ | |||
+ | |||
+ | // get the text value of the tag | ||
+ | var name = el.firstChild.nodeValue; | ||
+ | |||
+ | // look for the name in loaded settings, apply the normal/collapsed class | ||
+ | if (panelsStatus[name] == "false") | ||
+ | el.parentNode.className = PANEL_COLLAPSED_CLASS; | ||
+ | else | ||
+ | if (panelsStatus[name] == "true") | ||
+ | el.parentNode.className = PANEL_NORMAL_CLASS; | ||
+ | else | ||
+ | { | ||
+ | // if no saved setting, see the initial setting | ||
+ | panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false"; | ||
+ | } | ||
+ | |||
+ | // add the click behavor to headings | ||
+ | el.onclick = function() | ||
+ | { | ||
+ | var target = this.parentNode; | ||
+ | var name = this.firstChild.nodeValue; | ||
+ | var collapsed = (target.className == PANEL_COLLAPSED_CLASS); | ||
+ | saveSettings(name, collapsed?"true":"false"); | ||
+ | animateTogglePanel(target, collapsed); | ||
+ | }; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Start the expand/collapse animation of the panel | ||
+ | * @param panel reference to the panel div | ||
+ | */ | ||
+ | function animateTogglePanel(panel, expanding) | ||
+ | { | ||
+ | // find the .panelcontent div | ||
+ | var elements = panel.getElementsByTagName("div"); | ||
+ | var panelContent = null; | ||
+ | for (var i=0; i<elements.length; i++) | ||
+ | { | ||
+ | if (elements[i].className == PANEL_CONTENT_CLASS) | ||
+ | { | ||
+ | panelContent = elements[i]; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // make sure the content is visible before getting its height | ||
+ | panelContent.style.display = "block"; | ||
+ | |||
+ | // get the height of the content | ||
+ | var contentHeight = panelContent.offsetHeight; | ||
+ | |||
+ | // if panel is collapsed and expanding, we must start with 0 height | ||
+ | if (expanding) | ||
+ | panelContent.style.height = "0px"; | ||
+ | |||
+ | var stepHeight = contentHeight / PANEL_ANIMATION_STEPS; | ||
+ | var direction = (!expanding ? -1 : 1); | ||
+ | |||
+ | setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Change the height of the target | ||
+ | * @param panelContent reference to the panel content to change height | ||
+ | * @param iteration current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS | ||
+ | * @param stepHeight height increment to be added/substracted in one step | ||
+ | * @param direction 1 for expanding, -1 for collapsing | ||
+ | */ | ||
+ | function animateStep(panelContent, iteration, stepHeight, direction) | ||
+ | { | ||
+ | if (iteration<PANEL_ANIMATION_STEPS) | ||
+ | { | ||
+ | panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) +"px"; | ||
+ | iteration++; | ||
+ | setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | // set class for the panel | ||
+ | panelContent.parentNode.className = (direction<0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS; | ||
+ | // clear inline styles | ||
+ | panelContent.style.display = panelContent.style.height = ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // ----------------------------------------------------------------------------------------------- | ||
+ | // Load-Save | ||
+ | // ----------------------------------------------------------------------------------------------- | ||
+ | /** | ||
+ | * Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object | ||
+ | */ | ||
+ | function loadSettings() | ||
+ | { | ||
+ | // prepare the object that will keep the panel statuses | ||
+ | panelsStatus = {}; | ||
+ | |||
+ | // find the cookie name | ||
+ | var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); | ||
+ | if (start == -1) return; | ||
+ | |||
+ | // starting point of the value | ||
+ | start += PANEL_COOKIE_NAME.length+1; | ||
+ | |||
+ | // find end point of the value | ||
+ | var end = document.cookie.indexOf(";", start); | ||
+ | if (end == -1) end = document.cookie.length; | ||
+ | |||
+ | // get the value, split into key:value pairs | ||
+ | var cookieValue = unescape(document.cookie.substring(start, end)); | ||
+ | var panelsData = cookieValue.split("|"); | ||
+ | |||
+ | // split each key:value pair and put in object | ||
+ | for (var i=0; i< panelsData.length; i++) | ||
+ | { | ||
+ | var pair = panelsData[i].split(":"); | ||
+ | panelsStatus[pair[0]] = pair[1]; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function expandAll() | ||
+ | { | ||
+ | for (var key in panelsStatus) | ||
+ | saveSettings(key, "true"); | ||
+ | |||
+ | setUpPanels(); | ||
+ | } | ||
+ | |||
+ | function collapseAll() | ||
+ | { | ||
+ | for (var key in panelsStatus) | ||
+ | saveSettings(key, "false"); | ||
+ | |||
+ | setUpPanels(); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days | ||
+ | * @param key key name to save | ||
+ | * @paeam value key value | ||
+ | */ | ||
+ | function saveSettings(key, value) | ||
+ | { | ||
+ | // put the new value in the object | ||
+ | panelsStatus[key] = value; | ||
+ | |||
+ | // create an array that will keep the key:value pairs | ||
+ | var panelsData = []; | ||
+ | for (var key in panelsStatus) | ||
+ | panelsData.push(key+":"+panelsStatus[key]); | ||
+ | |||
+ | // set the cookie expiration date 1 year from now | ||
+ | var today = new Date(); | ||
+ | var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24); | ||
+ | // write the cookie | ||
+ | document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString(); | ||
+ | } | ||
+ | |||
+ | // ----------------------------------------------------------------------------------------------- | ||
+ | // Register setUpPanels to be executed on load | ||
+ | if (window.addEventListener) | ||
+ | { | ||
+ | // the "proper" way | ||
+ | window.addEventListener("load", setUpPanels, false); | ||
+ | } | ||
+ | else | ||
+ | if (window.attachEvent) | ||
+ | { | ||
+ | // the IE way | ||
+ | window.attachEvent("onload", setUpPanels); | ||
+ | } | ||
+ | --> | ||
+ | </script> | ||
+ | |||
+ | </head><body> | ||
+ | |||
+ | <div class="container"> | ||
+ | |||
+ | <div class="topbar"> | ||
+ | <div style="background: url(https://static.igem.org/mediawiki/2011/6/60/Topbar_imagebackground.png); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:top;"> | ||
+ | |||
+ | <p><img name="" src="https://static.igem.org/mediawiki/2011/7/78/Imagtransp.png" width="110" height="32" alt=""><img src="https://static.igem.org/mediawiki/2011/2/20/Logotec.png" alt="ITESM" name="teclogo" width="146" height="52" id="teclogo"> | ||
+ | <a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2011/7/73/Logoigemsmall.png" alt="iGEM" name="logoigem" width="70" height="61" id="logoigem"></a> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </div> | ||
+ | |||
+ | <div class="sidebar1"> | ||
+ | <ul class="nav"> | ||
+ | <p> </p> | ||
+ | <!--this is our menu! D: --> | ||
+ | <li> | ||
+ | <div class="panelcollapsed"> | ||
+ | <h2>MAIN</h2> | ||
+ | <div class="panelcontent" style=""> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey">home</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription">abstract</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/video">videos</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/stepbystep">step by step</a></p> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | <div class="panelcollapsed"> | ||
+ | <h2>PROJECT</h2> | ||
+ | <div class="panelcontent" style=""> | ||
+ | |||
+ | |||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectparts">parts</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectmodeling">modeling</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">safety</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectnotebook">notebook</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults">results</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | |||
+ | <div class="panelcollapsed"> | ||
+ | <h2>TEAM</h2> | ||
+ | <div class="panelcontent"> | ||
+ | |||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers">members</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teaminstallations">installations</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamha">human approach</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">micro congress</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamfriends">friends</a></p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </li><li> | ||
+ | <div class="panelcollapsed"> | ||
+ | |||
+ | |||
+ | <h2>EXTRAS</h2> | ||
+ | <div class="panelcontent"> | ||
+ | |||
+ | |||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sitemap">site map</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorsplatinum">sponsors platinum</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorsgold">sponsors gold</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorssilver">sponsors silver</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/specialthanks">special thanks</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/followus">follow us!</a></p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="content"> | ||
+ | <!--in sub pages, this divisions should be comments! :D--> | ||
+ | |||
+ | |||
+ | <div class="quicklinks"> | ||
+ | |||
+ | <div style=" | ||
+ | text-align: center; | ||
+ | background:url(https://static.igem.org/mediawiki/2011/5/54/Temp.png); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:top; | ||
+ | color:#FFF; | ||
+ | "> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | </div></div></body></html> |