|
|
| Line 46: |
Line 46: |
| | } | | } |
| | #content{ | | #content{ |
| - | width: 100%; | + | width: 80%; |
| | } | | } |
| | | | |
| 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/2011/f/f4/Fondo03.png); | + | background-image: url(https://static.igem.org/mediawiki/igem.org/a/ab/Posiblefondo.png); |
| | + | background-repeat:no-repeat; |
| | + | background-size: 100%; |
| | margin: 0; | | margin: 0; |
| | padding: 0; | | padding: 0; |
| Line 109: |
Line 111: |
| | .sidebar1 { | | .sidebar1 { |
| | float: left; | | float: left; |
| - | width: 20%; | + | width: 15%; |
| - | padding-bottom: 10px;
| + | padding-bottom: 10px; |
| | background-color:#04191d; | | background-color:#04191d; |
| | -moz-border-radius: 8px; | | -moz-border-radius: 8px; |
| Line 138: |
Line 140: |
| | ul.nav li { | | ul.nav li { |
| | border-bottom: 0px solid #04191d; | | border-bottom: 0px solid #04191d; |
| | + | |
| | | | |
| | } | | } |
| Line 237: |
Line 240: |
| | <!-- | | <!-- |
| | | | |
| - | | + | function changeImg(n) { |
| - | //Magic
| + | |
| - | var galimg = 0;
| + | |
| - | var imgpath = new Array();
| + | |
| - | imgpath[0] = "https://static.igem.org/mediawiki/2011/4/49/IMG_8506.JPG";
| + | |
| - | imgpath[1] = "https://static.igem.org/mediawiki/2011/0/0f/Image0136.JPG";
| + | |
| - | imgpath[2] = "https://static.igem.org/mediawiki/2011/0/0c/DSC_0144.JPG";
| + | |
| - | imgpath[3] = "https://static.igem.org/mediawiki/2011/b/be/DSC_0193.JPG";
| + | |
| - | imgpath[4] = "https://static.igem.org/mediawiki/2011/9/93/DSC_0191.JPG";
| + | |
| - | imgpath[5] = "https://static.igem.org/mediawiki/2011/5/56/DSC_0175.JPG";
| + | |
| - | imgpath[6] = "https://static.igem.org/mediawiki/2011/d/d5/DSC_0174.JPG";
| + | |
| - | imgpath[7] = "https://static.igem.org/mediawiki/2011/6/6a/DSC_0168.JPG";
| + | |
| - | imgpath[8] = "https://static.igem.org/mediawiki/2011/d/d9/DSC_0157.JPG";
| + | |
| - | imgpath[9] = "https://static.igem.org/mediawiki/2011/5/5d/DSC_0149.JPG";
| + | |
| - | imgpath[10] ="https://static.igem.org/mediawiki/2011/4/41/DSC_0147.JPG";
| + | |
| - | imgpath[11] ="https://static.igem.org/mediawiki/2011/f/f9/DSC_0146.JPG";
| + | |
| - | imgpath[12] ="https://static.igem.org/mediawiki/2011/6/62/IMG_8594.JPG";
| + | |
| - | imgpath[13] ="https://static.igem.org/mediawiki/2011/0/03/IMG_8658.JPG";
| + | |
| - | imgpath[14] ="https://static.igem.org/mediawiki/2011/f/f7/IMG_8659.JPG";
| + | |
| - | imgpath[15] ="https://static.igem.org/mediawiki/2011/5/5e/IMG_8679.JPG";
| + | |
| - | imgpath[16] ="https://static.igem.org/mediawiki/2011/3/3f/DSC_0201.JPG";
| + | |
| - | imgpath[17] ="https://static.igem.org/mediawiki/2011/5/53/DSC_0011.JPG";
| + | |
| - | | + | |
| - | | + | |
| - | function moveLeft() | + | |
| - | { | + | |
| - | galimg -= 1;
| + | |
| | | | |
| - | if (galimg < 0) | + | //url goes here |
| - | galimg = imgpath.length - 1;
| + | 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"; |
| | | | |
| - | document.getElementById('imgGal').src = imgpath[galimg];
| |
| - | }
| |
| - |
| |
| - | function moveRight()
| |
| - | {
| |
| - | galimg += 1;
| |
| | | | |
| - | if (galimg >= imgpath.length) | + | var name = imgname[n]; |
| - | galimg = 0;
| + | document.getElementById('imagered').src=name; |
| - |
| + | |
| - | 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 487: |
Line 276: |
| | | | |
| | <div class="topbar"> | | <div class="topbar"> |
| - | <div style="background: url(https://static.igem.org/mediawiki/2011/6/60/Topbar_imagebackground.png); | + | <div style="filter:alpha(opacity=70);opacity:.7;"> |
| - | 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"> | + | <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> |
"
