|
|
(189 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <!-- *** What falls between these lines is the Alert Box! You can remove it from your pages once you have read and understood the alert *** --> | + | <html xmlns="http://www.w3.org/1999/xhtml"><head> |
| + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| + | <title>wiki</title> |
| + | <style type="text/css"> |
| + | <!-- |
| + | #top-section { |
| + | |
| + | height: 100px; |
| + | border: none; |
| + | height:20px |
| + | } |
| | | |
- | <html>
| + | #p-logo { |
- | <div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
| + | position: absolute; |
- | <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
| + | display: none; |
- | This is a template page. READ THESE INSTRUCTIONS.
| + | |
- | </div>
| + | } |
- | <div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
| + | #footer-box { |
- | 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 <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
| + | display:none; |
- | <a href="https://2011.igem.org/wiki/index.php?title=Team:Tec-Monterrey&action=edit"> Editar</a>
| + | } |
- | </div>
| + | |
- | <div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
| + | |
- | You <strong>MUST</strong> 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.
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </html>
| + | |
| | | |
- | <!-- *** End of the alert box *** -->
| |
| | | |
| + | #catlinks { |
| + | display:none; |
| + | } |
| | | |
- | <html xmlns="http://www.w3.org/1999/xhtml">
| + | #search-controls { |
- | <head>
| + | display: none; |
- | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | } |
- | <title>Untitled Document</title>
| + | |
| | | |
- | <style media="screen" type="text/css">
| + | #menubar { background: none repeat transparent; } |
| | | |
- | .maincontainer {
| + | |
- | height: 768px;
| + | #menubar ul li a { color: white; } |
- | width: 1024px;
| + | |
- | background-color: #FFF;
| + | |
- | margin-left:auto;
| + | .right-menu li a { |
- | margin-right:auto;
| + | color: black; |
| + | background: none repeat transparent; |
| } | | } |
- | .texto {
| + | |
- | float: left;
| + | #content { |
- | height: 257px;
| + | background: none repeat scroll 0 0 transparent; |
- | width: 712px;
| + | border-left: 0 solid; |
- | background-color: #E5E5E5;
| + | border-right: 0 solid; |
- | background-image: url(https://2011.igem.org/File:Espaciotextopaginav1.png);
| + | } |
- | background-repeat: no-repeat;
| + | #content{ |
- | background-position: center center;
| + | width: 80%; |
| } | | } |
| | | |
- | .banner {
| + | #headover ul{ |
- | float: left;
| + | list-style: none; |
- | height: 111px;
| + | display: none; |
- | width: 606px; | + | position: absolute; |
- | background-image: url(https://static.igem.org/mediawiki/2011/4/49/Bannerpaginav1.png); | + | top: 1.2em; |
- | background-repeat: no-repeat;
| + | left: 0.2em; |
- | background-color: #333;
| + | } |
- | background-position: center center; | + | |
| + | .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; |
| } | | } |
- | .language {
| + | |
- | float: left;
| + | /* ~~ Element/tag selectors ~~ */ |
- | height: 111px;
| + | ul, ol, dl { |
- | width: 262px;
| + | padding: 0; |
- | background-color: #E5E5E5;
| + | margin: 0; |
- | background-image: url(images/language.png);
| + | |
- | background-repeat: no-repeat; | + | |
- | background-position: center center; | + | |
| } | | } |
- | .maincontainer .texto div {
| + | h1, h2, h3, h4, h5, h6, p { |
- | font-family: Tahoma, Geneva, sans-serif; | + | margin-top: 0; |
- | font-size: 18px; | + | padding-right: 10px; |
- | color: #E5E5E5; | + | padding-left: 10px; |
| } | | } |
- | .maincontainer .texto div p a {
| + | a img { |
- | text-decoration: underline; | + | border: none; |
- | font-family: Tahoma, Geneva, sans-serif;
| + | |
- | color: #E5E5E5;
| + | |
| } | | } |
- | .maincontainer .texto div p a:hover {
| + | |
- | color: #4ECDC4; | + | |
| + | a:link { |
| + | |
| + | color: #F90; |
| + | } |
| + | a:visited { |
| + | color: #c02355; |
| text-decoration: underline; | | text-decoration: underline; |
| + | } |
| + | a:hover, a:active, a:focus { |
| + | text-decoration: none; |
| } | | } |
| | | |
| | | |
- | .menubar { | + | .container { |
| + | width: 100%; |
| + | max-width: 1260px; |
| + | min-width: 780px; |
| + | overflow: hidden; |
| + | color:#FFF; |
| + | } |
| + | |
| + | |
| + | .sidebar1 { |
| float: left; | | float: left; |
- | height: 657px; | + | width: 15%; |
- | width: 156px; | + | padding-bottom: 10px; |
| + | background-color:#04191d; |
| + | -moz-border-radius: 8px; |
| + | -webkit-border-radius: 8px; |
| + | |
| } | | } |
- | .searchlogo { | + | .content { |
- | float: right; | + | |
- | height: 768px; | + | padding: none; |
- | width: 156px; | + | width: 80%; |
- | }
| + | |
- | .video {
| + | |
| float: left; | | float: left; |
- | height: 400px; | + | |
- | width: 712px;
| + | |
- | background-color: #E5E5E5;
| + | |
- | background-image: url(images/video.png);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-position: center center;
| + | |
| } | | } |
| | | |
| | | |
- | </style>
| + | .content ul, .content ol { |
| + | padding: 0 15px 15px 40px; |
| + | } |
| | | |
- | <style media="screen" type="text/css">
| |
| | | |
- | (function() { // BeginSpryComponent
| + | ul.nav { |
| + | list-style: none; |
| + | border-top:none; |
| + | margin-bottom: 15px; |
| | | |
- | if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
| + | } |
| + | ul.nav li { |
| + | border-bottom: 0px solid #04191d; |
| | | |
- | Spry.Widget.CollapsiblePanel = function(element, opts)
| + | |
- | {
| + | } |
- | this.element = this.getElement(element); | + | ul.nav a, ul.nav a:visited { |
- | 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; | + | padding: 5px 5px 5px 15px; |
- | this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP; | + | display: block; |
| + | text-decoration: none; |
| + | color:#FFF; |
| + | |
| + | } |
| + | ul.nav a:hover, ul.nav a:active, ul.nav a:focus { |
| + | background: #339dff; /*float amarillo*/ |
| + | color: #FFF; |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.setOptions(this, opts);
| |
| | | |
- | this.attachBehaviors(); | + | .fltrt { |
- | }; | + | float: right; |
| + | margin-left: 8px; |
| + | } |
| + | .fltlft { |
| + | float: left; |
| + | margin-right: 8px; |
| + | } |
| + | .clearfloat { |
| + | clear:both; |
| + | height:0; |
| + | font-size: 1px; |
| + | line-height: 0px; |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
| + | /* panel */ |
| + | .panel, .panelcollapsed |
| { | | { |
- | if (ele && typeof ele == "string") | + | margin: 3px; |
- | return document.getElementById(ele);
| + | width: auto; |
- | return ele; | + | -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.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)
| + | table { |
- | { | + | background: none repeat scroll 0 0 transparent} |
- | 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)
| + | /* panel heading */ |
| + | .panel h2, .panelcollapsed h2 |
| { | | { |
- | if( ele ) | + | color: #FFF; |
- | ele.style.display = display;
| + | font-weight: normal; |
- | };
| + | margin: 0px; |
| + | padding: 0px; |
| + | -moz-border-radius: 3px; |
| + | -webkit-border-radius: 3px; |
| + | border-bottom: 0px solid #04191d; |
| | | |
- | 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)
| + | /* panel heading on rollover */ |
- | { | + | .panel h2:hover, .panelcollapsed h2:hover { |
- | this.addClassName(this.getTab(), this.hoverClass); | + | background-color: #339dff; |
- | return false; | + | color: #FFF; |
- | }; | + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
| + | /* heading of a collapsed panel */ |
| + | .panelcollapsed h2 |
| { | | { |
- | this.removeClassName(this.getTab(), this.hoverClass); | + | background-image: url(arrow-dn.gif); |
- | return false; | + | background-repeat: no-repeat; |
- | }; | + | background-position: 280px; |
| + | } |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.open = function()
| + | /* panel content - do not set borders or paddings */ |
| + | .panelcontent |
| { | | { |
- | this.contentIsOpen = true; | + | overflow: hidden; |
- | if (this.enableAnimation) | + | font-size: 14px; |
- | {
| + | } |
- | 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);
| + | /* collapsed panel content */ |
- | this.addClassName(this.element, this.openClass);
| + | .panelcollapsed .panelcontent { display: none; } |
- | }; | + | |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.close = function()
| + | --> |
- | {
| + | </style><!--[if lte IE 7]> |
- | this.contentIsOpen = false;
| + | <style> |
- | if (this.enableAnimation)
| + | .content { margin-right: -1px; } |
- | {
| + | ul.nav a { zoom: 1; } |
- | if (this.animator)
| + | </style> |
- | this.animator.stop();
| + | <![endif]--> |
- | 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); | + | <script type="text/javascript"> |
- | this.addClassName(this.element, this.closedClass); | + | <!-- |
- | };
| + | var noimg = 0; |
| + | var i = 0; |
| + | var st1 = 100; |
| + | var st2 = 0; |
| + | var speed = 10; |
| + | |
| + | //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.onTabClick = function(e)
| + | function changeImg(n) { |
- | { | + | var name = imgname[n]; |
- | if (this.isOpen()) | + | var imgobj = document.getElementById('imagered'); |
- | this.close();
| + | animTransA(); |
- | else | + | imgobj.src = name; |
- | this.open();
| + | animTransB(); |
| + | } |
| + | function resetAuto(num) { |
| + | noimg = num; |
| + | clearTimeout(timg); |
| + | autoChangeImg(); |
| + | } |
| | | |
- | this.focus(); | + | 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 + ')'; |
| + | } |
| | | |
- | return this.stopPropagation(e);
| |
- | };
| |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
| + | // ----------------------------------------------------------------------------------------------- |
- | {
| + | // PANELS |
- | this.hasFocus = true;
| + | var PANEL_NORMAL_CLASS = "panel"; |
- | this.addClassName(this.element, this.focusedClass);
| + | var PANEL_COLLAPSED_CLASS = "panelcollapsed"; |
- | return false;
| + | 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; |
| | | |
- | Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
| + | function setUpPanels() |
| { | | { |
- | this.hasFocus = false; | + | loadSettings(); |
- | 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); | + | // get all headings |
- | };
| + | var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); |
| | | |
- | 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()
| + | // go through all tags |
- | {
| + | for (var i=0; i<headingTags.length; i++) |
- | 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 | + | 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 */) | + | if (elements[i].className == PANEL_CONTENT_CLASS) |
- | 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 | + | 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();
| + | |
- | } | + | |
- | };
| + | |
- | | + | |
- | })()
| + | |
- | | + | |
- | </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
| + | * 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 media="screen" 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> |
- | </style> | + | </tr> |
- | | + | </tbody></table> |
- | </head> | + | |
- | | + | <p><br> |
- | <body>
| + | </p> |
- | <div class="maincontainer">
| + | </div> |
- | <div class="banner"> </div>
| + | |
- | <div class="language"> </div>
| + | <div class="tweets"> |
- | <div class="searchlogo">
| + | <div style="float:right;"> |
- | <p> </p>
| + | <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
- | <p> </p>
| + | <script> |
- | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | new TWTR.Widget({ |
- | <p> </p>
| + | version: 2, |
- | <p> </p>
| + | type: 'profile', |
- | <p><img src="images/logotec.png" alt="" name="logotec" width="146" height="52" id="logotec" /> </p>
| + | rpp: 4, |
- | <p> </p>
| + | interval: 6000, |
- | <p> </p>
| + | width: 200, |
- | </div> | + | height: 250, |
- | <div class="menubar">
| + | theme: { |
- | <div id="CollapsiblePanel1" class="CollapsiblePanel"> | + | shell: { |
- | <div class="CollapsiblePanelTab" tabindex="0"><a href="paginaigem.html">HOME</a></div>
| + | background: '#000000', |
- | <div class="CollapsiblePanelContent"></div>
| + | color: '#ffffff' |
- | </div>
| + | }, |
- | <div id="CollapsiblePanel2" class="CollapsiblePanel">
| + | tweets: { |
- | <div class="CollapsiblePanelTab" tabindex="0">PROJECT</div>
| + | background: '#04191d', |
- | <div class="CollapsiblePanelContent"> | + | color: '#ffffff', |
- | <ul id="listaproyecto">
| + | links: '#93d740' |
- | <li><a href="paginaigem.html">parts</a></li>
| + | } |
- | <li><a href="paginasafety.html">safety</a></li>
| + | }, |
- | <li><a href="paginadescripcionproject.html">description</a></li>
| + | features: { |
- | <li><a href="paginaigem.html">modeling</a></li>
| + | scrollbar: false, |
- | <li><a href="paginaigem.html">results</a></li>
| + | loop: false, |
- | </ul>
| + | live: false, |
- | </div>
| + | hashtags: true, |
- | </div>
| + | timestamp: true, |
- | <div id="CollapsiblePanel3" class="CollapsiblePanel">
| + | avatars: false, |
- | <div class="CollapsiblePanelTab" tabindex="0">TEAM</div>
| + | behavior: 'all' |
- | <div class="CollapsiblePanelContent">
| + | } |
- |
| + | }).render().setUser('igemTecMty11').start(); |
- | <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> | | </script> |
- | </body> | + | </div> |
- | | + | </div> |
- | </html> | + | </div> |
| | | |
| | | |
- | {|align="justify"
| + | |
- | |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.
| + | |
- | |[[Image:Tec-Monterrey_logo.png|200px|right|frame]]
| + | |
- | |-
| + | |
- | |
| + | |
- | ''Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
| + | |
- | |[[Image:Tec-Monterrey_team.png|right|frame|Your team picture]]
| + | |
- | |-
| + | |
- | |
| + | |
- | |align="center"|[[Team:Tec-Monterrey | Team Example]]
| + | |
- | |}
| + | |
| | | |
- | <!--- The Mission, Experiments --->
| |
| | | |
- | {| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
| + | </div></div></body></html> |
- | !align="center"|[[Team:Tec-Monterrey|Home]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Team|Team]]
| + | |
- | !align="center"|[https://igem.org/Team.cgi?year=2011&team_name=Tec-Monterrey Official Team Profile]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Project|Project]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Parts|Parts Submitted to the Registry]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Modeling|Modeling]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Notebook|Notebook]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Safety|Safety]]
| + | |
- | !align="center"|[[Team:Tec-Monterrey/Attributions|Attributions]]
| + | |
- | |}
| + | |