Team:Costa Rica-TEC-UNA

From 2012.igem.org

(Difference between revisions)
 
(33 intermediate revisions not shown)
Line 3: Line 3:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript">
-
<!--
+
// Copyright 2006-2007 javascript-array.com
-
var DDSPEED = 10;
+
-
var DDTIMER = 15;
+
-
// main function to handle the mouse events //
 
-
function ddMenu(id,d){
 
-
  var h = document.getElementById(id + '-ddheader');
 
-
  var c = document.getElementById(id + '-ddcontent');
 
-
  clearInterval(c.timer);
 
-
  if(d == 1){
 
-
    clearTimeout(h.timer);
 
-
    if(c.maxh && c.maxh <= c.offsetHeight){return}
 
-
    else if(!c.maxh){
 
-
      c.style.display = 'block';
 
-
      c.style.height = 'auto';
 
-
      c.maxh = c.offsetHeight;
 
-
      c.style.height = '0px';
 
-
    }
 
-
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 
-
  }else{
 
-
    h.timer = setTimeout(function(){ddCollapse(c)},50);
 
-
  }
 
-
}
 
-
// collapse the menu //
+
var timeout = 500;
-
function ddCollapse(c){
+
var closetimer = 0;
-
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
+
var ddmenuitem = 0;
 +
 
 +
// open hidden layer
 +
function mopen(id)
 +
{
 +
// cancel close timer
 +
mcancelclosetime();
 +
 
 +
// close old layer
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
 
 +
// get new layer and show it
 +
ddmenuitem = document.getElementById(id);
 +
ddmenuitem.style.visibility = 'visible';
 +
 
 +
}
 +
// close showed layer
 +
function mclose()
 +
{
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
}
-
// cancel the collapse if a user rolls over the dropdown //
+
// go close timer
-
function cancelHide(id){
+
function mclosetime()
-
  var h = document.getElementById(id + '-ddheader');
+
{
-
  var c = document.getElementById(id + '-ddcontent');
+
closetimer = window.setTimeout(mclose, timeout);
-
  clearTimeout(h.timer);
+
-
  clearInterval(c.timer);
+
-
  if(c.offsetHeight < c.maxh){
+
-
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
-
  }
+
}
}
-
// incrementally expand/contract the dropdown and change the opacity //
+
// cancel close timer
-
function ddSlide(c,d){
+
function mcancelclosetime()
-
  var currh = c.offsetHeight;
+
{
-
  var dist;
+
if(closetimer)
-
  if(d == 1){
+
{
-
    dist = (Math.round((c.maxh - currh) / DDSPEED));
+
window.clearTimeout(closetimer);
-
  }else{
+
closetimer = null;
-
    dist = (Math.round(currh / DDSPEED));
+
}
-
  }
+
-
  if(dist <= 1 && d == 1){
+
-
    dist = 1;
+
-
  }
+
-
  c.style.height = currh + (dist * d) + 'px';
+
-
  c.style.opacity = currh / c.maxh;
+
-
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
+
-
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
+
-
    clearInterval(c.timer);
+
-
  }
+
}
}
-
//-->
+
 
 +
// close layer when click-out
 +
