Team:Tec-Monterrey/teaminstallations

From 2011.igem.org

(Difference between revisions)
Line 46: Line 46:
}
}
#content{
#content{
-
     width: 80%;
+
     width: 100%;
}
}
Line 62: Line 62:
body {
body {
font: 12px Tahoma, Geneva, sans-serif;
font: 12px Tahoma, Geneva, sans-serif;
-
background-image: url(https://static.igem.org/mediawiki/igem.org/a/ab/Posiblefondo.png);
+
background-image: url(https://static.igem.org/mediawiki/2011/f/f4/Fondo03.png);
-
        background-repeat:no-repeat;
+
-
      background-size: 100%;
+
margin: 0;
margin: 0;
padding: 0;
padding: 0;
Line 111: Line 109:
.sidebar1 {
.sidebar1 {
float: left;
float: left;
-
width: 15%;
+
width: 20%;
-
        padding-bottom: 10px;
+
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 240: Line 237:
<!--
<!--
-
function changeImg(n) {
+
 
 +
//Magic
 +
var galimg = 0;
 +
var imgpath = new Array();
 +
imgpath[0] = "https://static.igem.org/mediawiki/2011/8/89/DSC_0061.JPG";
 +
imgpath[1] = "https://static.igem.org/mediawiki/2011/7/7c/DSC_0053.JPG";
 +
imgpath[2] = "https://static.igem.org/mediawiki/2011/8/89/DSC_0002.JPG";
 +
imgpath[3] = "https://static.igem.org/mediawiki/2011/d/d8/DSC_0066.JPG";
 +
imgpath[4] = "https://static.igem.org/mediawiki/2011/1/12/DSC_0080.JPG";
 +
imgpath[5] = "https://static.igem.org/mediawiki/2011/3/35/DSC_0134.JPG";
 +
imgpath[6] = "https://static.igem.org/mediawiki/2011/8/85/DSC_0215.JPG";
 +
imgpath[7] = "https://static.igem.org/mediawiki/2011/d/de/DSC_0218.JPG";
 +
imgpath[8] = "https://static.igem.org/mediawiki/2011/f/f4/DSC_0023.JPG";
 +
imgpath[9] = "https://static.igem.org/mediawiki/2011/a/ad/IMG_8723.JPG";
 +
imgpath[10] = "https://static.igem.org/mediawiki/2011/4/4d/IMG_8567.JPG";
 +
imgpath[11]= "https://static.igem.org/mediawiki/2011/1/15/IMG_8706.JPG";
 +
 
 +
 
 +
function moveLeft()  
 +
{
 +
galimg -= 1;
-
//url goes here
+
if (galimg < 0)
-
var imgname = new Array();
+
galimg = imgpath.length - 1;
-
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";
+
 +
document.getElementById('imgGal').src = imgpath[galimg];
 +
}
 +
 +
function moveRight()
 +
{
 +
galimg += 1;
-
var name = imgname[n];
+
if (galimg >= imgpath.length)
-
document.getElementById('imagered').src=name;
+
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);
 +
 +
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 276: Line 481:
   
   
<div class="topbar">  
<div class="topbar">  
-
     <div style="filter:alpha(opacity=70);opacity:.7;">
+
     <div style="background: url(https://static.igem.org/mediawiki/2011/6/60/Topbar_imagebackground.png);
 +
    background-repeat:no-repeat;
 +
    background-position:top;">
      
      
-
     <img src="https://static.igem.org/mediawiki/2011/2/20/Logotec.png" alt="ITESM" name="teclogo" width="146" height="52" id="teclogo">  
+
     <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>
       <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>
Line 368: Line 575:
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <div class="gallery" id="gallery">
     <div class="gallery" id="gallery">
-
       <p>
+
       <p><a href="#" onClick="moveLeft()"><img src="https://static.igem.org/mediawiki/2011/d/d5/Backbutton.png" width="72" height="112">
-
<a href="#" onClick="moveLeft()"><img src="https://static.igem.org/mediawiki/2011/d/d5/Backbutton.png" width="72" height="112">
+
</a><img src="https://static.igem.org/mediawiki/2011/8/89/DSC_0061.JPG" alt="dasdfa" name="imgGal" width="469" height="342" id="imgGal" longdesc="http://asfsdfa">
-
 
+
-
</a><img src="https://static.igem.org/mediawiki/2011/4/49/IMG_8506.JPG" alt="dasdfa" name="imgGal" width="469" height="342" id="imgGal" longdesc="http://asfsdfa">
+
<a href="#" onClick="moveRight()"><img src="https://static.igem.org/mediawiki/2011/e/ea/ButtonNext.png" width="72" height="112"></a>
<a href="#" onClick="moveRight()"><img src="https://static.igem.org/mediawiki/2011/e/ea/ButtonNext.png" width="72" height="112"></a>
       </p>
       </p>
-
      <p>&nbsp;</p>
+
      <p>&nbsp;</p>
-
       <p><img name="" src="https://static.igem.org/mediawiki/2011/5/5b/Meetlab.png" width="623" height="143" alt=""></p>
+
 
-
<p>&nbsp;</p>
+
       <p><img name="" src="https://static.igem.org/mediawiki/2011/d/d2/Meetteam.png" width="623" height="143" alt=""></p>
 +
     
 +
 
 +
      <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
     </div>
     </div>

Revision as of 18:32, 16 August 2011

wiki

iGEM

 

 

 

 

 

 

 

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