Team:UCSF/Team

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Template:UCSF}}
+
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:UCSF/stylesheet"/>
 
<head>
<head>
 +
<!--<img src="https://static.igem.org/mediawiki/2013/3/38/Leaf.jpg" width="768" height="112" alt="leaf" />-->
 +
<img src="https://static.igem.org/mediawiki/2013/3/38/Leaf.jpg" width="768" alt="leaf" />
-
<style>
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
#mission {width: 500px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;}
+
<title>UCSF iGEM 2013</title>
-
#opensource {width:306px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;}
+
-
#rightcontent {width:755px; float:right; background-color: #F5F5F5; margin-left: 8px;  margin-top:10px;}
+
-
#photos {width:155px; float:left; background-color: #FFFFFF; margin-left: 8px;  margin-top:10px;}
+
-
#description{width:450px; height:110px;float:left; background-color: #FFFFFF; margin-left: 8px;  margin-top:10px;}
+
-
#flickr{width:755px; float:right;} 
+
-
#leftcolumntotal{width:200px; height:1800px; float: left; margin-top:0px;}
+
-
#rightcontenttext {width:900px; float:right; background-color: #FFFFFF; margin-left:8px; padding: 10px; margin-top:8px;}
+
-
</style>
+
<!--<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>-->
 +
<script type="text/javascript">
 +
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
 +
//
 +
// Copyright (c) 2006. Adobe Systems Incorporated.
 +
// All rights reserved.
 +
//
 +
// Redistribution and use in source and binary forms, with or without
 +
// modification, are permitted provided that the following conditions are met:
 +
//
 +
//  * Redistributions of source code must retain the above copyright notice,
 +
//    this list of conditions and the following disclaimer.
 +
//  * Redistributions in binary form must reproduce the above copyright notice,
 +
//    this list of conditions and the following disclaimer in the documentation
 +
//    and/or other materials provided with the distribution.
 +
//  * Neither the name of Adobe Systems Incorporated nor the names of its
 +
//    contributors may be used to endorse or promote products derived from this
 +
//    software without specific prior written permission.
 +
//
 +
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 +
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 +
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 +
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
 +
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 +
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 +
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 +
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 +
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 +
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 +
// POSSIBILITY OF SUCH DAMAGE.
 +
