Team:KAIST Korea

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:KAIST_Korea/top_home}}
+
{{:Team:KAIST_Korea/top}}
-
{{:Team:KAIST_Korea/navi}}
+
<html lang="en">
-
<html>
+
<head>
<head>
-
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:600italic,400,800' rel='stylesheet' type='text/css'>
+
<style type="text/css">
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
+
div .iGEMLogo{
-
<script type="text/javascript">
+
position:absolute;
-
  WebFontConfig = {
+
z-index:4;
-
    google: { families: [ 'Open+Sans:600italic,400,800:latin' ]|[ 'Gloria+Hallelujah::latin' ]}
+
top:-40px;
-
  };
+
padding : 0 0 0 10px;
-
  (function() {
+
 
-
    var wf = document.createElement('script');
+
-
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+
-
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+
-
    wf.type = 'text/javascript';
+
-
    wf.async = 'true';
+
-
    var s = document.getElementsByTagName('script')[0];
+
-
    s.parentNode.insertBefore(wf, s);
+
-
  })();
+
-
  </script>
+
-
<style>
+
-
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:600italic,400,800);
+
-
#kaistcontent
+
-
{
+
-
position: relative;
+
-
background-color:transparent;
+
-
width:690px;
+
-
font-family: 'Open Sans', sans-serif;
+
-
font-size:11pt;
+
-
line-height:120%;
+
-
text-align:justify;
+
-
padding: 0px 15px 0px 15px;
+
-
left:300px;
+
-
top:-70px;
+
-
z-index: 2;
+
}
}
-
#kaistcontent #little
+
a{
-
{
+
color:#000;
-
padding: 0px 0px 0px 30px;
+
text-decoration:none;
-
line-height:140%;
+
}
}
-
#kaistcontent #little2
+
.clr{
-
{
+
clear:both;
-
padding: 0px 0px 0px 15px;
+
}
-
line-height:140%;
+
.container {
 +
        width:600px;
 +
position:relative;
 +
        top: 230px;
 +
        left: 220px;
 +
z-index:100;
 +
margin:0 auto;
 +
}
 +
.content {
 +
width:600px;
 +
margin:0 auto;
 +
}
 +
.content{
 +
width:600px;
 +
position:relative;
}
}
-
#kaistcontent #starter-grad
+
/*Sliding Text and Icon Menu Style*/
-
{
+
.sti-menu{
-
width:15px;
+
width:600px;
-
height:100px;
+
position:relative;
 +
margin:60px auto 0 auto;
 +
}
 +
.sti-menu li{
float:left;
float:left;
-
margin:0px 15px 2px 0px;
+
width:90px;
 +
height:160px;
 +
margin:1px;
}
}
-
 
+
.sti-menu li a{
-
#kaistcontent #starter
+
display:block;
-
{
+
overflow:hidden;
-
font-family: 'Open Sans', sans-serif;
+
background:#fff;
-
font-size:20pt;
+
opacity:0.6;
-
padding:0px 0px 0px 10px;
+
text-align:center;
-
font-style:italic;
+
height:100%;
 +
width:100%;
 +
position:relative;
 +
-moz-box-shadow:1px 1px 2px #ddd;
 +
-webkit-box-shadow:1px 1px 2px #ddd;
 +
box-shadow:1px 1px 2px #ddd;
}
}
-
 
