|
|
(174 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html> | + | <html xmlns="http://www.w3.org/1999/xhtml"><head> |
- | </a>.
| + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
- | <a href="https://2011.igem.org/wiki/index.php?title=Team:Tec-Monterrey&action=edit"> Editar</a>
| + | <title>wiki</title> |
- | </html> | + | <style type="text/css"> |
| + | <!-- |
| + | #top-section { |
| + | |
| + | height: 100px; |
| + | border: none; |
| + | height:20px |
| + | } |
| | | |
- | <html xmlns="http://www.w3.org/1999/xhtml">
| + | #p-logo { |
- | <head>
| + | position: absolute; |
- | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | display: none; |
- | <title>Untitled Document</title>
| + | |
| + | } |
| + | #footer-box { |
| + | display:none; |
| + | } |
| | | |
- | <style type="text/css">
| |
| | | |
- | .maincontainer {
| + | #catlinks { |
- | height: 768px;
| + | display:none; |
- | width: 1024px;
| + | |
- | background-color: #FFF;
| + | |
- | margin-left:auto;
| + | |
- | margin-right:auto;
| + | |
| } | | } |
- | .texto {
| + | |
- | float: left;
| + | #search-controls { |
- | height: 257px;
| + | display: none; |
- | width: 712px;
| + | |
- | background-color: #E5E5E5;
| + | |
- | background-image: url(https://static.igem.org/mediawiki/2011/6/6d/Espaciotextopaginav1.png);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-position: center center;
| + | |
| } | | } |
| | | |
- | .banner {
| + | #menubar { background: none repeat transparent; } |
- | float: left;
| + | |
- | height: 111px;
| + | |
- | width: 606px;
| + | #menubar ul li a { color: white; } |
- | background-image: url(https://static.igem.org/mediawiki/2011/4/49/Bannerpaginav1.png);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-color: #333;
| + | .right-menu li a { |
- | background-position: center center;
| + | color: black; |
| + | background: none repeat transparent; |
| } | | } |
- | .language {
| + | |
- | float: left;
| + | #content { |
- | height: 111px;
| + | background: none repeat scroll 0 0 transparent; |
- | width: 262px;
| + | border-left: 0 solid; |
- | background-color: #E5E5E5;
| + | border-right: 0 solid; |
- | background-image: url(https://static.igem.org/mediawiki/2011/8/8d/Espacioidiomapaginav1.png);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-position: center center;
| + | |
| } | | } |
- | .maincontainer .texto div {
| + | #content{ |
- | font-family: Tahoma, Geneva, sans-serif;
| + | width: 80%; |
- | font-size: 18px;
| + | |
- | color: #E5E5E5;
| + | |
| } | | } |
- | .maincontainer .texto div p a { | + | |
- | text-decoration: underline;
| + | #headover ul{ |
- | font-family: Tahoma, Geneva, sans-serif; | + | list-style: none; |
- | color: #E5E5E5; | + | 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/4/43/Lefondoleposter.png); |
| + | background-repeat:no-repeat; |
| + | background-size: 100%; |
| + | margin: 0; |
| + | padding: 0; |
| + | margin-left: 10%; |
| + | margin-right: 10%; |
| + | color: #FFFFF; |
| } | | } |
- | .maincontainer .texto div p a:hover {
| + | |
- | color: #4ECDC4; | + | /* ~~ Element/tag selectors ~~ */ |
- | text-decoration: underline; | + | 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; |
| } | | } |
| | | |
| | | |
- | .menubar {
| + | a:link { |
- | float: left; | + | |
- | height: 657px;
| + | color: #F90; |
- | width: 156px; | + | |
| } | | } |
- | .searchlogo {
| + | a:visited { |
- | float: right; | + | color: #c02355; |
- | height: 768px;
| + | text-decoration: underline; |
- | width: 156px; | + | |
| } | | } |
- | .video {
| + | a:hover, a:active, a:focus { |
- | float: left;
| + | text-decoration: none; |
- | height: 400px;
| + | |
- | width: 712px;
| + | |
- | background-color: #E5E5E5;
| + | |
- | background-image: url(https://static.igem.org/mediawiki/2011/5/5b/Espaciovideopaginav1.png);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-position: center center; | + | |
| } | | } |
| | | |
| | | |
- | </style>
| + | .container { |
| + | width: 100%; |
| + | max-width: 1260px; |
| + | min-width: 780px; |
| + | overflow: hidden; |
| + | color:#FFF; |
| + | } |
| | | |
- | <script type="text/javascript">
| |
- | var Spry;
| |
- | if (!Spry) Spry = {};
| |
- | if (!Spry.Widget) Spry.Widget = {};
| |
| | | |
- | Spry.Widget.CollapsiblePanel = function(element, opts)
| + | .sidebar1 { |
- | { | + | float: left; |
- | this.element = this.getElement(element); | + | width: 15%; |
- | this.focusElement = null; | + | padding-bottom: 10px; |
- | this.hoverClass = "CollapsiblePanelTabHover";
| + | background-color:#04191d; |
- | this.openClass = "CollapsiblePanelOpen"; | + | -moz-border-radius: 8px; |
- | this.closedClass = "CollapsiblePanelClosed"; | + | -webkit-border-radius: 8px; |
- | 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; | + | .content { |
| + | |
| + | padding: none; |
| + | width: 80%; |
| + | float: left; |
| + | |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.setOptions(this, opts);
| |
| | | |
- | this.attachBehaviors();
| + | .content ul, .content ol { |
- | }; | + | padding: 0 15px 15px 40px; |
| + | } |
| | | |
- | 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)
| + | ul.nav { |
- | { | + | list-style: none; |
- | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) | + | border-top:none; |
- | return;
| + | margin-bottom: 15px; |
- | ele.className += (ele.className ? " " : "") + className; | + | |
- | };
| + | |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
| + | } |
- | { | + | ul.nav li { |
- | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) | + | border-bottom: 0px solid #04191d; |
- | 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)
| + | ul.nav a, ul.nav a:visited { |
- | return false;
| + | |
- | return true;
| + | |
- | };
| + | |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
| + | padding: 5px 5px 5px 15px; |
- | {
| + | display: block; |
- | if( ele ) | + | text-decoration: none; |
- | ele.style.display = display; | + | color:#FFF; |
- | };
| + | |
| + | } |
| + | ul.nav a:hover, ul.nav a:active, ul.nav a:focus { |
| + | background: #339dff; /*float amarillo*/ |
| + | color: #FFF; |
| + | } |
| | | |
- | 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)
| + | .fltrt { |
- | { | + | float: right; |
- | this.addClassName(this.getTab(), this.hoverClass); | + | margin-left: 8px; |
- | return false; | + | } |
- | }; | + | .fltlft { |
| + | float: left; |
| + | margin-right: 8px; |
| + | } |
| + | .clearfloat { |
| + | clear:both; |
| + | height:0; |
| + | font-size: 1px; |
| + | line-height: 0px; |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
| + | /* panel */ |
| + | .panel, .panelcollapsed |
| { | | { |
- | this.removeClassName(this.getTab(), this.hoverClass); | + | margin: 3px; |
- | return false; | + | 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; |
| + | } |
| | | |
- | 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);
| + | table { |
- | this.addClassName(this.element, this.openClass);
| + | background: none repeat scroll 0 0 transparent} |
- | }; | + | |
| | | |
- | 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);
| + | /* panel heading */ |
- | this.addClassName(this.element, this.closedClass);
| + | .panel h2, .panelcollapsed h2 |
- | };
| + | |
- | | + | |
- | Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
| + | |
| { | | { |
- | if (this.isOpen()) | + | color: #FFF; |
- | this.close();
| + | font-weight: normal; |
- | else | + | margin: 0px; |
- | this.open();
| + | padding: 0px; |
| + | -moz-border-radius: 3px; |
| + | -webkit-border-radius: 3px; |
| + | border-bottom: 0px solid #04191d; |
| | | |
- | this.focus();
| + | } |
| | | |
- | return this.stopPropagation(e);
| + | /* panel heading on rollover */ |
- | };
| + | .panel h2:hover, .panelcollapsed h2:hover { |
| + | background-color: #339dff; |
| + | color: #FFF; |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
| + | /* heading of a collapsed panel */ |
| + | .panelcollapsed h2 |
| { | | { |
- | this.hasFocus = true; | + | background-image: url(arrow-dn.gif); |
- | this.addClassName(this.element, this.focusedClass); | + | background-repeat: no-repeat; |
- | return false; | + | background-position: 280px; |
- | }; | + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
| + | /* panel content - do not set borders or paddings */ |
| + | .panelcontent |
| { | | { |
- | this.hasFocus = false; | + | overflow: hidden; |
- | this.removeClassName(this.element, this.focusedClass); | + | font-size: 14px; |
- | return false;
| + | } |
- | }; | + | |
| | | |
- | Spry.Widget.CollapsiblePanel.KEY_UP = 38;
| + | /* collapsed panel content */ |
- | Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
| + | .panelcollapsed .panelcontent { display: none; } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
| + | --> |
- | { | + | </style><!--[if lte IE 7]> |
- | var key = e.keyCode;
| + | <style> |
- | if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
| + | .content { margin-right: -1px; } |
- | return true;
| + | ul.nav a { zoom: 1; } |
| + | </style> |
| + | <![endif]--> |
| | | |
- | if (this.isOpen() && key == this.closePanelKeyCode) | + | <script type="text/javascript"> |
- | this.close();
| + | <!-- |
- | else if ( key == this.openPanelKeyCode) | + | var noimg = 0; |
- | this.open();
| + | var i = 0; |
| + | var st1 = 100; |
| + | var st2 = 0; |
| + | var speed = 10; |
| | | |
- | return this.stopPropagation(e); | + | //url goes here |
- | };
| + | var imgname = new Array(); |
| + | imgname[0] = "https://static.igem.org/mediawiki/2011/a/a0/Home01.png"; |
| + | imgname[1] = "https://static.igem.org/mediawiki/2011/4/45/Home02.png"; |
| + | imgname[2] = "https://static.igem.org/mediawiki/2011/6/6a/Home03.png"; |
| + | imgname[3] = "https://static.igem.org/mediawiki/2011/d/dd/Home04.png"; |
| + | imgname[4] = "https://static.igem.org/mediawiki/2011/e/ec/Home05.png"; |
| + | imgname[5] = "https://static.igem.org/mediawiki/2011/0/03/Home06.png"; |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
| + | function changeImg(n) { |
- | { | + | var name = imgname[n]; |
- | if (e.preventDefault) e.preventDefault(); | + | var imgobj = document.getElementById('imagered'); |
- | else e.returnValue = false; | + | animTransA(); |
- | if (e.stopPropagation) e.stopPropagation(); | + | imgobj.src = name; |
- | else e.cancelBubble = true; | + | animTransB(); |
- | return false; | + | } |
- | };
| + | function resetAuto(num) { |
| + | noimg = num; |
| + | clearTimeout(timg); |
| + | autoChangeImg(); |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
| + | function autoChangeImg() { |
| + | var s = 500; /*ms*/ |
| + | changeImg(noimg); |
| + | noimg++; |
| + | if (noimg > 4) { noimg = 0;} |
| + | timg = setTimeout("autoChangeImg()",10*s); |
| + | } |
| + | function animTransA() { |
| + | st1 -= speed; |
| + | img = document.getElementById('imagered'); |
| + | img.style.opacity = st1/100; |
| + | img.style.filter = 'alpha(opacity=' + st1 + ')'; |
| + | if (st1 > 0) { t2=setTimeout("animTransA()",50); } |
| + | else { st1 = 100;} |
| + | } |
| + | function animTransB () { |
| + | st2 += speed; |
| + | img = document.getElementById('imagered'); |
| + | img.style.opacity = st2/100; |
| + | img.style.filter = 'alpha(opacity=' + st2 + ')'; |
| + | if (st2 < 100) { t3=setTimeout("animTransB()",50); } |
| + | else { st2 = 0;} |
| + | } |
| + | function resetAlpha() { |
| + | clearTimeout(t2); |
| + | clearTimeout(t3); |
| + | img = document.getElementById('imagered'); |
| + | img.style.opacity = 1; |
| + | st1 = 100; st2 = 0; |
| + | img.style.filter = 'alpha(opacity=' + 100 + ')'; |
| + | } |
| + | |
| + | |
| + | // ----------------------------------------------------------------------------------------------- |
| + | // 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() |
| { | | { |
- | var tab = this.getTab(); | + | loadSettings(); |
- | if (!tab) | + | |
- | return;
| + | // get all headings |
| + | var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); |
| | | |
- | 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) | + | // go through all tags |
| + | for (var i=0; i<headingTags.length; i++) |
| { | | { |
- | // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't | + | var el = headingTags[i]; |
- | // rely on adding the tabindex attribute if it is missing to enable keyboard navigation | + | |
- | // by default. | + | // make sure it's the heading inside a panel |
- | | + | if ( el.parentNode.className != PANEL_COLLAPSED_CLASS) |
- | // Find the first element within the tab container that has a tabindex or the first
| + | if(el.parentNode.className != PANEL_NORMAL_CLASS) |
- | // anchor tag. | + | continue; |
| | | |
- | var tabIndexEle = null;
| |
- | var tabAnchorEle = null;
| |
| | | |
- | this.preorderTraversal(tab, function(node) { | + | // get the text value of the tag |
- | if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
| + | var name = el.firstChild.nodeValue; |
- | {
| + | |
- | var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
| + | // look for the name in loaded settings, apply the normal/collapsed class |
- | if (tabIndexAttr)
| + | if (panelsStatus[name] == "false") |
- | {
| + | el.parentNode.className = PANEL_COLLAPSED_CLASS; |
- | tabIndexEle = node;
| + | else |
- | return true;
| + | if (panelsStatus[name] == "true") |
- | }
| + | el.parentNode.className = PANEL_NORMAL_CLASS; |
- | if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
| + | else |
- | 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); | + | // if no saved setting, see the initial setting |
- | Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false); | + | panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false"; |
- | Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
| + | |
| } | | } |
- | }
| + | |
- | };
| + | // add the click behavor to headings |
- | | + | el.onclick = function() |
- | 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; | + | var target = this.parentNode; |
- | while (!stopTraversal && child) | + | var name = this.firstChild.nodeValue; |
- | { | + | var collapsed = (target.className == PANEL_COLLAPSED_CLASS); |
- | stopTraversal = this.preorderTraversal(child, func);
| + | saveSettings(name, collapsed?"true":"false"); |
- | try { child = child.nextSibling; } catch (e) { child = null; }
| + | animateTogglePanel(target, collapsed); |
- | }
| + | }; |
- | } | + | |
| } | | } |
- | return stopTraversal;
| + | } |
- | }; | + | |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
| + | /** |
| + | * Start the expand/collapse animation of the panel |
| + | * @param panel reference to the panel div |
| + | */ |
| + | function animateTogglePanel(panel, expanding) |
| { | | { |
- | var panel = this.element;
| |
- | var tab = this.getTab();
| |
- | var content = this.getContent();
| |
| | | |
- | if (this.contentIsOpen || this.hasClassName(panel, this.openClass)) | + | // find the .panelcontent div |
- | { | + | var elements = panel.getElementsByTagName("div"); |
- | this.addClassName(panel, this.openClass);
| + | var panelContent = null; |
- | 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()
| + | for (var i=0; i<elements.length; i++) |
- | {
| + | |
- | 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") | + | if (elements[i].className == PANEL_CONTENT_CLASS) |
| { | | { |
- | // The content area is not displayed so in order to calculate the extent | + | panelContent = elements[i]; |
- | // of the content inside it, we have to set its display to block.
| + | break; |
- | | + | |
- | 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;
| |
| } | | } |
| + | |
| + | // make sure the content is visible before getting its height |
| + | panelContent.style.display = "block"; |
| + | |
| + | // get the height of the content |
| + | var contentHeight = panelContent.offsetHeight; |
| | | |
- | this.distance = this.toHeight - this.fromHeight; | + | |
- | this.overflow = c.style.overflow; | + | // 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); |
| + | if (direction > 0) |
| + | collapseAll(); |
| | | |
- | 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()
| + | setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY); |
- | {
| + | } |
- | var self = this;
| + | |
- | this.startTime = (new Date).getTime();
| + | |
- | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); | + | |
- | }; | + | |
| | | |
- | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
| + | /** |
| + | * 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 (this.timer) | + | if (iteration<PANEL_ANIMATION_STEPS) |
| { | | { |
- | clearTimeout(this.timer); | + | panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) +"px"; |
- | | + | iteration++; |
- | // If we're killing the timer, restore the overflow property. | + | setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY); |
- | | + | |
- | this.content.style.overflow = this.overflow; | + | |
| } | | } |
- | | + | else |
- | 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) | + | // set class for the panel |
- | this.content.style.display = "none";
| + | panelContent.parentNode.className = (direction<0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS; |
- | this.content.style.overflow = this.overflow; | + | // clear inline styles |
- | this.content.style.height = this.toHeight + "px";
| + | panelContent.style.display = panelContent.style.height = ""; |
- | if (this.onComplete)
| + | |
- | this.onComplete();
| + | |
- | return;
| + | |
| } | | } |
| + | } |
| | | |
- | var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
| + | // ----------------------------------------------------------------------------------------------- |
- | | + | // Load-Save |
- | this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
| + | // ----------------------------------------------------------------------------------------------- |
- | | + | /** |
- | var self = this;
| + | * Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object |
- | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
| + | */ |
- | };
| + | function loadSettings() |
- | | + | |
- | Spry.Widget.CollapsiblePanelGroup = function(element, opts)
| + | |
| { | | { |
- | this.element = this.getElement(element); | + | // prepare the object that will keep the panel statuses |
- | this.opts = opts; | + | panelsStatus = {}; |
| | | |
- | this.attachBehaviors(); | + | |
- | };
| + | // find the cookie name |
| + | var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); |
| + | if (start == -1) return; |
| + | |
| | | |
- | 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)
| + | // starting point of the value |
- | {
| + | start += PANEL_COOKIE_NAME.length+1; |
- | if (!element || !widget)
| + | |
- | return;
| + | // find end point of the value |
- | if (!element.spry) | + | var end = document.cookie.indexOf(";", start); |
- | element.spry = new Object;
| + | if (end == -1) end = document.cookie.length; |
- | element.spry.collapsiblePanel = widget;
| + | |
- | };
| + | |
| | | |
- | Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
| + | // get the value, split into key:value pairs |
- | {
| + | var cookieValue = unescape(document.cookie.substring(start, end)); |
- | return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null; | + | var panelsData = cookieValue.split("|"); |
- | };
| + | |
| | | |
- | Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
| |
- | {
| |
- | if (!this.element)
| |
- | return [];
| |
- | return this.getElementChildren(this.element);
| |
- | };
| |
| | | |
- | Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
| + | |
- | {
| + | // split each key:value pair and put in object |
- | return this.getPanels()[panelIndex]; | + | for (var i=0; i< panelsData.length; i++) |
- | };
| + | |
- | | + | |
- | 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]; | + | var pair = panelsData[i].split(":"); |
- | this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
| + | panelsStatus[pair[0]] = pair[1]; |
| } | | } |
- | };
| |
| | | |
- | 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()
| + | function expandAll() |
| { | | { |
- | var cpanels = this.getPanels();
| + | for (var key in panelsStatus) |
- | var numCPanels = cpanels.length;
| + | saveSettings(key, "true"); |
- | for (var i = 0; i < numCPanels; i++) | + | |
- | {
| + | setUpPanels(); |
- | var w = this.getElementWidget(cpanels[i]); | + | } |
- | if (w && !w.isOpen()) | + | |
- | w.open();
| + | |
- | }
| + | |
- | };
| + | |
| | | |
- | Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
| + | function collapseAll() |
| { | | { |
- | var cpanels = this.getPanels();
| + | for (var key in panelsStatus) |
- | var numCPanels = cpanels.length;
| + | saveSettings(key, "false"); |
- | for (var i = 0; i < numCPanels; i++) | + | |
- | {
| + | setUpPanels(); |
- | var w = this.getElementWidget(cpanels[i]); | + | |
- | if (w && w.isOpen()) | + | |
- | w.close();
| + | |
- | } | + | |
- | };
| + | |
- | | + | |
- | | + | |
- | </script>
| + | |
- | | + | |
- | | + | |
- | <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>
| + | |
- | | + | |
- | | + | |
- | <style 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
| + | * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days |
- | * on to open or close the panel. | + | * @param key key name to save |
- | *
| + | * @paeam value key value |
- | * 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 {
| + | function saveSettings(key, value) |
- | font: bold 0.7em sans-serif; | + | { |
- | background-color: #FFF; | + | // put the new value in the object |
- | margin: 5px; | + | panelsStatus[key] = value; |
- | padding: 2px; | + | |
- | cursor: pointer; | + | // create an array that will keep the key:value pairs |
- | -moz-user-select: none; | + | var panelsData = []; |
- | -khtml-user-select: none; | + | for (var key in panelsStatus) |
- | font-family: Verdana, Geneva, sans-serif; | + | panelsData.push(key+":"+panelsStatus[key]); |
- | font-size: 20px; | + | |
- | font-weight: normal; | + | // set the cookie expiration date 1 year from now |
- | border-bottom-style: none; | + | 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(); |
| } | | } |
| | | |
- | /* 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
| + | // Register setUpPanels to be executed on load |
- | * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
| + | if (window.addEventListener) |
- | * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
| + | { |
- | *
| + | // the "proper" way |
- | * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
| + | window.addEventListener("load", setUpPanels, false); |
- | * 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 { | + | else |
- | text-decoration: none; | + | if (window.attachEvent) |
- | color: #333; | + | { |
- | list-style-type: none;
| + | // the IE way |
| + | window.attachEvent("onload", setUpPanels); |
| } | | } |
| + | --> |
| + | </script> |
| | | |
| + | </head><body onLoad = "autoChangeImg();"> |
| | | |
- | /* An anchor tag can be used inside of a CollapsiblePanelTab so that the
| + | <div class="container"> |
- | * 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
| + | <div class="topbar"> |
- | * like non-anchor (normal) text.
| + | <div style="filter:alpha(opacity=70);opacity:.7;"> |
- | */
| + | |
- | .CollapsiblePanelTab a { | + | <a href="http://www.itesm.edu/wps/portal?WCM_GLOBAL_CONTEXT="><img src="https://static.igem.org/mediawiki/2011/2/20/Logotec.png" alt="ITESM" name="teclogo" width="202" height="72" id="teclogo"> </a> |
- | color: #333;
| + | <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> |
- | 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 | + | <a href="http://www.bayer.com.mx/bayer/cropscience/bcsmexico.nsf/ID/Home_BayNEW"><img src="https://static.igem.org/mediawiki/2011/9/9f/Logobayerspon.png"width="69" height="67" align="right" alt="nllogo" name="nllogo" id="nl"> </a> |
- | * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
| + | |
- | * whenever the CollapsiblePanel is closed.
| + | |
- | */
| + | |
| | | |
- | .CollapsiblePanelClosed .CollapsiblePanelTab { | + | <a href="http://www.promega.com/"><img src="https://static.igem.org/mediawiki/2011/4/49/Logopromega02.png" width="77" height="67" alt="promega" name="promega" align="right" id="promega"> </a> |
- | /* background-color: #EFEFEF */
| + | |
- | }
| + | |
| | | |
- | /* This is an example of how to change the appearance of the panel tab as the | + | <a href="http://www.uniparts.com.mx/"><img src="https://static.igem.org/mediawiki/2011/1/14/Logouniparts02.png"alt="uniparts" name="uniparts" align="right" width="139" height="60" id="uniparts"> </a> |
- | * 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 {
| |
| | | |
- | }
| + | <p> </p> |
| + | <p> </p> |
| + | </div> |
| + | |
| + | <div class="sidebar1"> |
| + | <ul class="nav"> |
| + | <p> </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/projectoverview">overview</a></p> |
| + | <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">genetic frame</a></p> |
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults/methods">methods</a></p> |
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults">results</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/projectprotocols">protocols</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/sampledata">sample data</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">headquarters</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"> |
| + | |
| | | |
- | </style> | + | <h2>EXTRAS</h2> |
| + | <div class="panelcontent"> |
| + | |
| | | |
- | <style type="text/css"> | + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sitemap">site map</a></p> |
- | @charset "utf-8";
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorsplatinum">sponsors platinum</a></p> |
- | /* CSS Document */ | + | <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--> |
| + | |
| | | |
- | * {
| + | |
- | margin: 0px;
| + | |
- | padding: 0px;
| + | |
- | }
| + | |
- | .maincontainer .menubar #CollapsiblePanel2 .CollapsiblePanelContent #listaproyecto {
| + | |
- | list-style-type: none;
| + | |
- | width: 150px;
| + | |
- | }
| + | |
| | | |
| + | <div class="imagehiglights"> |
| + | |
| + | <div style="text-align:center; float:left;"> |
| + | <p><img src="https://static.igem.org/mediawiki/2011/a/a0/Home01.png" alt="asd" name="image" width="425" height="319" id="imagered" longdesc="http://asdas"> |
| + | </a></p> |
| + | |
| + | <table width="30%" border="0" align="center"> |
| + | <tbody><tr> |
| + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription" onMouseOver="resetAuto(0)"><img name="boton01" src="https://static.igem.org/mediawiki/2011/5/57/Botones01.png" width="40" height="40"></a> </td> |
| | | |
- | #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 {
| + | <td> <a href="#" onMouseOver="resetAuto(1)"> |
- | background-color: #4ECDC4;
| + | <img name="boton02" src="https://static.igem.org/mediawiki/2011/d/d7/Botones02.png" |
- | list-style-type: none;
| + | width="40" height="40"></a> </td> |
- | }
| + | |
| | | |
| + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/teamha/AR" onMouseOver="resetAuto(2)"><img name="boton03" src="https://static.igem.org/mediawiki/2011/9/95/Botones03.png" width="40" height="40" ></a> </td> |
| + | |
| + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/video" onMouseOver="resetAuto(3)"><img name="rouge" src="https://static.igem.org/mediawiki/2011/e/e5/Botones04.png" width="40 height="40"></a> </td> |
| + | |
| | | |
- | #listaproyecto li {
| + | <td> <a href="http://area.autodesk.com/blogs/cory/maya_igem_and_tec_de_monterrey" onMouseOver="resetAuto(4)"><img name="boton04" src="https://static.igem.org/mediawiki/2011/f/f5/Botones05.png" width="40" height="40" alt="welcome"></a> </td> |
- | 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;
| + | |
- | list-style-type: none;
| + | |
- | }
| + | |
- | .descripmainlayout .descripmenu #CollapsiblePanel5 .CollapsiblePanelContent ul li a:hover {
| + | |
- | background-color: #4ECDC4;
| + | |
- | list-style-type: none;
| + | |
- | }
| + | |
| | | |
| + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers" onMouseOver="resetAuto(5)"><img name="boton06" src="https://static.igem.org/mediawiki/2011/7/72/Botones06.png" width="40" height="40" ></a> </td> |
| + | </tr> |
| + | </tbody></table> |
| + | |
| + | <p><br> |
| + | </p> |
| + | </div> |
| + | |
| + | <div class="tweets"> |
| + | <div style="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: 200, |
| + | height: 250, |
| + | theme: { |
| + | shell: { |
| + | background: '#000000', |
| + | color: '#ffffff' |
| + | }, |
| + | tweets: { |
| + | background: '#04191d', |
| + | color: '#ffffff', |
| + | links: '#93d740' |
| + | } |
| + | }, |
| + | features: { |
| + | scrollbar: false, |
| + | loop: false, |
| + | live: false, |
| + | hashtags: true, |
| + | timestamp: true, |
| + | avatars: false, |
| + | behavior: 'all' |
| + | } |
| + | }).render().setUser('igemTecMty11').start(); |
| + | </script> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
- | </style>
| |
| | | |
- | </head>
| + | |
- | | + | |
- | <body>
| + | |
- | <div class="maincontainer">
| + | |
- | <div class="banner"> </div> | + | |
- | <div class="language"> </div> | + | |
- | <div class="searchlogo">
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p><a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2011/a/a1/Logoigempeginav1.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p><img src="https://static.igem.org/mediawiki/2011/5/5e/Tec-Monterrey_logo.png" alt="" name="logotec" width="146" height="52" id="logotec" /> </p>
| + | |
- | | + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <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/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
- | <p> </p>
| + | |
- | <p> </p>
| + | |
- | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
- |
| + | |
- | </div>
| + | |
- | <div class="menubar">
| + | |
- | <div id="CollapsiblePanel1" class="CollapsiblePanel">
| + | |
- | <div class="CollapsiblePanelTab" tabindex="0"><a href="https://2011.igem.org/Team:Tec-Monterrey">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="https://2011.igem.org/Team:Tec-Monterrey">parts</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">safety</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription">description</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterreyl">modeling</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">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="https://2011.igem.org/Team:Tec-Monterrey">members</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">profile</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">gallery</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">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="https://2011.igem.org/Team:Tec-Monterrey">sitemap</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">human approach</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">microcongreso</a></li>
| + | |
- | <li><a href="https://2011.igem.org/Team:Tec-Monterrey">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><a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription">project description</a> and <a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">safety pages</a></p>
| + | |
- | <p>are ready! </p>
| + | |
- | click on the link above or look for them in our menu.</p>
| + | |
- | </p>
| + | |
- | </div></div>
| + | |
- | </div>
| + | |
| | | |
- | </body>
| |
| | | |
- | </html> | + | </div></div></body></html> |