/*******************************************************************************
 +
SpryMenuBar.js
 +
This file handles the JavaScript for Spry Menu Bar.  You should have no need
 +
to edit this file.  Some highlights of the MenuBar object is that timers are
 +
used to keep submenus from showing up until the user has hovered over the parent
 +
menu item for some time, as well as a timer for when they leave a submenu to keep
 +
showing that submenu until the timer fires.
-
</head>
+
*******************************************************************************/
-
<div id="rightcontenttext">
+
(function() { // BeginSpryComponent
 +
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
-
<h3orange>First Years </h3orange> <p>
+
Spry.BrowserSniff = function()
 +
{
 +
var b = navigator.appName.toString();
 +
var up = navigator.platform.toString();
 +
var ua = navigator.userAgent.toString();
 +
this.mozilla = this.ie = this.opera = this.safari = false;
 +
var re_opera = /Opera.([0-9\.]*)/i;
 +
var re_msie = /MSIE.([0-9\.]*)/i;
 +
var re_gecko = /gecko/i;
 +
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
 +
var r = false;
-
<div id="photos">
+
if ( (r = ua.match(re_opera))) {
 +
this.opera = true;
 +
this.version = parseFloat(r[1]);
 +
} else if ( (r = ua.match(re_msie))) {
 +
this.ie = true;
 +
this.version = parseFloat(r[1]);
 +
} else if ( (r = ua.match(re_safari))) {
 +
this.safari = true;
 +
this.version = parseFloat(r[2]);
 +
} else if (ua.match(re_gecko)) {
 +
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
 +
r = ua.match(re_gecko_version);
 +
this.mozilla = true;
 +
this.version = parseFloat(r[1]);
 +
}
 +
this.windows = this.mac = this.linux = false;
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
this.Platform = ua.match(/windows/i) ? "windows" :
-
src=" https://static.igem.org/mediawiki/2013/8/81/UCSF2013-PriyankaDadlani.png">
+
(ua.match(/linux/i) ? "linux" :
 +
(ua.match(/mac/i) ? "mac" :
 +
ua.match(/unix/i)? "unix" : "unknown"));
 +
this[this.Platform] = true;
 +
this.v = this.version;
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;" src="https://static.igem.org/mediawiki/2013/9/97/UCSF2013_DavidDinh.png">
+
if (this.safari && this.mac && this.mozilla) {
 +
this.mozilla = false;
 +
}
 +
};
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
Spry.is = new Spry.BrowserSniff();
-
src="https://static.igem.org/mediawiki/2013/d/dd/UCSF2013-IanErgui.png">
+
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
// Constructor for Menu Bar
-
src="https://static.igem.org/mediawiki/2013/2/25/UCSF2013-FelicityJika.png">
+
// element should be an ID of an unordered list (<ul> tag)
 +
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
 +
Spry.Widget.MenuBar = function(element, opts)
 +
{
 +
this.init(element, opts);
 +
};
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;" src="https://static.igem.org/mediawiki/2013/0/09/UCSF2013_DerrickLee.png">
+
Spry.Widget.MenuBar.prototype.init = function(element, opts)
 +
{
 +
this.element = this.getElement(element);
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
// represents the current (sub)menu we are operating on
-
src="https://static.igem.org/mediawiki/2013/b/b1/UCSF2013-SherryTeng.png">
+
this.currMenu = null;
 +
this.showDelay = 250;
 +
this.hideDelay = 600;
 +
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
 +
{
 +
// bail on older unsupported browsers
 +
return;
 +
}
-
<img align="left" style="margin-bottom:8px;width:130px;height:182px; padding:0;"
+
// Fix IE6 CSS images flicker
-
src="https://static.igem.org/mediawiki/2013/7/7a/UCSF2013-EricWong.png">
+
if (Spry.is.ie && Spry.is.version < 7){
 +
try {
 +
document.execCommand("BackgroundImageCache", false, true);
 +
} catch(err) {}
 +
}
 +
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
 +
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
 +
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
 +
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
 +
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
-
</div>
+
this.hoverClass = 'MenuBarItemHover';
 +
this.subHoverClass = 'MenuBarItemSubmenuHover';
 +
this.subVisibleClass ='MenuBarSubmenuVisible';
 +
this.hasSubClass = 'MenuBarItemSubmenu';
 +
this.activeClass = 'MenuBarActive';
 +
this.isieClass = 'MenuBarItemIE';
 +
this.verticalClass = 'MenuBarVertical';
 +
this.horizontalClass = 'MenuBarHorizontal';
 +
this.enableKeyboardNavigation = true;
-
<div id="description" style = "width:530px; height:180px">
+
this.hasFocus = false;
-
<h3orange1>Priyanka Dadlani</h3orange1> <p> <regulartext1>
+
// load hover images now
-
Hi everyone! I am Priyanka Dadlani, an undergraduate at UC-Berkeley studying chemistry, earning my teaching credential, and having fun exploring computer science. My future interests include studying pharmacology and incorporating computational techniques into my research. In my free time, I enjoy running and hiking near scenic areas, such as Cayucos and Inspiration Point. Not to mention, I love trying out new restaurants and tapioca drinks.  
+
if(opts)
-
</regulartext1>
+
{
-
</div>
+
for(var k in opts)
 +
{
 +
if (typeof this[k] == 'undefined')
 +
{
 +
var rollover = new Image;
 +
rollover.src = opts[k];
 +
}
 +
}
 +
Spry.Widget.MenuBar.setOptions(this, opts);
 +
}
-
<div id="description" style = "width:530px; height:180px">
+
// safari doesn't support tabindex
-
<h3orange1>David Dinh</h3orange1> <p> <regulartext1>
+
if (Spry.is.safari)
-
Hello! My name is David Dinh. I am a recent graduate of Abraham Lincoln High School and headed to UCDavis this fall as an undergraduate. Currently I am debating either Biotechnology or Molecular Biology as my major. Afterward I want to earn a masters degree and a PhD. My friends say that I can be very loud and that I am too nice for my own good. In my free time, I like to play tennis and computer games, or hang out with my friends. I first got interested in science in the fifth grade when my teacher accidently “overcooked” a dragonfly in her car during a school field trip.
+
this.enableKeyboardNavigation = false;
-
</regulartext1>
+
-
</div>
+
-
<div id="description" style = "width:530px; height:180px">
+
if(this.element)
-
<h3orange1>Ian Ergui</h3orange1> <p> <regulartext1>
+
{
-
I am Ian Ergui, a University of Miami student and Howard Hughes Medical Institute undergraduate researcher. My interests lie in the fields of synthetic biology, epigenetics and pharmacoepigenetics. As a research assistant at the Hussman institute of Human Genomics at UM, I conduct work regarding the effects of cocaine use on genomic methylation in the brain as well as bacterial engineering experiments. I am happy to have the opportunity to be part of the 2013 UCSF iGEM team. When not in lab, I enjoy training in Gracie Jiu Jitsu and boxing.
+
this.currMenu = this.element;
-
</regulartext1>
+
var items = this.element.getElementsByTagName('li');
-
</div>
+
for(var i=0; i<items.length; i++)
 +
{
 +
if (i > 0 && this.enableKeyboardNavigation)
 +
items[i].getElementsByTagName('a')[0].tabIndex='-1';
-
<div id="description" style = "width:530px; height:180px">
+
this.initialize(items[i], element);
-
<h3orange1>Felicity Jika</h3orange1> <p> <regulartext1>
+
if(Spry.is.ie)
-
Hey, my name is Felicity Jika, I have been interested in science for as long as I can remember. I am a recent graduate of Abraham Lincoln High School in San Francisco, and will be attending San Francisco State University in the fall. I was born in Nigeria and came to America when I was four years old. I am interested in foreign drama shows and reading book about magic, which to me is science that can’t be explained.  
+
{
-
</regulartext1>
+
this.addClassName(items[i], this.isieClass);
-
</div>
+
items[i].style.position = "static";
 +
}
 +
}
 +
if (this.enableKeyboardNavigation)
 +
{
 +
var self = this;
 +
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
 +
}
-
<div id="description" style = "width:530px; height:180px">
+
if(Spry.is.ie)
-
<h3orange1>Derric Lee</h3orange1> <p> <regulartext1>
+
{
-
Hi I’m Derrick! I recently graduated from Abraham Lincoln High School in San Francisco and plan to attend City College of San Francisco with the intention of transferring to UC-Davis in two years. So far my goal is to major in Molecular Biology and possibly pursue a PhD. In my off time I enjoy playing games, watching movies, and eating.
+
if(this.hasClassName(this.element, this.verticalClass))
-
</regulartext1>
+
{
-
</div>
+
this.element.style.position = "relative";
 +
}
 +
var linkitems = this.element.getElementsByTagName('a');
 +
for(var i=0; i<linkitems.length; i++)
 +
{
 +
linkitems[i].style.position = "relative";
 +
}
 +
}
 +
}
 +
};
 +
Spry.Widget.MenuBar.KEY_ESC = 27;
 +
Spry.Widget.MenuBar.KEY_UP = 38;
 +
Spry.Widget.MenuBar.KEY_DOWN = 40;
 +
Spry.Widget.MenuBar.KEY_LEFT = 37;
 +
Spry.Widget.MenuBar.KEY_RIGHT = 39;
-
<div id="description" style = "width:530px; height:180px">
+
Spry.Widget.MenuBar.prototype.getElement = function(ele)
-
<h3orange1>Sherry Teng</h3orange1> <p> <regulartext1>
+
{
-
My name is Sherry Teng.  My favorite color is red. I’m entering UCLA as a freshman this fall and I plan to major in Molecular Cell and Developmental Biology.  In my free time, I like to watch stand up comedy and exercise my own sense of humor.
+
if (ele && typeof ele == "string")
-
</regulartext1>
+
return document.getElementById(ele);
-
</div>
+
return ele;
 +
};
-
<div id="description" style = "width:530px; height:180px">
+
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
-
<h3orange1>Eric Wong</h3orange1> <p> <regulartext1>
+
{
-
Hello my name is Eric Wong. I’m a 2013 graduate of Abraham Lincoln High School in San Francisco. I’m attending the College of San Mateo and am interested in transferring to UC-Davis after two years. I intend to major in Molecular Biology with some sort of minor in business. For me, iGEM is a chance to dive straight into hands-on, innovative research. It’s a pleasure to be a part of this enormous community where we all work together to discover and create things we never imagined or thought possible. Outside of iGEM, I read leisurely and surf the web to my heart’s content.
+
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
-
</regulartext1>
+
{
-
</div>
+
return false;
 +
}
 +
return true;
 +
};
 +
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
 +
{
 +
if (!ele || !className || this.hasClassName(ele, className))
 +
return;
 +
ele.className += (ele.className ? " " : "") + className;
 +
};
-
<div id="rightcontenttext">
+
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
 +
{
 +
if (!ele || !className || !this.hasClassName(ele, className))
 +
return;
 +
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
 +
};
-
<p>
+
// addEventListener for Menu Bar
 +
// attach an event to a tag without creating obtrusive HTML code
 +
Spry.Widget.MenuBar.prototype.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) {}
 +
};
-
<h3orange> Super Buddies/Second Years </h3orange> </p>
+
// createIframeLayer for Menu Bar
 +
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
 +
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
 +
{
 +
var layer = document.createElement('iframe');
 +
layer.tabIndex = '-1';
 +
layer.src = 'javascript:""';
 +
layer.frameBorder = '0';
 +
layer.scrolling = 'no';
 +
menu.parentNode.appendChild(layer);
 +
 +
layer.style.left = menu.offsetLeft + 'px';
 +
layer.style.top = menu.offsetTop + 'px';
 +
layer.style.width = menu.offsetWidth + 'px';
 +
layer.style.height = menu.offsetHeight + 'px';
 +
};
-
<div id="photos">
+
// removeIframeLayer for Menu Bar
 +
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
 +
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
 +
{
 +
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
 +
while(layers.length > 0)
 +
{
 +
layers[0].parentNode.removeChild(layers[0]);
 +
}
 +
};
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
// clearMenus for Menu Bar
-
src="https://static.igem.org/mediawiki/2013/3/31/UCSF2013-VernaHuang.png">
+
// root is the top level unordered list (<ul> tag)
 +
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
 +
{
 +
var menus = root.getElementsByTagName('ul');
 +
for(var i=0; i<menus.length; i++)
 +
this.hideSubmenu(menus[i]);
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;" src="https://static.igem.org/mediawiki/2013/0/07/UCSF2013-JIWeiyue.png">
+
this.removeClassName(this.element, this.activeClass);
 +
};
-
<img align="left" style="margin-bottom:8px; width:130px;height:182px; padding:0;"
+
// bubbledTextEvent for Menu Bar
-
src="https://static.igem.org/mediawiki/2013/8/8c/UCSF2013-KendallKearns.png">
+
// identify bubbled up text events in Safari so we can ignore them
 +
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
 +
{
 +
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
 +
};
 +
