Team:Tec-Monterrey/teaminstallations
From 2011.igem.org
(Difference between revisions)
(21 intermediate revisions not shown) | |||
Line 44: | Line 44: | ||
border-left: 0 solid; | border-left: 0 solid; | ||
border-right: 0 solid; | border-right: 0 solid; | ||
- | |||
- | |||
width: 80%; | width: 80%; | ||
} | } | ||
Line 62: | Line 60: | ||
body { | body { | ||
font: 12px Tahoma, Geneva, sans-serif; | font: 12px Tahoma, Geneva, sans-serif; | ||
- | background-image: url(https://static.igem.org/mediawiki/ | + | background-image: url(https://static.igem.org/mediawiki/2011/4/43/Lefondoleposter.png); |
- | + | background-repeat:no-repeat; | |
background-size: 100%; | background-size: 100%; | ||
margin: 0; | margin: 0; | ||
Line 112: | Line 110: | ||
float: left; | float: left; | ||
width: 15%; | width: 15%; | ||
- | + | padding-bottom: 10px; | |
background-color:#04191d; | background-color:#04191d; | ||
-moz-border-radius: 8px; | -moz-border-radius: 8px; | ||
Line 140: | Line 138: | ||
ul.nav li { | ul.nav li { | ||
border-bottom: 0px solid #04191d; | border-bottom: 0px solid #04191d; | ||
- | |||
} | } | ||
Line 152: | Line 149: | ||
} | } | ||
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { | ul.nav a:hover, ul.nav a:active, ul.nav a:focus { | ||
- | background: # | + | background: #339dff; /*float amarillo*/ |
color: #FFF; | color: #FFF; | ||
} | } | ||
Line 207: | Line 204: | ||
/* panel heading on rollover */ | /* panel heading on rollover */ | ||
.panel h2:hover, .panelcollapsed h2:hover { | .panel h2:hover, .panelcollapsed h2:hover { | ||
- | background-color: # | + | background-color: #339dff; |
color: #FFF; | color: #FFF; | ||
} | } | ||
Line 240: | Line 237: | ||
<!-- | <!-- | ||
- | function | + | |
+ | //Magic | ||
+ | var galimg = 0; | ||
+ | var imgpath = new Array(); | ||
+ | imgpath[0] = "https://static.igem.org/mediawiki/2011/5/53/Img011.png"; | ||
+ | imgpath[1] = "https://static.igem.org/mediawiki/2011/b/ba/Img010.png"; | ||
+ | imgpath[2] = "https://static.igem.org/mediawiki/2011/0/00/Img009.png"; | ||
+ | imgpath[3] = "https://static.igem.org/mediawiki/2011/b/be/Img008.png"; | ||
+ | imgpath[4] = "https://static.igem.org/mediawiki/2011/6/6f/Img007.png"; | ||
+ | imgpath[5] = "https://static.igem.org/mediawiki/2011/e/e6/Img006.png"; | ||
+ | imgpath[6] = "https://static.igem.org/mediawiki/2011/e/ed/Img005.png"; | ||
+ | imgpath[7] = "https://static.igem.org/mediawiki/2011/2/23/Img004.png"; | ||
+ | imgpath[8] = "https://static.igem.org/mediawiki/2011/6/64/Img003.png"; | ||
+ | imgpath[9] = "https://static.igem.org/mediawiki/2011/6/65/Img002.png"; | ||
+ | imgpath[10] = "https://static.igem.org/mediawiki/2011/4/48/Img001.png"; | ||
+ | |||
+ | |||
+ | |||
+ | function moveLeft() | ||
+ | { | ||
+ | galimg -= 1; | ||
- | + | if (galimg < 0) | |
- | + | galimg = imgpath.length - 1; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | document.getElementById('imgGal').src = imgpath[galimg]; | ||
+ | } | ||
+ | |||
+ | function moveRight() | ||
+ | { | ||
+ | galimg += 1; | ||
- | + | if (galimg >= imgpath.length) | |
- | document.getElementById(' | + | galimg = 0; |
+ | |||
+ | document.getElementById('imgGal').src = imgpath[galimg]; | ||
} | } | ||
+ | // ----------------------------------------------------------------------------------------------- | ||
+ | // 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); | ||
+ | |||
+ | if (direction > 0) | ||
+ | collapseAll(); | ||
+ | |||
+ | 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(); | ||
+ | } | ||
// ----------------------------------------------------------------------------------------------- | // ----------------------------------------------------------------------------------------------- | ||
Line 278: | Line 486: | ||
<div style="filter:alpha(opacity=70);opacity:.7;"> | <div style="filter:alpha(opacity=70);opacity:.7;"> | ||
- | + | <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> | <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> | ||
Line 306: | Line 514: | ||
<h2>PROJECT</h2> | <h2>PROJECT</h2> | ||
<div class="panelcontent" style=""> | <div class="panelcontent" style=""> | ||
- | + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectoverview">overview</a></p> | |
- | + | ||
<p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectparts">parts</a></p> | <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"> | + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectmodeling">genetic frame</a></p> |
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults/methods">methods</a></p> | ||
+ | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults">results</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/projectprotocols">protocols</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/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/projectnotebook">notebook</a></p> | ||
- | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/ | + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sampledata">sample data</a></p> |
</div> | </div> | ||
</div> | </div> | ||
Line 324: | Line 535: | ||
<p><a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers">members</a></p> | <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"> | + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teaminstallations">headquarters</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/microcongreso">micro congress</a></p> | ||
<p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamfriends">friends</a></p> | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamfriends">friends</a></p> | ||
Line 356: | Line 566: | ||
<!--in sub pages, this divisions should be comments! :D--> | <!--in sub pages, this divisions should be comments! :D--> | ||
+ | <div style=" text-align:center;> | ||
+ | |||
+ | <a href="https://2011.igem.org/Team:Tec-Monterrey/teaminstallations" > | ||
+ | <img src="https://static.igem.org/mediawiki/2011/4/4f/Hqgallery02.png"></a> | ||
+ | |||
+ | <a href="https://2011.igem.org/wiki/index.php?title=Team:Tec-Monterrey/teaminstallations/centrofemsa" > | ||
+ | <img src="https://static.igem.org/mediawiki/2011/5/5d/Hqfemsa01.png" ></a> | ||
+ | <p> </p> | ||
+ | |||
<div class="quicklinks"> | <div class="quicklinks"> | ||
- | <div style=" | + | <div style=" text-align:center; |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/5/56/Fondogalerias02.png); | |
- | + | background-repeat:no-repeat; | |
- | + | background-position:top; "> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<div class="gallery" id="gallery"> | <div class="gallery" id="gallery"> | ||
- | <p> | + | <p><a href="#" onClick="moveLeft()"><img src="https://static.igem.org/mediawiki/2011/c/c8/Botonleft01.png" width="50" height="71"> |
- | <a href="#" onClick="moveLeft()"><img src="https://static.igem.org/mediawiki/2011/ | + | |
- | </a><img src="https://static.igem.org/mediawiki/2011/ | + | </a><img src="https://static.igem.org/mediawiki/2011/5/53/Img011.png" alt="dasdfa" name="imgGal" width="400" height="300" id="imgGal" longdesc="http://asfsdfa"> |
- | <a href="#" onClick="moveRight()"><img src="https://static.igem.org/mediawiki/2011/ | + | <a href="#" onClick="moveRight()"><img src="https://static.igem.org/mediawiki/2011/7/74/Botonright01.png" width="50" height="71"></a> |
</p> | </p> | ||
- | |||
- | |||
- | |||
<p> </p> | <p> </p> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||