document.onclick = mclose;
</script>
</script>
<style type="text/css">
<style type="text/css">
-
body {margin:25px; font:12px Verdana, Arial, Helvetica}
+
#sddm
-
* {padding:0; margin:0}
+
{       margin: 0;
-
.dropdown {float:left; padding-right:5px}
+
padding: 0;
-
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(https://static.igem.org/mediawiki/2012/7/7b/DropdownMenu_Header.gif)}
+
z-index: 30}
-
.dropdown dt:hover {background:url(https://static.igem.org/mediawiki/2012/b/b2/Header_over.gif)}
+
-
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
+
-
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
+
-
.dropdown li {display:inline}
+
-
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
+
-
.dropdown a:hover {background:#d9e1e4; color:#000}
+
-
.dropdown .underline {border-bottom:1px solid #b9d6dc}
+
-
</style>
+
-
<head>
+
#sddm li
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
{ margin: 0;
-
<title>JavaScript Dropdown Menu Demo</title>
+
padding: 0;
-
<!--
+
list-style: none;
-
<link rel="stylesheet" href="dropdown.css" type="text/css" />
+
float: left;
-
<script type="text/javascript" src="dropdown.js"></script>
+
font: bold 11px arial}
-
-->
+
-
</head>
+
-
<body>
+
-
<br /><br />
+
-
<dl class="dropdown">
+
#sddm li a
-
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
+
{ display: block;
-
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
+
margin: 0 1px 0 0;
-
    <ul>
+
padding: 4px 10px;
-
      <li><a href="#" class="underline">Navigation Item 1</a></li>
+
width: 60px;
-
      <li><a href="#" class="underline">Navigation Item 2</a></li>
+
background: #147AFF;
-
      <li><a href="#" class="underline">Navigation Item 3</a></li>
+
color: #FFF;
-
      <li><a href="#" class="underline">Navigation Item 4</a></li>
+
text-align: center;
-
      <li><a href="#">Navigation Item 5</a></li>
+
text-decoration: none}
-
    </ul>
+
-
  </dd>
+
-
</dl>
+
-
<dl class="dropdown">
+
#sddm li a:hover
-
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
+
{ background: #49A3FF}
-
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
+
-
    <ul>
+
-
      <li><a href="#" class="underline">Navigation Item 5</a></li>
+
-
      <li><a href="#" class="underline">Navigation Item 6</a></li>
+
-
      <li><a href="#" class="underline">Navigation Item 7</a></li>
+
-
      <li><a href="#" class="underline">Navigation Item 8</a></li>
+
-
      <li><a href="#">Navigation Item 5</a></li>
+
-
    </ul>
+
-
  </dd>
+
-
</dl>
+
-
<dl class="dropdown">
+
#sddm div
-
  <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Dropdown Three</dt>
+
{ position: absolute;
-
  <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
+
visibility: hidden;
-
    <ul>
+
margin: 0;
-
      <li><a href="#" class="underline">Navigation Item 9</a></li>
+
padding: 0;
-
    </ul>
+
background: #EAEBD8;
-
  </dd>
+
border: 1px solid #5970B2}
-
</dl>
+
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+
#sddm div a
 +
{ position: relative;
 +
display: block;
 +
margin: 0;
 +
padding: 5px 10px;
 +
width: auto;
 +
white-space: nowrap;
 +
text-align: left;
 +
text-decoration: none;
 +
background: #FFFFFF;
 +
color: #000000;
 +
font: 11px arial}
-
<div style="clear:both" />
+
#sddm div a:hover
 +
{ background: #3366D5;
 +
color: #000000}
 +
 
 +
 
 +
 
 +
 
 +
body {
 +
margin: 0;
 +
padding: 0;
 +
font-family: seriff;
 +
font-size: 13px;
 +
background-color: #FFFFFF
 +
        }
 +
</style>
 +
 
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
</head>
 +
<body>
 +
<ul id="sddm">
 +
    <li><a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA">Home</a></li>
 +
    <li><a href="#"
 +
        onmouseover="mopen('m1')"
 +
        onmouseout="mclosetime()">Team</a>
 +
        <div id="m1"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()">
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Team">Team Members and Advisors</a>
 +
        </div>
 +
    </li>
 +
    <li><a href="#"
 +
        onmouseover="mopen('m2')"
 +
        onmouseout="mclosetime()">Project</a>
 +
        <div id="m2"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()">
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Project">Description</a>
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Notebook">Notebook</a>
 +
        </div>
 +
    </li>
 +
    <li><a href="#"
 +
        onmouseover="mopen('m3')"
 +
        onmouseout="mclosetime()">Biobricks</a>
 +
        <div id="m3"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()">
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Parts">Parts Submitted to the registry</a>
 +
        </div>
 +
    </li>
 +
    <li><a href="#"
 +
        onmouseover="mopen('m4')"
 +
        onmouseout="mclosetime()">Others</a>
 +
        <div id="m4"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()">
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Safety">Safety</a>
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Attributions">Attributions</a>
 +
        <a href="https://2012.igem.org/Team:Costa_Rica-TEC-UNA/Human Practice">Human Practice</a>
 +
        <a href="https://igem.org/Team.cgi?year=2012&team_name=Costa_Rica-TEC-UNA">Official team profile</a>
 +
        </div>
 +
    </li>
 +
</ul>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<div align="center">
 +
<a align="center" title="WELCOME TO COSTA RICA'S TEC-UNA TEAM PAGE!" href="https://igem.org/Team.cgi?year=2012&team_name=Costa_Rica-TEC-UNA">WELCOME TO COSTA RICA'S TEC-UNA TEAM PAGE!</a>
 +
<br/>
 +
<br/>
 +
<img src="http://sphotos-g.ak.fbcdn.net/hphotos-ak-snc7/s720x720/579986_407709052621876_849348736_n.jpg"/>
 +
</div>
 +
<div style="clear:both"></div>
 +
<br/>
 +
<br/>
</body>
</body>
</html>
</html>

Latest revision as of 02:53, 27 September 2012





WELCOME TO COSTA RICA'S TEC-UNA TEAM PAGE!