Team:Tec-Monterrey/stepbystep

From 2011.igem.org

(Difference between revisions)
(Created page with "here goes step by step")
Line 1: Line 1:
-
here goes step by step
+
<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>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
  </div>
 +
 
 +
  <div class="sidebar1">
 +
    <ul class="nav">
 +
      <p>&nbsp;</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>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
  </div> 
 +
 
 +
 
 +
 +
 
 +
 
 +
  </div>
 +
 
 +
 
 +
</div></div></body></html>

Revision as of 06:55, 2 August 2011

wiki

iGEM

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Retrieved from "http://2011.igem.org/Team:Tec-Monterrey/stepbystep"