// showSubmenu for Menu Bar
 +
// set the proper CSS class on this menu to show it
 +
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
 +
{
 +
if(this.currMenu)
 +
{
 +
this.clearMenus(this.currMenu);
 +
this.currMenu = null;
 +
}
 +
 +
if(menu)
 +
{
 +
this.addClassName(menu, this.subVisibleClass);
 +
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
 +
{
 +
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
 +
{
 +
menu.style.top = menu.parentNode.offsetTop + 'px';
 +
}
 +
}
 +
if(Spry.is.ie && Spry.is.version < 7)
 +
{
 +
this.createIframeLayer(menu);
 +
}
 +
}
 +
this.addClassName(this.element, this.activeClass);
 +
};
-
</div>
+
// hideSubmenu for Menu Bar
 +
// remove the proper CSS class on this menu to hide it
 +
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
 +
{
 +
if(menu)
 +
{
 +
this.removeClassName(menu, this.subVisibleClass);
 +
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
 +
{
 +
menu.style.top = '';
 +
menu.style.left = '';
 +
}
 +
if(Spry.is.ie && Spry.is.version < 7)
 +
this.removeIframeLayer(menu);
 +
}
 +
};
-
<div id="description" style = "width:530px; height:180px">
+
// initialize for Menu Bar
-
<h3orange1>Verna Huang</h3orange1> <p> <regulartext1>
+
// create event listeners for the Menu Bar widget so we can properly
-
Hi, my name is Verna Huang. I've loved science since 6th grade, and I hope to expand my interest in science through iGem. This is my second year in the iGEM competition with UCSF. When I’m not geeking out over synthetic biology, I like to read fiction of any kind, draw my surroundings, and swim. I am currently a second year student at UC-Santa Barbara, possibly majoring in Biochemistry and Molecular Biology.
+
// show and hide submenus
-
</regulartext1>
+
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
-
</div>
+
{
 +
var opentime, closetime;
 +
var link = listitem.getElementsByTagName('a')[0];
 +
var submenus = listitem.getElementsByTagName('ul');
 +
var menu = (submenus.length > 0 ? submenus[0] : null);
-
<div id="description" style = "width:530px; height:180px">
+
if(menu)
-
<h3orange1>JI Weiyue</h3orange1> <p> <regulartext1>
+
this.addClassName(link, this.hasSubClass);
-
My name is JI Weiyue and I’m a senior undergraduate from Peking University majoring in Life Sciences. Impressed by the marvelous biological phenomena and the ways scientists may accurately control and freely engineer living systems, I joined the 2011 Peking iGEM team and have been working in the field of synthetic biology ever since. This summer at UCSF is a good chance for me to improve my scientific skills and develop new connections. In my leisure time, I enjoy reading various kinds of books and playing the piano.
+
-
</regulartext1>
+
-
</div>
+
-
<div id="description" style = "width:530px; height:200px">
+
if(!Spry.is.ie)
-
<h3orange1>Kendall Kearns</h3orange1> <p> <regulartext1>
+
{
-
Hi there! My name is Kendall Kearns. I love food, sleep, the color blue, music, art, and hanging out with friends and family. In my free time, I enjoy watching movies, reading, Olympic-style weightlifting or working out, and cooking! I've always loved science, probably since I started watching “The Magic School Bus” every morning in elementary and middle school. I'm currently attending UC-Irvine, possibly majoring in Microbiology and Immunology. I might also want to minor in something else, but I'm not sure yet! This is my second year competing with the UCSF iGEM team.  
+
// define a simple function that comes standard in IE to determine
-
</regulartext1>
+
// if a node is within another node
-
</div>
+
listitem.contains = function(testNode)
 +
{
 +
// this refers to the list item
 +
if(testNode == null)
 +
return false;
 +
if(testNode == this)
 +
return true;
 +
else
 +
return this.contains(testNode.parentNode);
 +
};
 +
}
-
</html>
+
// need to save this for scope further down
 +
var self = this;
 +
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
 +
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
 +
if (this.enableKeyboardNavigation)
 +
{
 +
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
 +
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
 +
}
 +
};
 +
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
 +
{
 +
this.lastOpen = listitem.getElementsByTagName('a')[0];
 +
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
 +
this.hasFocus = true;
 +
};
 +
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
 +
{
 +
this.clearSelection(listitem);
 +
};
 +
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
 +