+
.sti-menu li a h2{
-
#kaistcontent #sub-title
+
color:#000;
-
{
+
font-family: "Times New Roman", arial, serif;  
-
font-family: 'Open Sans', sans-serif;
+
font-size:13px;
-
color:#848383;
+
-
font-size: 15pt;
+
-
line-height:100%;
+
font-weight:bold;
font-weight:bold;
 +
position:absolute;
 +
padding:5px;
 +
width:80px;
 +
top:90px;
 +
left:0px;
 +
text-shadow: 0px 1px 1px black;
 +
}
 +
.sti-menu li a h3{
 +
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
 +
font-size:11px;
font-style:italic;
font-style:italic;
 +
color: #111;
 +
position:absolute;
 +
top:115px;
 +
left:0px;
 +
width:80px;
 +
padding:5px;
 +
}
 +
.sti-icon{
 +
width:60px;
 +
height:60px;
 +
position:absolute;
 +
background-position:top left;
 +
background-repeat:no-repeat;
 +
background-color:transparent;
 +
left:15px;
 +
top:20px;
 +
}
 +
.sti-icon-home{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/5/5c/KAIST_Home.png');
 +
}
 +
.sti-icon-team{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/c/c4/KAIST_Teampage.png');
 +
}
 +
.sti-icon-part{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/a/a6/KAIST_Part.png');
 +
}
 +
.sti-icon-project{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/1/19/KAIST_Project.png');
 +
}
 +
.sti-icon-note{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/c/c8/KAIST_Note.png');
 +
}
 +
.sti-icon-attr{
 +
background-image: url('https://static.igem.org/mediawiki/igem.org/1/14/KAIST_Attr.png');
 +
}
 +
/* CSS reset */
 +
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 +
margin:0;
 +
padding:0;
}
}
-
#kaistcontent h1
+
html,body {
-
{
+
margin:0;
-
font-family: 'Open Sans', sans-serif;
+
padding:0;
-
color:#5c5858;
+
-
font-weight:bold;
+
-
font-size:24pt;
+
-
line-height:110%;
+
}
}
-
#kaistcontent ul
+
table {
-
{
+
border-collapse:collapse;
-
list-style-type:disc;
+
border-spacing:0;
-
padding: 0px 0px 0px 30px;
+
}
 +
fieldset,img {
 +
border:0;
}
}
-
#kaistcontent li
+
input{
-
{
+
border:1px solid #b0b0b0;
-
list-style-type:disc;
+
padding:3px 5px 4px;
 +
color:#979797;
 +
width:190px;
}
}
-
#kaistcontent #sub-sub-title
+
address,caption,cite,code,dfn,th,var {
 +
font-style:normal;
 +
font-weight:normal;
 +
}
 +
 
 +
ol,ul {
 +
list-style:none;
 +
}
 +
 
 +
caption,th {
 +
text-align:left;
 +
}
 +
 
 +
h1,h2,h3,h4,h5,h6 {
 +
font-size:100%;
 +
font-weight:normal;
 +
}
 +
 
 +
q:before,q:after {
 +
content:'';
 +
}
 +
 
 +
abbr,acronym {
 +
        border:0;
 +
}
 +
 +
#main
{
{
-
font-family: 'Open Sans', sans-serif;
+
min-height: 100%;
-
color:#848383;
+
width: 980px;
-
font-weight:bold;
+
margin: 0 auto;
-
font-size:14pt;
+
background-color: #FFFFFF;
-
line-height:110%;
+
}
}
 +
#main #home-img
 +
{
 +
position:absolute;
 +
width: 980px;
 +
top: -130px;
 +
z-index:2
 +
}
 +
</style>
</style>
</head>
</head>
-
 
<body>
<body>
<div id="main">
<div id="main">
-
<img id="top-img" src="https://static.igem.org/mediawiki/2012/6/6d/Back_home.PNG"/>
+
<div class="container">
-
<div id="menucontent">
+
<ul id="sti-menu" class="sti-menu">
-
  <img src="https://static.igem.org/mediawiki/2012/2/20/Home_ico.png"/>
+
<li data-hovercolor="#37c5e9">
-
<a href="https://2012.igem.org/Team:KAIST_Korea/Home_Intro"><img src="https://static.igem.org/mediawiki/2012/e/ee/Intro_ico.png"/></a>
+
<a href="https://2012.igem.org/Team:KAIST_Korea/Home_Intro">
-
<a href="https://2012.igem.org/Team:KAIST_Korea/Home_iGEM"><img src="https://static.igem.org/mediawiki/2012/c/c0/Igem_ico.png"/></a>
+
<h2 data-type="mText" class="sti-item">HOME</h2>
 +
<h3 data-type="sText" class="sti-item">intro/iGEM</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-home sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#ff395e">
 +
