Stepbystep

From 2011.igem.org

(Difference between revisions)
(Created page with "<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-sectio...")
(Blanked the page)
 
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="/images/001.png" width="70" 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> <img name="" src="/images/002.png" width="500" height="32" alt=""></p>
 
-
    <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/Video">videos</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">step by step</a></p>
 
-
         
 
-
       
 
-
    </div>
 
-
</div>
 
-
      </li>
 
-
      <li>
 
-
     
 
-
      <div class="panelcollapsed">
 
-
  <h2>PROJECT</h2>
 
-
    <div class="panelcontent" style="">
 
-
<p><a href="/topparts.html">parts</a></p>
 
-
            <p><a href="/topmodeling.html">modeling</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">safety</a></p>
 
-
            <p><a href="/topnotebook.html">notebook</a></p>
 
-
            <p><a href="/topresults.html">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">members</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">installations</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">human approach</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">micro congress</a></p>
 
-
            <p><a href="/topfriends.html">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">site map</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">sponsors platinum</a></p>
 
-
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">sponsors gold</a></p>
 
-
              <p><a href="https://2011.igem.org/Team:Tec-Monterrey">sponsors silver</a></p>
 
-
              <p><a href="https://2011.igem.org/Team:Tec-Monterrey">special thanks</a></p>
 
-
            <p><a href="/topfollowus.html">follow us!</a></p>
 
-
    </div>
 
-
</div>
 
-
      </li>
 
-
    </ul>
 
-
   
 
-
</div>
 
-
 
 
-
<div class="content">
 
-
  <!--in sub pages, this divisions should be comments! :D-->
 
-
 
 
-
 
-
 
-
 
-
  <div class="imagehiglights">
 
-
 
 
-
  <div style="text-align:center;width:650px; float:left; text-align:center;">
 
-
    <p><img src="https://static.igem.org/mediawiki/2011/5/58/Highlights01.png" alt="asd" name="image" width="460" height="320" id="imagered" longdesc="http://asdas">
 
-
      </a></p>
 
-
 
 
-
    <table width="30%" border="0" align="center">
 
-
      <tbody><tr>
 
-
        <td> <a href="#" onMouseOver="changeImg(0)"><img name="vert" src="https://static.igem.org/mediawiki/2011/0/09/Botonvert.png" width="32" height="32" alt="welcome"></a> </td>
 
-
        <td> <a href="#" onMouseOver="changeImg(1)"><img name="jaune" src="https://static.igem.org/mediawiki/2011/8/8e/Botonjaune.png" width="35" height="35" alt="welcome"></a> </td>
 
-
        <td> <a href="#" onMouseOver="changeImg(2)"><img name="rouge" src="https://static.igem.org/mediawiki/2011/2/27/Botonrouge.png" width="35" height="35" alt="welcome"></a> </td>
 
-
        <td> <a href="#" onMouseOver="changeImg(3)"><img name="bleu" src="https://static.igem.org/mediawiki/igem.org/8/8d/Botonbleu.png" width="35" height="35" alt="welcome"></a> </td>
 
-
        </tr>
 
-
  </tbody></table>
 
-
    <p>&nbsp; </p>
 
-
    <p>&nbsp;</p>
 
-
    <p><br>
 
-
  </p> 
 
-
    </div>
 
-
     
 
-
   
 
-
      <div style="width:250px; float:right;">
 
-
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
 
-
<script>
 
-
new TWTR.Widget({
 
-
  version: 2,
 
-
  type: 'profile',
 
-
  rpp: 4,
 
-
  interval: 6000,
 
-
  width: 210,
 
-
  height: 280,
 
-
  theme: {
 
-
    shell: {
 
-
      background: '#000000',
 
-
      color: '#ffffff'
 
-
    },
 
-
    tweets: {
 
-
      background: '#04191d',
 
-
      color: '#ffffff',
 
-
      links: '#93d740'
 
-
    }
 
-
  },
 
-
  features: {
 
-
    scrollbar: true,
 
-
    loop: false,
 
-
    live: false,
 
-
    hashtags: true,
 
-
    timestamp: true,
 
-
    avatars: false,
 
-
    behavior: 'all'
 
-
  }
 
-
}).render().setUser('igemTecMty11').start();
 
-
</script>
 
-
</div>
 
-
   
 
-
  </div>
 
-
 
-
 
-
 
-
 
-
<div class="dlj">
 
-
<div style="text-align:center;height: 450px; text-align:center;">
 
-
    </div>
 
-
 
-
</div>     
 
-
  <div class="quicklinks">
 
-
 
 
-
  <div style="
 
-
  text-align: center;
 
-
      background:url(https://static.igem.org/mediawiki/2011/b/b5/Quicklinks_imagebackground.png);
 
-
  background-repeat:no-repeat;
 
-
        background-position: top;
 
-
        color:#FFF;
 
-
  ">
 
-
    <p>&nbsp;</p>
 
-
    <p>&nbsp;</p>
 
-
    <p>&nbsp;</p>
 
-
    <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription">
 
-
   
 
-
   
 
-
    <a href="ksc1.jpg" onMouseOver="document.images['bigPic'].src='https://static.igem.org/mediawiki/2011/e/ef/Quicklinkleft01.png';"> <img src="https://static.igem.org/mediawiki/2011/0/0a/Quicklinkleft02.png"; width="190" height="160" alt="Item ksc1" /> </a>
 
-
           
 
-
 
 
-
      <a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">
 
-
    <img src="https://static.igem.org/mediawiki/2011/2/20/Quicklinkmid02.png" alt="microcongress" name="quicklinkcenter" width="195" height="178" id="quicklinkcenter"></a>
 
-
 
 
-
      <a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">
 
-
    <img src="https://static.igem.org/mediawiki/2011/8/8e/Quicklinkright01.png" alt="safetypage" name="sidelinkright" width="190" height="160" id="sidelinkright"></a> </p>
 
-
<p>&nbsp;</p>
 
-
    <p>&nbsp;</p>
 
-
    <p>&nbsp;</p>
 
-
    <p>&nbsp;</p>
 
-
  </div> 
 
-
 
-
 
 
-
  <div class="sponsors">
 
-
 
 
-
    <div style="
 
-
    text-align: center;
 
-
    background-image:url(https://static.igem.org/mediawiki/2011/9/95/Sponsorsbar.png);
 
-
    background-repeat:no-repeat;
 
-
    background-position:center;">
 
-
      <p>&nbsp;</p>
 
-
<p><img src="https://static.igem.org/mediawiki/igem.org/6/66/Logo_Promega_trans.png" alt="Promega" name="promega" width="132" height="84" id="promega">
 
-
  <img src="" name="divisioncita" width="80" height="10" id="divisioncita">
 
-
  <img name="uniparts" src="https://static.igem.org/mediawiki/2011/0/0f/Logouniparts.png" width="149" height="57" alt="Uniparts"></p>
 
-
    </div>
 
-
   
 
-
  </div>
 
-
 
 
-
 
 
-
 
 
-
  </div>
 
-
 
-
 
-
</div></div></body></html>
 

Latest revision as of 05:49, 2 August 2011