//search any intersection with the current open element
 +
if (!this.lastOpen)
 +
return;
-
<!--- The Mission, Experiments --->
+
if (el)
 +
{
 +
el = el.getElementsByTagName('a')[0];
 +
 +
// check children
 +
var item = this.lastOpen;
 +
while (item != this.element)
 +
{
 +
var tmp = el;
 +
while (tmp != this.element)
 +
{
 +
if (tmp == item)
 +
return;
 +
try{
 +
tmp = tmp.parentNode;
 +
}catch(err){break;}
 +
}
 +
item = item.parentNode;
 +
}
 +
}
 +
var item = this.lastOpen;
 +
while (item != this.element)
 +
{
 +
this.hideSubmenu(item.parentNode);
 +
var link = item.getElementsByTagName('a')[0];
 +
this.removeClassName(link, this.hoverClass);
 +
this.removeClassName(link, this.subHoverClass);
 +
item = item.parentNode;
 +
}
 +
this.lastOpen = false;
 +
};
 +
Spry.Widget.MenuBar.prototype.keyDown = function (e)
 +
{
 +
if (!this.hasFocus)
 +
return;
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="100%" align="center"
+
if (!this.lastOpen)
-
!align="center"|[[Team:UCSF|Home]]
+
{
-
!align="center"|[[Team:UCSF/Team|Team]]
+
this.hasFocus = false;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=UCSF Official Team Profile]
+
return;
-
!align="center"|[[Team:UCSF/Project|Project]]
+
}
-
!align="center"|[[Team:UCSF/Parts|Parts Submitted to the Registry]]
+
 