<a href="https://2012.igem.org/Team:KAIST_Korea/Team_KAIST">
 +
<h2 data-type="mText" class="sti-item">TEAM</h2>
 +
<h3 data-type="sText" class="sti-item">official team profile/</br>members/gallery</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-team sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#57e676">
 +
<a href="https://2012.igem.org/Team:KAIST_Korea/Part_About">
 +
<h2 data-type="mText" class="sti-item">DATA</h2>
 +
<h3 data-type="sText" class="sti-item">description/</br>bio bricks</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-part sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#d869b2">
 +
<a href="https://2012.igem.org/Team:KAIST_Korea/Project_Background">
 +
<h2 data-type="mText" class="sti-item">PROJECT</h2>
 +
<h3 data-type="sText" class="sti-item">overview/results/</br>future plan/modeling</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-project sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#ffdd3f">
 +
<a href="https://2012.igem.org/Team:KAIST_Korea/Notebook_Labnote">
 +
<h2 data-type="mText" class="sti-item">NOTEBOOK</h2>
 +
<h3 data-type="sText" class="sti-item">lab note/protocol</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-note sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#d4d5d4">
 +
<a href="https://2012.igem.org/Team:KAIST_Korea/Plus_Safety">
 +
<h2 data-type="mText" class="sti-item">PLUS</h2>
 +
<h3 data-type="sText" class="sti-item">safety/human prac./</br>attr./sponsors</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-attr sti-item"></span>
 +
</a>
 +
</li>
 +
</ul>
 +
 
</div>
</div>
-
<div id="top-img-description-box"><span id="top-img-description">Home : Introduction</span></div>
 
-
<img id="horizontal-line" src="https://static.igem.org/mediawiki/2012/7/7f/Horizontal_line_kaist.png"></img>
 
-
<div id="kaistcontent">
+
<div class="iGEMLogo">
-
        <div>
+
<a href="https://igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/0/00/KAIST_iGEM_logo.png"/></a>
-
        <img id="starter-grad" style="height:80px" src="https://static.igem.org/mediawiki/2012/9/95/Starter_gradient_kaist.png"></img>
+
</div>
-
        <h1> Abstract</h1>
+
-
<span id="sub-title">Reguli</span></br></br>
+
-
+
-
<span id="little"></span><span id="starter">B</span>iological engineering has brought us handy tools to produce desired products. However, we have to induce genes to properly express them on correct cell phase. We, KAIST 2012 iGEM team, suggest a module that automatically turns the transcription of gene on or off using dual-phase switching module. In our model, promoter orientation is designed to be reversed when sufficient quorum molecule is detected. Then, genes on the other side, indigo synthesizing enzyme bFMO, lactonase, and excisionase are expressed. Indigo is meaningful in that it is the end-product of its metabolic pathway and, its color can be easily detected. Lactonase quenches quorum molecule(lactone), which will generate an oscillating pattern. Excisionase acts on the recombination site to set promoter to its initial orientation.  In this way, we can regulate metabolic pathways. So we call it regulative E.coli, Reguli.
+
-
 
-
</div>
 
-
</br></br>
 
-
<div>
 
-
<img id="starter-grad" src="https://static.igem.org/mediawiki/2012/9/95/Starter_gradient_kaist.png"></img>
 
-
        <h1> Introduction</h1>
 
-
<span id="sub-title">"We suggest an auto-regulation module free from induction which utilizes dual-phase switching system."</span></br></br>
+
<img id="home-img" src="https://static.igem.org/mediawiki/2012/b/b9/Kaist_enter_background.png"/>
-
<span id="little"></span><span id="starter">T</span>hroughout past iGEM competitions, many kinds of bio-modules were proposed and tested. They were great and some were brilliant, but it doesn’t seem many of them are universally available. Of course the goal of iGEM is to enrich the database, but we view the beauty of this registry is to contain as many modules which can be readily applied to actual research as possible. Thus, here now, we suggest an auto-regulation module free from induction which utilizes dual-phase switching system and quorum sensing.
+
 +
