Team:Tec-Monterrey
From 2011.igem.org
(Difference between revisions)
Line 18: | Line 18: | ||
<!-- *** End of the alert box *** --> | <!-- *** End of the alert box *** --> | ||
+ | |||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>Untitled Document</title> | ||
+ | |||
+ | <style media="screen" type="text/css"> | ||
+ | |||
+ | .maincontainer { | ||
+ | height: 768px; | ||
+ | width: 1024px; | ||
+ | background-color: #FFF; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | .texto { | ||
+ | float: left; | ||
+ | height: 257px; | ||
+ | width: 712px; | ||
+ | background-color: #E5E5E5; | ||
+ | background-image: url(images/texto.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | float: left; | ||
+ | height: 111px; | ||
+ | width: 606px; | ||
+ | background-image: url(images/banner.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-color: #333; | ||
+ | background-position: center center; | ||
+ | } | ||
+ | .language { | ||
+ | float: left; | ||
+ | height: 111px; | ||
+ | width: 262px; | ||
+ | background-color: #E5E5E5; | ||
+ | background-image: url(images/language.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | } | ||
+ | .maincontainer .texto div { | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | font-size: 18px; | ||
+ | color: #E5E5E5; | ||
+ | } | ||
+ | .maincontainer .texto div p a { | ||
+ | text-decoration: underline; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | color: #E5E5E5; | ||
+ | } | ||
+ | .maincontainer .texto div p a:hover { | ||
+ | color: #4ECDC4; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | |||
+ | .menubar { | ||
+ | float: left; | ||
+ | height: 657px; | ||
+ | width: 156px; | ||
+ | } | ||
+ | .searchlogo { | ||
+ | float: right; | ||
+ | height: 768px; | ||
+ | width: 156px; | ||
+ | } | ||
+ | .video { | ||
+ | float: left; | ||
+ | height: 400px; | ||
+ | width: 712px; | ||
+ | background-color: #E5E5E5; | ||
+ | background-image: url(images/video.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <style media="screen" type="text/css"> | ||
+ | |||
+ | (function() { // BeginSpryComponent | ||
+ | |||
+ | if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {}; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel = function(element, opts) | ||
+ | { | ||
+ | this.element = this.getElement(element); | ||
+ | this.focusElement = null; | ||
+ | this.hoverClass = "CollapsiblePanelTabHover"; | ||
+ | this.openClass = "CollapsiblePanelOpen"; | ||
+ | this.closedClass = "CollapsiblePanelClosed"; | ||
+ | this.focusedClass = "CollapsiblePanelFocused"; | ||
+ | this.enableAnimation = true; | ||
+ | this.enableKeyboardNavigation = true; | ||
+ | this.animator = null; | ||
+ | this.hasFocus = false; | ||
+ | this.contentIsOpen = true; | ||
+ | |||
+ | this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN; | ||
+ | this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.setOptions(this, opts); | ||
+ | |||
+ | this.attachBehaviors(); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele) | ||
+ | { | ||
+ | if (ele && typeof ele == "string") | ||
+ | return document.getElementById(ele); | ||
+ | return ele; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className) | ||
+ | { | ||
+ | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) | ||
+ | return; | ||
+ | ele.className += (ele.className ? " " : "") + className; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className) | ||
+ | { | ||
+ | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) | ||
+ | return; | ||
+ | ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className) | ||
+ | { | ||
+ | if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1) | ||
+ | return false; | ||
+ | return true; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display) | ||
+ | { | ||
+ | if( ele ) | ||
+ | ele.style.display = display; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps) | ||
+ | { | ||
+ | if (!optionsObj) | ||
+ | return; | ||
+ | for (var optionName in optionsObj) | ||
+ | { | ||
+ | if (ignoreUndefinedProps && optionsObj[optionName] == undefined) | ||
+ | continue; | ||
+ | obj[optionName] = optionsObj[optionName]; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e) | ||
+ | { | ||
+ | this.addClassName(this.getTab(), this.hoverClass); | ||
+ | return false; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e) | ||
+ | { | ||
+ | this.removeClassName(this.getTab(), this.hoverClass); | ||
+ | return false; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.open = function() | ||
+ | { | ||
+ | this.contentIsOpen = true; | ||
+ | if (this.enableAnimation) | ||
+ | { | ||
+ | if (this.animator) | ||
+ | this.animator.stop(); | ||
+ | this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition }); | ||
+ | this.animator.start(); | ||
+ | } | ||
+ | else | ||
+ | this.setDisplay(this.getContent(), "block"); | ||
+ | |||
+ | this.removeClassName(this.element, this.closedClass); | ||
+ | this.addClassName(this.element, this.openClass); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.close = function() | ||
+ | { | ||
+ | this.contentIsOpen = false; | ||
+ | if (this.enableAnimation) | ||
+ | { | ||
+ | if (this.animator) | ||
+ | this.animator.stop(); | ||
+ | this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition }); | ||
+ | this.animator.start(); | ||
+ | } | ||
+ | else | ||
+ | this.setDisplay(this.getContent(), "none"); | ||
+ | |||
+ | this.removeClassName(this.element, this.openClass); | ||
+ | this.addClassName(this.element, this.closedClass); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e) | ||
+ | { | ||
+ | if (this.isOpen()) | ||
+ | this.close(); | ||
+ | else | ||
+ | this.open(); | ||
+ | |||
+ | this.focus(); | ||
+ | |||
+ | return this.stopPropagation(e); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e) | ||
+ | { | ||
+ | this.hasFocus = true; | ||
+ | this.addClassName(this.element, this.focusedClass); | ||
+ | return false; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e) | ||
+ | { | ||
+ | this.hasFocus = false; | ||
+ | this.removeClassName(this.element, this.focusedClass); | ||
+ | return false; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.KEY_UP = 38; | ||
+ | Spry.Widget.CollapsiblePanel.KEY_DOWN = 40; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e) | ||
+ | { | ||
+ | var key = e.keyCode; | ||
+ | if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode)) | ||
+ | return true; | ||
+ | |||
+ | if (this.isOpen() && key == this.closePanelKeyCode) | ||
+ | this.close(); | ||
+ | else if ( key == this.openPanelKeyCode) | ||
+ | this.open(); | ||
+ | |||
+ | return this.stopPropagation(e); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e) | ||
+ | { | ||
+ | if (e.preventDefault) e.preventDefault(); | ||
+ | else e.returnValue = false; | ||
+ | if (e.stopPropagation) e.stopPropagation(); | ||
+ | else e.cancelBubble = true; | ||
+ | return false; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function() | ||
+ | { | ||
+ | var tab = this.getTab(); | ||
+ | if (!tab) | ||
+ | return; | ||
+ | |||
+ | var self = this; | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false); | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false); | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false); | ||
+ | |||
+ | if (this.enableKeyboardNavigation) | ||
+ | { | ||
+ | // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't | ||
+ | // rely on adding the tabindex attribute if it is missing to enable keyboard navigation | ||
+ | // by default. | ||
+ | |||
+ | // Find the first element within the tab container that has a tabindex or the first | ||
+ | // anchor tag. | ||
+ | |||
+ | var tabIndexEle = null; | ||
+ | var tabAnchorEle = null; | ||
+ | |||
+ | this.preorderTraversal(tab, function(node) { | ||
+ | if (node.nodeType == 1 /* NODE.ELEMENT_NODE */) | ||
+ | { | ||
+ | var tabIndexAttr = tab.attributes.getNamedItem("tabindex"); | ||
+ | if (tabIndexAttr) | ||
+ | { | ||
+ | tabIndexEle = node; | ||
+ | return true; | ||
+ | } | ||
+ | if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") | ||
+ | tabAnchorEle = node; | ||
+ | } | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | if (tabIndexEle) | ||
+ | this.focusElement = tabIndexEle; | ||
+ | else if (tabAnchorEle) | ||
+ | this.focusElement = tabAnchorEle; | ||
+ | |||
+ | if (this.focusElement) | ||
+ | { | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false); | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false); | ||
+ | Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false); | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture) | ||
+ | { | ||
+ | try | ||
+ | { | ||
+ | if (element.addEventListener) | ||
+ | element.addEventListener(eventType, handler, capture); | ||
+ | else if (element.attachEvent) | ||
+ | element.attachEvent("on" + eventType, handler); | ||
+ | } | ||
+ | catch (e) {} | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func) | ||
+ | { | ||
+ | var stopTraversal = false; | ||
+ | if (root) | ||
+ | { | ||
+ | stopTraversal = func(root); | ||
+ | if (root.hasChildNodes()) | ||
+ | { | ||
+ | var child = root.firstChild; | ||
+ | while (!stopTraversal && child) | ||
+ | { | ||
+ | stopTraversal = this.preorderTraversal(child, func); | ||
+ | try { child = child.nextSibling; } catch (e) { child = null; } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return stopTraversal; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function() | ||
+ | { | ||
+ | var panel = this.element; | ||
+ | var tab = this.getTab(); | ||
+ | var content = this.getContent(); | ||
+ | |||
+ | if (this.contentIsOpen || this.hasClassName(panel, this.openClass)) | ||
+ | { | ||
+ | this.addClassName(panel, this.openClass); | ||
+ | this.removeClassName(panel, this.closedClass); | ||
+ | this.setDisplay(content, "block"); | ||
+ | this.contentIsOpen = true; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | this.removeClassName(panel, this.openClass); | ||
+ | this.addClassName(panel, this.closedClass); | ||
+ | this.setDisplay(content, "none"); | ||
+ | this.contentIsOpen = false; | ||
+ | } | ||
+ | |||
+ | this.attachPanelHandlers(); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.getTab = function() | ||
+ | { | ||
+ | return this.getElementChildren(this.element)[0]; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.getContent = function() | ||
+ | { | ||
+ | return this.getElementChildren(this.element)[1]; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.isOpen = function() | ||
+ | { | ||
+ | return this.contentIsOpen; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element) | ||
+ | { | ||
+ | var children = []; | ||
+ | var child = element.firstChild; | ||
+ | while (child) | ||
+ | { | ||
+ | if (child.nodeType == 1 /* Node.ELEMENT_NODE */) | ||
+ | children.push(child); | ||
+ | child = child.nextSibling; | ||
+ | } | ||
+ | return children; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.prototype.focus = function() | ||
+ | { | ||
+ | if (this.focusElement && this.focusElement.focus) | ||
+ | this.focusElement.focus(); | ||
+ | }; | ||
+ | |||
+ | ///////////////////////////////////////////////////// | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts) | ||
+ | { | ||
+ | this.timer = null; | ||
+ | this.interval = 0; | ||
+ | |||
+ | this.fps = 60; | ||
+ | this.duration = 500; | ||
+ | this.startTime = 0; | ||
+ | |||
+ | this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition; | ||
+ | |||
+ | this.onComplete = null; | ||
+ | |||
+ | this.panel = panel; | ||
+ | this.content = panel.getContent(); | ||
+ | this.doOpen = doOpen; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.setOptions(this, opts, true); | ||
+ | |||
+ | this.interval = Math.floor(1000 / this.fps); | ||
+ | |||
+ | var c = this.content; | ||
+ | |||
+ | var curHeight = c.offsetHeight ? c.offsetHeight : 0; | ||
+ | this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight; | ||
+ | |||
+ | if (!doOpen) | ||
+ | this.toHeight = 0; | ||
+ | else | ||
+ | { | ||
+ | if (c.style.display == "none") | ||
+ | { | ||
+ | // The content area is not displayed so in order to calculate the extent | ||
+ | // of the content inside it, we have to set its display to block. | ||
+ | |||
+ | c.style.visibility = "hidden"; | ||
+ | c.style.display = "block"; | ||
+ | } | ||
+ | |||
+ | // Clear the height property so we can calculate | ||
+ | // the full height of the content we are going to show. | ||
+ | |||
+ | c.style.height = ""; | ||
+ | this.toHeight = c.offsetHeight; | ||
+ | } | ||
+ | |||
+ | this.distance = this.toHeight - this.fromHeight; | ||
+ | this.overflow = c.style.overflow; | ||
+ | |||
+ | c.style.height = this.fromHeight + "px"; | ||
+ | c.style.visibility = "visible"; | ||
+ | c.style.overflow = "hidden"; | ||
+ | c.style.display = "block"; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function() | ||
+ | { | ||
+ | var self = this; | ||
+ | this.startTime = (new Date).getTime(); | ||
+ | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function() | ||
+ | { | ||
+ | if (this.timer) | ||
+ | { | ||
+ | clearTimeout(this.timer); | ||
+ | |||
+ | // If we're killing the timer, restore the overflow property. | ||
+ | |||
+ | this.content.style.overflow = this.overflow; | ||
+ | } | ||
+ | |||
+ | this.timer = null; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function() | ||
+ | { | ||
+ | var curTime = (new Date).getTime(); | ||
+ | var elapsedTime = curTime - this.startTime; | ||
+ | |||
+ | if (elapsedTime >= this.duration) | ||
+ | { | ||
+ | if (!this.doOpen) | ||
+ | this.content.style.display = "none"; | ||
+ | this.content.style.overflow = this.overflow; | ||
+ | this.content.style.height = this.toHeight + "px"; | ||
+ | if (this.onComplete) | ||
+ | this.onComplete(); | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration); | ||
+ | |||
+ | this.content.style.height = ((ht < 0) ? 0 : ht) + "px"; | ||
+ | |||
+ | var self = this; | ||
+ | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup = function(element, opts) | ||
+ | { | ||
+ | this.element = this.getElement(element); | ||
+ | this.opts = opts; | ||
+ | |||
+ | this.attachBehaviors(); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions; | ||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement; | ||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget) | ||
+ | { | ||
+ | if (!element || !widget) | ||
+ | return; | ||
+ | if (!element.spry) | ||
+ | element.spry = new Object; | ||
+ | element.spry.collapsiblePanel = widget; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element) | ||
+ | { | ||
+ | return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function() | ||
+ | { | ||
+ | if (!this.element) | ||
+ | return []; | ||
+ | return this.getElementChildren(this.element); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex) | ||
+ | { | ||
+ | return this.getPanels()[panelIndex]; | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function() | ||
+ | { | ||
+ | if (!this.element) | ||
+ | return; | ||
+ | |||
+ | var cpanels = this.getPanels(); | ||
+ | var numCPanels = cpanels.length; | ||
+ | for (var i = 0; i < numCPanels; i++) | ||
+ | { | ||
+ | var cpanel = cpanels[i]; | ||
+ | this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts)); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex) | ||
+ | { | ||
+ | var w = this.getElementWidget(this.getPanel(panelIndex)); | ||
+ | if (w && !w.isOpen()) | ||
+ | w.open(); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex) | ||
+ | { | ||
+ | var w = this.getElementWidget(this.getPanel(panelIndex)); | ||
+ | if (w && w.isOpen()) | ||
+ | w.close(); | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function() | ||
+ | { | ||
+ | var cpanels = this.getPanels(); | ||
+ | var numCPanels = cpanels.length; | ||
+ | for (var i = 0; i < numCPanels; i++) | ||
+ | { | ||
+ | var w = this.getElementWidget(cpanels[i]); | ||
+ | if (w && !w.isOpen()) | ||
+ | w.open(); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function() | ||
+ | { | ||
+ | var cpanels = this.getPanels(); | ||
+ | var numCPanels = cpanels.length; | ||
+ | for (var i = 0; i < numCPanels; i++) | ||
+ | { | ||
+ | var w = this.getElementWidget(cpanels[i]); | ||
+ | if (w && w.isOpen()) | ||
+ | w.close(); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | })() | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <style media="screen" type="text/css"> | ||
+ | @charset "UTF-8"; | ||
+ | |||
+ | /* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */ | ||
+ | |||
+ | /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ | ||
+ | |||
+ | /* This is the selector for the main CollapsiblePanel container. For our | ||
+ | * default style, the CollapsiblePanel is responsible for drawing the borders | ||
+ | * around the widget. | ||
+ | * | ||
+ | * If you want to constrain the width of the CollapsiblePanel widget, set a width on | ||
+ | * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill | ||
+ | * up available space. | ||
+ | * | ||
+ | * The name of the class ("CollapsiblePanel") used in this selector is not necessary | ||
+ | * to make the widget function. You can use any class name you want to style the | ||
+ | * CollapsiblePanel container. | ||
+ | */ | ||
+ | |||
+ | @charset "UTF-8"; | ||
+ | .CollapsiblePanel { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | border-top-width: 0px; | ||
+ | border-right-width: 0px; | ||
+ | border-bottom-width: 0px; | ||
+ | border-left-width: 0px; | ||
+ | border-top-style: none; | ||
+ | border-right-style: none; | ||
+ | border-bottom-style: none; | ||
+ | border-left-style: none; | ||
+ | border-top-color: #FFF; | ||
+ | border-right-color: #FFF; | ||
+ | border-bottom-color: #FFF; | ||
+ | border-left-color: #FFF; | ||
+ | } | ||
+ | |||
+ | /* This is the selector for the CollapsiblePanelTab. This container houses | ||
+ | * the title for the panel. This is also the container that the user clicks | ||
+ | * on to open or close the panel. | ||
+ | * | ||
+ | * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary | ||
+ | * to make the widget function. You can use any class name you want to style an | ||
+ | * CollapsiblePanel panel tab container. | ||
+ | */ | ||
+ | .CollapsiblePanelTab { | ||
+ | font: bold 0.7em sans-serif; | ||
+ | background-color: #FFF; | ||
+ | margin: 5px; | ||
+ | padding: 2px; | ||
+ | cursor: pointer; | ||
+ | -moz-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | font-size: 20px; | ||
+ | font-weight: normal; | ||
+ | border-bottom-style: none; | ||
+ | } | ||
+ | |||
+ | /* This is the selector for a CollapsiblePanel's Content area. It's important to note that | ||
+ | * you should never put any padding on the content area element if you plan to | ||
+ | * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content | ||
+ | * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate. | ||
+ | * | ||
+ | * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary | ||
+ | * to make the widget function. You can use any class name you want to style a | ||
+ | * CollapsiblePanel content container. | ||
+ | */ | ||
+ | .CollapsiblePanelContent { | ||
+ | margin: 5px; | ||
+ | padding: 0px; | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | font-size: 15px; | ||
+ | text-decoration: none; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .descripmainlayout .descripmenu .menubar #CollapsiblePanel3 .CollapsiblePanelContent #listaproyecto li a { | ||
+ | text-decoration: none; | ||
+ | color: #333; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* An anchor tag can be used inside of a CollapsiblePanelTab so that the | ||
+ | * keyboard focus ring appears *inside* the tab instead of around the tab. | ||
+ | * This is an example of how to make the text within the anchor tag look | ||
+ | * like non-anchor (normal) text. | ||
+ | */ | ||
+ | .CollapsiblePanelTab a { | ||
+ | color: #333; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* This is an example of how to change the appearance of the panel tab that is | ||
+ | * currently open. The class "CollapsiblePanelOpen" is programatically added and removed | ||
+ | * from panels as the user clicks on the tabs within the CollapsiblePanel. | ||
+ | */ | ||
+ | .CollapsiblePanelOpen .CollapsiblePanelTab { | ||
+ | background-color: #4ECDC4; | ||
+ | } | ||
+ | |||
+ | /* This is an example of how to change the appearance of the panel tab when the | ||
+ | * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed | ||
+ | * whenever the CollapsiblePanel is closed. | ||
+ | */ | ||
+ | |||
+ | .CollapsiblePanelClosed .CollapsiblePanelTab { | ||
+ | /* background-color: #EFEFEF */ | ||
+ | } | ||
+ | |||
+ | /* This is an example of how to change the appearance of the panel tab as the | ||
+ | * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added | ||
+ | * and removed from panel tab containers as the mouse enters and exits the tab container. | ||
+ | */ | ||
+ | .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover { | ||
+ | background-color: #4ECDC4; | ||
+ | } | ||
+ | |||
+ | /* This is an example of how to change the appearance of all the panel tabs when the | ||
+ | * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed | ||
+ | * whenever the CollapsiblePanel gains or loses keyboard focus. | ||
+ | */ | ||
+ | .CollapsiblePanelFocused .CollapsiblePanelTab { | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <style media="screen" type="text/css"> | ||
+ | @charset "utf-8"; | ||
+ | /* CSS Document */ | ||
+ | |||
+ | * { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | .maincontainer .menubar #CollapsiblePanel2 .CollapsiblePanelContent #listaproyecto { | ||
+ | list-style-type: none; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #listaproyecto li a { | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | color: #333; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | height: 25px; | ||
+ | width: 120px; | ||
+ | padding-left: 20px; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | #listaproyecto li a:hover { | ||
+ | background-color: #4ECDC4; | ||
+ | } | ||
+ | |||
+ | |||
+ | #listaproyecto li { | ||
+ | height: 25px; | ||
+ | width: 100px; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .maincontainer .menubar #CollapsiblePanel3 .CollapsiblePanelContent p a { | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | font-size: 15px; | ||
+ | color: #333; | ||
+ | text-decoration: none; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .descripmainlayout .descripmenu #CollapsiblePanel3 .CollapsiblePanelContent ul li a { | ||
+ | color: #333; | ||
+ | text-decoration: none; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .CollapsiblePanelContent ul li a { | ||
+ | display: block; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | color: #333; | ||
+ | text-decoration: none; | ||
+ | font-size: 15px; | ||
+ | height: 25px; | ||
+ | width: 120px; | ||
+ | padding-left: 20px; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .descripmainlayout .descripmenu #CollapsiblePanel3 .CollapsiblePanelContent ul li a:hover { | ||
+ | background-color: #4ECDC4; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .descripmainlayout .descripmenu #CollapsiblePanel4 .CollapsiblePanelContent ul li a:hover { | ||
+ | background-color: #4ECDC4; | ||
+ | } | ||
+ | .descripmainlayout .descripmenu #CollapsiblePanel5 .CollapsiblePanelContent ul li a:hover { | ||
+ | background-color: #4ECDC4; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div class="maincontainer"> | ||
+ | <div class="banner"> </div> | ||
+ | <div class="language"> </div> | ||
+ | <div class="searchlogo"> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p><img src="images/logotec.png" alt="" name="logotec" width="146" height="52" id="logotec" /> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </div> | ||
+ | <div class="menubar"> | ||
+ | <div id="CollapsiblePanel1" class="CollapsiblePanel"> | ||
+ | <div class="CollapsiblePanelTab" tabindex="0"><a href="paginaigem.html">HOME</a></div> | ||
+ | <div class="CollapsiblePanelContent"></div> | ||
+ | </div> | ||
+ | <div id="CollapsiblePanel2" class="CollapsiblePanel"> | ||
+ | <div class="CollapsiblePanelTab" tabindex="0">PROJECT</div> | ||
+ | <div class="CollapsiblePanelContent"> | ||
+ | <ul id="listaproyecto"> | ||
+ | <li><a href="paginaigem.html">parts</a></li> | ||
+ | <li><a href="paginasafety.html">safety</a></li> | ||
+ | <li><a href="paginadescripcionproject.html">description</a></li> | ||
+ | <li><a href="paginaigem.html">modeling</a></li> | ||
+ | <li><a href="paginaigem.html">results</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="CollapsiblePanel3" class="CollapsiblePanel"> | ||
+ | <div class="CollapsiblePanelTab" tabindex="0">TEAM</div> | ||
+ | <div class="CollapsiblePanelContent"> | ||
+ | |||
+ | <ul id="listaproyecto"> | ||
+ | <li><a href="paginaigem.html">members</a></li> | ||
+ | <li><a href="paginaigem.html">profile</a></li> | ||
+ | <li><a href="paginaigem.html">gallery</a></li> | ||
+ | <li><a href="paginaigem.html">installations</a></li> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div id="CollapsiblePanel4" class="CollapsiblePanel"> | ||
+ | <div class="CollapsiblePanelTab" tabindex="0">EXTRAS</div> | ||
+ | <div class="CollapsiblePanelContent"> | ||
+ | <ul id="listaproyecto"> | ||
+ | <li><a href="paginaigem.html">sitemap</a></li> | ||
+ | <li><a href="paginaigem.html">human approach</a></li> | ||
+ | <li><a href="paginamicrocongreso.html">microcongreso</a></li> | ||
+ | <li><a href="paginaigem.html">sponsors</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="video"> </div> | ||
+ | <div class="texto"> | ||
+ | <p> </p> | ||
+ | <div style="text-align: center;"></p> | ||
+ | </p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p><a href="paginadescripcionproject.html">project description</a> and <a href="paginasafetypage.html">safety pages</a></p> | ||
+ | <p>are ready! </p> | ||
+ | <p> </p> | ||
+ | click on the link above or look for them in our menu.</p> | ||
+ | </p> | ||
+ | </div></div> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"); | ||
+ | var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2"); | ||
+ | var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3"); | ||
+ | var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4"); | ||
+ | </script> | ||
+ | </body> | ||
+ | |||
+ | </html> | ||
Revision as of 22:43, 8 July 2011
This is a template page. READ THESE INSTRUCTIONS.
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples HERE.
Editar
You MUST have a team description page, a project abstract, a complete project description, a lab notebook, and a safety page. PLEASE keep all of your pages within your teams namespace.
project description and safety pages
are ready!
click on the link above or look for them in our menu.
You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing. | |
Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs) | |
Team Example |
Home | Team | Official Team Profile | Project | Parts Submitted to the Registry | Modeling | Notebook | Safety | Attributions |
---|