-
!align="center"|[[Team:UCSF/Modeling|Modeling]]
+
var e = e|| event;
-
!align="center"|[[Team:UCSF/Notebook|Notebook]]
+
var listitem = this.lastOpen.parentNode;
-
!align="center"|[[Team:UCSF/Safety|Safety]]
+
var link = this.lastOpen;
-
!align="center"|[[Team:UCSF/Attributions|Attributions]]
+
var submenus = listitem.getElementsByTagName('ul');
-
|}
+
var menu = (submenus.length > 0 ? submenus[0] : null);
 +
var hasSubMenu = (menu) ? true : false;
 +
 
 +
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
 +
 +
if (!opts[3])
 +
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
 +
 
 +
var found = 0;
 +
switch (e.keyCode){
 +
case this.upKeyCode:
 +
found = this.getElementForKey(opts, 'y', 1);
 +
break;
 +
case this.downKeyCode:
 +
found = this.getElementForKey(opts, 'y', -1);
 +
break;
 +
case this.leftKeyCode:
 +
found = this.getElementForKey(opts, 'x', 1);
 +
break;
 +
case this.rightKeyCode:
 +
found = this.getElementForKey(opts, 'x', -1);
 +
break;
 +
case this.escKeyCode:
 +
case 9:
 +
this.clearSelection();
 +
this.hasFocus = false;
 +
default: return;
 +
}
 +