</div>
-
</br></br>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-
<span id="little2"></span>We may think of many meanings for this module; bio-computing, in-cell signal processing, and auto-control of cell metabolism. For example, since we use dual-phase switching system, we may consider each direction of gene expression as a signal; signal 0 or 1 of binary code. Thereby we can use this module to generate in vivo logic gates or computational system.  
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
 +
<script>
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
-
</br></br>
+
jQuery.extend( jQuery.easing,
-
<span id="little2"></span>Dual-phase switching system adopts DNA recombination system of bacteriophage origin. In this system, DNA integrase recognizes specific sequences called attB and attP and then invert the sequence between them. Exisionase revert this sequence into its original state by recognizing the recombination site. We can thereby use this system to turn the pathway on or off.
+
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
</script>
 +
<script>
 +
(function($) {
 +
 +
var methods = {
 +
init : function( options ) {
 +
 +
if( this.length ) {
 +
 +
var settings = {
 +
// configuration for the mouseenter event
 +
animMouseenter : {
 +
'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
 +
'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
 +
'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
 +
},
 +
// configuration for the mouseleave event
 +
animMouseleave : {
 +
'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
 +
'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
 +
'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
 +
},
 +
// speed for the item bg color animation
 +
boxAnimSpeed : 300,
 +
// default text color (same defined in the css)
 +
defaultTextColor : '#000',
 +
// default bg color (same defined in the css)
 +
defaultBgColor : '#fff'
 +
};
 +
 +
return this.each(function() {
 +
 +
// if options exist, lets merge them with our default settings
 +
if ( options ) {
 +
$.extend( settings, options );
 +
}
 +
 +
var $el = $(this),
 +
// the menu items
 +
$menuItems = $el.children('li'),
 +
// save max delay time for mouseleave anim parameters
 +
maxdelay = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
 +
settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
 +
settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
 +
  ),
 +
// timeout for the mouseenter event
 +
// lets us move the mouse quickly over the items,
 +
// without triggering the mouseenter event
 +
t_mouseenter;
 +
 +
// save default top values for the moving elements:
 +
// the elements that animate inside each menu item
 +
$menuItems.find('.sti-item').each(function() {
 +
var $el = $(this);
 +
$el.data('deftop', $el.position().top);
 +
});
 +
 +
// ************** Events *************
 +
// mouseenter event for each menu item
 +
$menuItems.bind('mouseenter', function(e) {
 +
 +
clearTimeout(t_mouseenter);
 +
 +
var $item = $(this),
 +
$wrapper = $item.children('a'),
 +
wrapper_h = $wrapper.height(),
 +
// the elements that animate inside this menu item
 +
$movingItems= $wrapper.find('.sti-item'),
 +
// the color that the texts will have on hover
 +
hovercolor = $item.data('hovercolor');
 +
 +
t_mouseenter = setTimeout(function() {
 +
// indicates the item is on hover state
 +
$item.addClass('sti-current');
 +
 +
$movingItems.each(function(i) {
 +
var $item = $(this),
 +
item_sti_type = $item.data('type'),
 +
speed = settings.animMouseenter[item_sti_type].speed,
 +
easing = settings.animMouseenter[item_sti_type].easing,
 +
delay = settings.animMouseenter[item_sti_type].delay,
 +
dir = settings.animMouseenter[item_sti_type].dir,
 +
// if dir is 1 the item moves downwards
 +
// if -1 then upwards
 +
style = {'top' : -dir * wrapper_h + 'px'};
 +
 +
if( item_sti_type === 'icon' ) {
 +
// this sets another bg image for the icon
 +
style.backgroundPosition = 'bottom left';
 +
} else {
 +
style.color = hovercolor;
 +
}
 +
// we hide the icon, move it up or down, and then show it
 +
$item.hide().css(style).show();
 +
clearTimeout($item.data('time_anim'));
 +
$item.data('time_anim',
 +
setTimeout(function() {
 +
// now animate each item to its default tops
 +
// each item will animate with a delay specified in the options
 +
$item.stop(true)
 +
.animate({top : $item.data('deftop') + 'px'}, speed, easing);
 +
}, delay)
 +
);
 +
});
 +
// animate the bg color of the item
 +
$wrapper.stop(true).animate({
 +
backgroundColor: settings.defaultTextColor
 +
}, settings.boxAnimSpeed );
 +
 +
}, 100);
-
                </br></br>
+
})
-
<span id="little2"></span>Products of LuxI and LuxR are used to generate signals in our quorum sensing model. They initiate the operation of auto-regulation module. Lactonase will regulate the signal to yield an oscillating pattern.
+
// mouseleave event for each menu item
-
 
+
.bind('mouseleave', function(e) {
-
                </br></br>
+
-
<span id="little2"></span>As our end product, we selected bio-indigo which comes from indole. This widespread pigment is produced by bFMO, bacterial Flavin-containing MonoOxygenase. Successful production of bio-indigo verifies that our module can be embodied well in metabolic pathway and also proposes its potential usage.
+
clearTimeout(t_mouseenter);
-
 
+
-
</br>
+
var $item = $(this),
-
</br>
+
$wrapper = $item.children('a'),
-
       
+
wrapper_h = $wrapper.height(),
-
</div>
+
$movingItems= $wrapper.find('.sti-item');
-
</div>
+
 +
if(!$item.hasClass('sti-current'))
 +
return false;
 +
 +
$item.removeClass('sti-current');
 +
 +
$movingItems.each(function(i) {
 +
var $item = $(this),
 +
item_sti_type = $item.data('type'),
 +
speed = settings.animMouseleave[item_sti_type].speed,
 +
easing = settings.animMouseleave[item_sti_type].easing,
 +
delay = settings.animMouseleave[item_sti_type].delay,
 +
dir = settings.animMouseleave[item_sti_type].dir;
 +
 +
clearTimeout($item.data('time_anim'));
 +
 +
setTimeout(function() {
 +
 +
$item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {
 +
 +
if( delay + speed === maxdelay ) {
 +
 +
$wrapper.stop(true).animate({
 +
backgroundColor: settings.defaultBgColor
 +
}, settings.boxAnimSpeed );
 +
 +
$movingItems.each(function(i) {
 +
var $el = $(this),
 +
style = {'top' : $el.data('deftop') + 'px'};
 +
 +
if( $el.data('type') === 'icon' ) {
 +
style.backgroundPosition = 'top left';
 +
} else {
 +
style.color = settings.defaultTextColor;
 +
}
 +
 +
$el.hide().css(style).show();
 +
});
 +
 +
}
 +
});
 +
}, delay);
 +
});
 +
});
 +
 +
});
 +
}
 +
}
 +
};
 +
 +
$.fn.iconmenu = function(method) {
 +
if ( methods[method] ) {
 +
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
 +
} else if ( typeof method === 'object' || ! method ) {
 +
return methods.init.apply( this, arguments );
 +
} else {
 +
$.error( 'Method ' +  method + ' does not exist on jQuery.iconmenu' );
 +
}
 +
};
 +
 +
})(jQuery);
 +
</script>
 +
<script type="text/javascript">
 +
$(function() {
 +
$('#sti-menu').iconmenu({
 +
animMouseenter : {
 +
'mText' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1},
 +
'sText' : {speed : 600, easing : 'easeOutExpo', delay : 400, dir : 1},
 +
'icon'  : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1}
 +
},
 +
animMouseleave : {
 +
'mText' : {speed : 200, easing : 'easeInExpo', delay : 150, dir : 1},
 +
'sText' : {speed : 200, easing : 'easeInExpo', delay : 0, dir : 1},
 +
'icon'  : {speed : 200, easing : 'easeInExpo', delay : 300, dir : 1}
 +
}
 +
});
 +
});
 +
</script>
</body>
</body>
</html>
</html>
-
{{:Team:KAIST_Korea/footer}}
 

Revision as of 15:01, 15 August 2013

Team:KAIST Korea/top

Retrieved from "http://2013.igem.org/Team:KAIST_Korea"