switch (found)
 +
{
 +
case 0: return;
 +
case 1:
 +
//subopts
 +
this.mouseOver(listitem, e);
 +
break;
 +
case 2:
 +
//parent
 +
this.mouseOut(opts[2], e);
 +
break;
 +
case 3:
 +
case 4:
 +
// left - right
 +
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
 +
break;
 +
}
 +
var link = opts[found].getElementsByTagName('a')[0];
 +
if (opts[found].nodeName.toLowerCase() == 'ul')
 +
opts[found] = opts[found].getElementsByTagName('li')[0];
 +
 
 +
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
 +
this.lastOpen = link;
 +
opts[found].getElementsByTagName('a')[0].focus();
 +
 
 +
        //stop further event handling by the browser
 +
return Spry.Widget.MenuBar.stopPropagation(e);
 +
};
 +
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
 +
{
 +
var link = listitem.getElementsByTagName('a')[0];
 +
var submenus = listitem.getElementsByTagName('ul');
 +
var menu = (submenus.length > 0 ? submenus[0] : null);
 +
var hasSubMenu = (menu) ? true : false;
 +
if (this.enableKeyboardNavigation)
 +
this.clearSelection(listitem);
 +
 
 +
if(this.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
return;
 +
}
 +
 
 +
if (listitem.closetime)
 +
clearTimeout(listitem.closetime);
 +
 
 +
if(this.currMenu == listitem)
 +
{
 +
this.currMenu = null;
 +
}
 +
 
 +
// move the focus too
 +
if (this.hasFocus)
 +
link.focus();
 +
 
 +
// show menu highlighting
 +
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
 +
this.lastOpen = link;
 +
if(menu && !this.hasClassName(menu, this.subHoverClass))
 +
{
 +
var self = this;
 +
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
 +
}
 +
};
 +
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
 +
{
 +
var link = listitem.getElementsByTagName('a')[0];
 +
var submenus = listitem.getElementsByTagName('ul');
 +
var menu = (submenus.length > 0 ? submenus[0] : null);
 +
var hasSubMenu = (menu) ? true : false;
 +
if(this.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
return;
 +
}
 +
 
 +
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
 +
if(!listitem.contains(related))
 +
{
 +
if (listitem.opentime)
 +
clearTimeout(listitem.opentime);
 +
this.currMenu = listitem;
 +
 
 +
// remove menu highlighting
 +
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
 +
if(menu)
 +
{
 +
var self = this;
 +
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
 +
}
 +
if (this.hasFocus)
 +
link.blur();
 +
}
 +
};
 +
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
 +
{
 +
var child = element[sibling];
 +
while (child && child.nodeName.toLowerCase() !='li')
 +
child = child[sibling];
 +
 
 +
return child;
 +
};
 +
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
 +
{
 +
var found = 0;
 +
var rect = Spry.Widget.MenuBar.getPosition;
 +
var ref = rect(els[found]);
 +
 
 +
var hideSubmenu = false;
 +
//make the subelement visible to compute the position
 +
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
 +
{
 +
els[1].style.visibility = 'hidden';
 +
this.showSubmenu(els[1]);
 +
hideSubmenu = true;
 +
}
 +
 
 +
var isVert = this.hasClassName(this.element, this.verticalClass);
 +
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
 +
 +
for (var i = 1; i < els.length; i++){
 +
//when navigating on the y axis in vertical menus, ignore children and parents
 +
if(prop=='y' && isVert && (i==1 || i==2))
 +
{
 +
continue;
 +
}
 +
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
 +
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
 +
{
 +
continue;
 +
}
 +
 +
if (els[i])
 +
{
 +
var tmp = rect(els[i]);
 +
if ( (dir * tmp[prop]) < (dir * ref[prop]))
 +
{
 +
ref = tmp;
 +
found = i;
 +
}
 +
}
 +
}
 +
 +
// hide back the submenu
 +
if (els[1] && hideSubmenu){
 +
this.hideSubmenu(els[1]);
 +
els[1].style.visibility =  '';
 +
}
 +
 
 +
return found;
 +
};
 +
Spry.Widget.MenuBar.camelize = function(str)
 +
{
 +
if (str.indexOf('-') == -1){
 +
return str;
 +
}
 +
var oStringList = str.split('-');
 +
var isFirstEntry = true;
 +
var camelizedString = '';
 +
 
 +
for(var i=0; i < oStringList.length; i++)
 +
{
 +
if(oStringList[i].length>0)
 +
{
 +
if(isFirstEntry)
 +
{
 +
camelizedString = oStringList[i];
 +
isFirstEntry = false;
 +
}
 +
else
 +
{
 +
var s = oStringList[i];
 +
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
 +
}
 +
}
 +
}
 +
 
 +
return camelizedString;
 +
};
 +
 
 +
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
 +
{
 +
var value;
 +
try
 +
{
 +
if (element.style)
 +
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
 +
 
 +
if (!value)
 +
if (document.defaultView && document.defaultView.getComputedStyle)
 +
{
 +
var css = document.defaultView.getComputedStyle(element, null);
 +
value = css ? css.getPropertyValue(prop) : null;
 +
}
 +
else if (element.currentStyle)
 +
{
 +
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
 +
}
 +
}
 +
catch (e) {}
 +
 
 +
return value == 'auto' ? null : value;
 +
};
 +
Spry.Widget.MenuBar.getIntProp = function(element, prop)
 +
{
 +
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
 +
if (isNaN(a))
 +
return 0;
 +
return a;
 +
};
 +
 
 +
Spry.Widget.MenuBar.getPosition = function(el, doc)
 +
{
 +
doc = doc || document;
 +
if (typeof(el) == 'string') {
 +
el = doc.getElementById(el);
 +
}
 +
 
 +
if (!el) {
 +
return false;
 +
}
 +
 
 +
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
 +
//element must be visible to have a box
 +
return false;
 +
}
 +
 
 +
var ret = {x:0, y:0};
 +
var parent = null;
 +
var box;
 +
 
 +
if (el.getBoundingClientRect) { // IE
 +
box = el.getBoundingClientRect();
 +
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
 +
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
 +
ret.x = box.left + scrollLeft;
 +
ret.y = box.top + scrollTop;
 +
} else if (doc.getBoxObjectFor) { // gecko
 +
box = doc.getBoxObjectFor(el);
 +
ret.x = box.x;
 +
ret.y = box.y;
 +
} else { // safari/opera
 +
ret.x = el.offsetLeft;
 +
ret.y = el.offsetTop;
 +
parent = el.offsetParent;
 +
if (parent != el) {
 +
while (parent) {
 +
ret.x += parent.offsetLeft;
 +
ret.y += parent.offsetTop;
 +
parent = parent.offsetParent;
 +
}
 +
}
 +
// opera & (safari absolute) incorrectly account for body offsetTop
 +
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
 +
ret.y -= doc.body.offsetTop;
 +
}
 +
if (el.parentNode)
 +
parent = el.parentNode;
 +
else
 +
parent = null;
 +
if (parent.nodeName){
 +
var cas = parent.nodeName.toUpperCase();
 +
while (parent && cas != 'BODY' && cas != 'HTML') {
 +
cas = parent.nodeName.toUpperCase();
 +
ret.x -= parent.scrollLeft;
 +
ret.y -= parent.scrollTop;
 +
if (parent.parentNode)
 +
parent = parent.parentNode;
 +
else
 +
parent = null;
 +
}
 +
}
 +
return ret;
 +
};
 +
 
 +
Spry.Widget.MenuBar.stopPropagation = function(ev)
 +
{
 +
if (ev.stopPropagation)
 +
ev.stopPropagation();
 +
else
 +
ev.cancelBubble = true;
 +
if (ev.preventDefault)
 +
ev.preventDefault();
 +
else
 +
ev.returnValue = false;
 +
};
 +
 
 +
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
 +
{
 +
if (!optionsObj)
 +
return;
 +
for (var optionName in optionsObj)
 +
{
 +
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
 +
continue;
 +
obj[optionName] = optionsObj[optionName];
 +
}
 +
};
 +
 
 +
})(); // EndSpryComponent
 +
</script>
 +
 
 +
<!--<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />-->
 +
<style type="text/css">
 +
@charset "UTF-8";
 +
 
 +
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 +
 
 +
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 +
 
 +
/*******************************************************************************
 +
 
 +
LAYOUT INFORMATION: describes box model, positioning, z-order
 +
 
 +
*******************************************************************************/
 +
 
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: auto;
 +
}
 +
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
 +
ul.MenuBarActive
 +
{
 +
z-index: 1000;
 +
}
 +
/* Menu item containers, position children relative to this container and are a fixed width */
 +
ul.MenuBarHorizontal li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
position: relative;
 +
text-align: left;
 +
cursor: pointer;
 +
width: 8em;
 +
float: left;
 +
}
 +
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 +
ul.MenuBarHorizontal ul
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
z-index: 1020;
 +
cursor: default;
 +
width: 8.2em;
 +
position: absolute;
 +
left: -1000em;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
 +
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
}
 +
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal ul ul
 +
{
 +
position: absolute;
 +
margin: -5% 0 0 95%;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 +
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
DESIGN INFORMATION: describes color scheme, borders, fonts
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal ul
 +
{
 +
border: 1px solid #CCC;
 +
}
 +
/* Menu items are a light gray block with padding and no text decoration */
 +
ul.MenuBarHorizontal a
 +
{
 +
display: block;
 +
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
 +
}
 +
/* Menu items that have mouse over or focus have a blue background and white text */
 +
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 +
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarDown.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarRight.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarDownHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
BROWSER HACKS: the hacks below should not be changed unless you are an expert
 +
 
 +
*******************************************************************************/
 +
 
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarHorizontal iframe
 +
{
 +
position: absolute;
 +
z-index: 1010;
 +
filter:alpha(opacity:0.1);
 +
}
 +
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
 +
@media screen, projection
 +
{
 +
ul.MenuBarHorizontal li.MenuBarItemIE
 +
{
 +
display: inline;
 +
f\loat: left;
 +
background: #FFF;
 +
}
 +
}
 +
</style>
 +
 
 +
</head>
 +
 
 +
 
 +
<style>
 +
body {
 +
    width: 980px;
 +
    margin: auto;
 +
}
 +
#header {
 +
    height: 200px;
 +
}
 +
 
 +
#nav { /* USE YOUR OWN BACKGROUND IMAGE */
 +
    /*--background-image: url(http://www.copperleafcrossing.com/thecreatureconservancy/images/topnav_bkgd.jpg);*/
 +
    background-image: https://static.igem.org/mediawiki/2013/3/38/Leaf.jpg
 +
    height: 35px;
 +
}
 +
 
 +
ul.MenuBarHorizontal a {
 +
    color: #000;
 +
    background-color: transparent;
 +
}
 +
ul.MenuBarHorizontal ul a {
 +
    background-color: transparent;
 +
}
 +
ul.MenuBarHorizontal li.MenuBarItemIE {
 +
    background: transparent;
 +
}
 +
</style>
 +
 
 +
 
 +
<body>
 +
 
 +
<ul id="MenuBar1" class="MenuBarHorizontal">
 +
  <li><a href="2013.igem.org/Team:UCSF">Home</a>
 +
  </li>
 +
  <li><a href="#">Team</a>
 +
  <ul>
 +
    <li><a href="2013.igem.org/Team:UCSF/Team">Members</a>
 +
</li></ul>
 +
  <li><a class="MenuBarItemSubmenu" href="#">Project</a>
 +
    <ul>
 +
      <li><a href="2013.igem.org/Team:UCSF/ProjectOverview">Overview</a>
 +
      </li>
 +
      <li><a href="2013.igem.org/Team:UCSF/Conjugation">Conjugation</a></li>
 +
      <li><a href="2013.igem.org/Team:UCSF/SugarCircuit">Sugar Circuit</a></li>
 +
      <li><a href="2013.igem.org/Team:UCSF/Modeling">Modeling</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="2013.igem.org/Team:UCSF/Results">Results</a></li>
 +
  <li><a href="2013.igem.org/Team:UCSF/Safety">Safety</a></li>
 +
  <li><a href="2013.igem.org/Team:UCSF/HumanPractices">Human Practices</a></li>
 +
</ul>
 +
<script type="text/javascript">
 +
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
 +
</script>
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Revision as of 08:37, 9 August 2013


leaf UCSF iGEM 2013