From 2010.igem.org
(Difference between revisions)
|
|
Line 1: |
Line 1: |
- | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
| |
- | "http://www.w3.org/TR/html4/strict.dtd">
| |
- | <html lang="en">
| |
| | | |
| <head> | | <head> |
Revision as of 23:22, 25 October 2010
<head>
<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?
:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1k.1o=9(2b){b 3=$.2g({},$.1k.1o.21,2b);N g.H(9(){b 4={f:0,u:\'\',W:0,r:\'\',L:n,1j:n,1S:n};b 5=$(g);5.1T(\'7:4\',4);5.e(\'2o\',\'2m\');5.1f(\'1o\');b d=5.2n();d.H(9(){b l=$(g);b 1t=\'\';6(!l.J(\'B\')){6(l.J(\'a\')){l.1f(\'7-2h\');1t=l}l=l.1m(\'B:1r\')}b 18=l.x();6(18==0)18=l.t(\'x\');b 1b=l.y();6(1b==0)1b=l.t(\'y\');6(18>5.x()){5.x(18)}6(1b>5.y()){5.y(1b)}6(1t!=\'\'){1t.e(\'P\',\'1q\')}l.e(\'P\',\'1q\');4.W++});6(3.19>0){6(3.19>=4.W)3.19=4.W-1;4.f=3.19}6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');23(b i=0;i<3.h;i++){b G=U.29(5.x()/3.h);6(i==3.h-1){5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:(5.x()-(G*i))+\'1c\'}))}k{5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:G+\'1c\'}))}}5.O($(\'<D A="7-K">
</D>\').e({P:\'1q\',z:3.1U}));6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();$(\'.7-K p\',5).1d(w);$(\'.7-K\',5).1z(3.o)}b m=0;6(!3.1p&&d.1g>1){m=1E(9(){F(5,d,3,n)},3.1u)}6(3.S){5.O(\'<D A="7-S"><a A="7-27">2k</a><a A="7-25">2i</a></D>\');6(3.1R){$(\'.7-S\',5).26();5.1V(9(){$(\'.7-S\',5).2j()},9(){$(\'.7-S\',5).26()})}$(\'a.7-27\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')});$(\'a.7-25\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')})}6(3.M){b 14=$(\'<D A="7-M"></D>\');5.O(14);23(b i=0;i<d.1g;i++){6(3.1P){b l=d.1B(i);6(!l.J(\'B\')){l=l.1m(\'B:1r\')}6(3.1O){14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'1a\')+\'" 2e="" /></a>\')}k{14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'E\').2l(3.1M,3.1N)+\'" 2e="" /></a>\')}}k{14.O(\'<a A="7-1s" 1a="\'+i+\'">\'+(i+1)+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\');$(\'.7-M a\',5).1C(\'1F\',9(){6(4.L)N n;6($(g).2f(\'1h\'))N n;T(m);m=\'\';5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');4.f=$(g).t(\'1a\')-1;F(5,d,3,\'1s\')})}6(3.1X){$(2s).2F(9(1D){6(1D.1Q==\'2D\'){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')}6(1D.1Q==\'2C\'){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')}})}6(3.1W){5.1V(9(){4.1j=Q;T(m);m=\'\'},9(){4.1j=n;6(m==\'\'&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}})}5.2E(\'7:X\',9(){4.L=n;$(d).H(9(){6($(g).J(\'a\')){$(g).e(\'P\',\'1q\')}});6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}6(m==\'\'&&!4.1j&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}3.20.1w(g)})});9 F(5,d,3,17){b 4=5.1T(\'7:4\');6((!4||4.1S)&&!17)N n;3.1Y.1w(g);6(!17){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}k{6(17==\'1y\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}6(17==\'1x\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}}4.f++;6(4.f==4.W){4.f=0;3.2d.1w(g)}6(4.f<0)4.f=(4.W-1);6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6(3.M){$(\'.7-M a\',5).2B(\'1h\');$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\')}6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();6($(\'.7-K\',5).e(\'P\')==\'1A\'){$(\'.7-K p\',5).2c(3.o,9(){$(g).1d(w);$(g).1z(3.o)})}k{$(\'.7-K p\',5).1d(w)}$(\'.7-K\',5).1z(3.o)}k{$(\'.7-K\',5).2c(3.o)}b i=0;$(\'.7-c\',5).H(9(){b G=U.29(5.x()/3.h);$(g).e({y:\'R\',z:\'0\',11:\'10(\'+4.u.t(\'E\')+\') Z-Y -\'+((G+(i*G))-G)+\'1c 0%\'});i++});6(3.j==\'1l\'){b V=2H 2G("1K","12","1H","1e","1G","13","1I","1v");4.r=V[U.22(U.1l()*(V.1g+1))];6(4.r==2I)4.r=\'1v\'}6(3.j.2p(\',\')!=-1){b V=3.j.2t(\',\');4.r=$.2A(V[U.22(U.1l()*V.1g)])}4.L=Q;6(3.j==\'2r\'||3.j==\'1K\'||4.r==\'1K\'||3.j==\'12\'||4.r==\'12\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'12\'||4.r==\'12\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'1L\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'2q\'||3.j==\'1H\'||4.r==\'1H\'||3.j==\'1e\'||4.r==\'1e\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'1e\'||4.r==\'1e\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'28\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1G\'||3.j==\'2u\'||4.r==\'1G\'||3.j==\'13\'||4.r==\'13\'){b q=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.j==\'13\'||4.r==\'13\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);6(i==0){c.e(\'1L\',\'R\');i++}k{c.e(\'28\',\'R\');i=0}6(v==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;v++})}k 6(3.j==\'1I\'||4.r==\'1I\'){b q=0;b i=0;$(\'.7-c\',5).H(9(){b c=$(g);b 1J=c.x();c.e({1L:\'R\',y:\'s%\',x:\'R\'});6(i==3.h-1){I(9(){c.C({x:1J,z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({x:1J,z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1v\'||4.r==\'1v\'){b i=0;$(\'.7-c\',5).H(9(){$(g).e(\'y\',\'s%\');6(i==3.h-1){$(g).C({z:\'1.0\'},(3.o*2),\'\',9(){5.16(\'7:X\')})}k{$(g).C({z:\'1.0\'},(3.o*2))}i++})}}};$.1k.1o.21={j:\'1l\',h:15,o:2v,1u:2y,19:0,S:Q,1R:Q,M:Q,1P:n,1O:n,1M:\'.1Z\',1N:\'2x.1Z\',1X:Q,1W:Q,1p:n,1U:0.8,1Y:9(){},20:9(){},2d:9(){}};$.1k.1n=[].2w})(2z);',62,169,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||effect|else|child|timer|false|animSpeed||timeBuff|randAnim|100|attr|currentImage||title|width|height|opacity|class|img|animate|div|src|nivoRun|sliceWidth|each|setTimeout|is|caption|running|controlNav|return|append|display|true|0px|directionNav|clearInterval|Math|anims|totalSlides|animFinished|repeat|no|url|background|sliceDownLeft|sliceUpDownLeft|nivoControl||trigger|nudge|childWidth|startSlide|rel|childHeight|px|html|sliceUpLeft|addClass|length|active|50|paused|fn|random|find|_reverse|nivoSlider|manualAdvance|none|first|control|link|pauseTime|fade|call|next|prev|fadeIn|block|eq|live|event|setInterval|click|sliceUpDown|sliceUpRight|fold|origWidth|sliceDownRight|top|controlNavThumbsSearch|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbs|keyCode|directionNavHide|stop|data|captionOpacity|hover|pauseOnHover|keyboardNav|beforeChange|jpg|afterChange|defaults|floor|for|substr|nextNav|hide|prevNav|bottom|round|left|options|fadeOut|slideshowEnd|alt|hasClass|extend|imageLink|Next|show|Prev|replace|relative|children|position|indexOf|sliceUp|sliceDown|window|split|sliceUpDownRight|500|reverse|_thumb|3000|jQuery|trim|removeClass|39|37|bind|keypress|Array|new|undefined'.split('|'),0,{}))
- (function( $ ){
var $scrollTo = $.scrollTo = function( target, duration, settings ){
$(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ){
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( !isWin )
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
if( typeof settings == 'function' )
settings = { onAfter:settings };
if( target == 'max' )
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.speed || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if( settings.queue )
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function(){
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof targ ){
// A number will pass the regex
case 'number':
case 'string':
if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
targ = both( targ );
// We are done
break;
}
// Relative selector, no break!
targ = $(targ,this);
case 'object':
// DOMElement / jQuery
if( targ.is || targ.style )
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(), function( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if( toff ){// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if( settings.margin ){
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
if( settings.over[pos] )
// Scroll to a fraction of its width/height
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
}else{
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if( /^\d+$/.test(attr[key]) )
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if( !i && settings.queue ){
// Don't waste time animating, if there's no need.
if( old != attr[key] )
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ){
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if( !$(elem).is('html,body') )
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] )
- Math.min( html[size] , body[size] );
};
function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};
})( jQuery );
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#globalWrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#globalWrapper, .item').css({width: width, height: height});
$('#content').css({width: mask_width, height: height});
$('#globalWrapper').scrollTo($('a.selected').attr('href'), 0);
}
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<style type="text/css">
body {
width: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
font: trebuchet, verdana, arial, times new roman;
}
- globalWrapper {
width: 100%;
height: 100%;
padding-right: 0pt;
padding-left: 0pt;
padding-bottom: 10px;
background-color: black;
background-image: url("");
background-attachment: fixed;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
margin: 0 auto;
}
overflow: hidden;
}
- content {
border-left: none;
border-right: none;
height: 100%;
width: 900%;
height: 100%;
background-color: #eee;
padding:0;
}
.item {
width: 12.5%;
height: 500px;
float: left;
background-color: #ddd;
background-image: url('https://static.igem.org/mediawiki/2010/1/1a/Metu-bg.jpg');
padding-bottom:50px;
}
.content2 {
width: 900px;
height: 500px;;
top: 50px;
margin: 0 auto;
background: url('https://static.igem.org/mediawiki/2010/6/63/Metu-content2.png') no-repeat;
position: relative;
font-size: .8em;
}
.content2 .text {
width: 800px;
margin: 0 auto;
padding-top: 50px;
text-align: justify;
}
.homepage {
width: 900px;
height: 500px;
top: 50px;
margin: 0 auto;
background: url('https://static.igem.org/mediawiki/2010/1/13/Metu-home.png') no-repeat;
position: relative;
}
.selected {
color: red;
font-weight: 300;
}
.clear {
clear: both;
}
- slider {
min-height: 300px;
width: 404px;
border: 4px solid #b4c8c4;
background: #000;
background: url(images/loading.gif) no-repeat 50% 50%;
margin: 0 auto;
}
- slider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
- slider a {
border: 0;
display: block;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 60;
display: none;
}
.nivo-slice {
display: block;
position: absolute;
z-index: 50;
height: 100%;
}
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
width: 880px;
z-index: 89;
}
.nivo-caption p {
padding: 5px;
margin: 0;
}
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 99;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
right: 0px;
}
.nivo-controlNav a {
position: relative;
z-index: 99;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/*-----------------------------------------*/
.nivo-controlNav {
position: absolute;
left: 47%;
bottom: -30px;
}
.nivo-controlNav a {
display: none;
width: 10px;
height: 10px;
background: none;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.nivo-controlNav a.active {
background-position: -10px 0;
}
.nivo-directionNav a {
display: block;
width: 32px;
height: 34px;
background: url(images/arrows.png) no-repeat;
text-indent: -9999px;
border: 0;
}
a.nivo-nextNav {
background-position: -32px 0;
right: 10px;
}
a.nivo-prevNav {
left: 10px;
}
/*-----------------------------------------*/
.nivo-controlNav {
position: absolute;
left: 47%;
bottom: -30px;
}
.nivo-controlNav a {
display: none;
width: 10px;
height: 10px;
background: none;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.nivo-controlNav a.active {
background-position: -10px 0;
}
.nivo-directionNav a {
display: block;
}
.mainmenu {
width: 130px;
position: fixed;
height: auto;
top: 50px;
text-align: right;
float: left;
z-index: 100;
}
.mainmenu ul {
padding-right: 5px;
float: left;
list-style: none;
line-height: 1;
color: #FFFF00;
background: #fff;
opacity: .7;
}
.mainmenu a, .mainmenu a:visited {
display: block;
width: 100px;
font-style: normal;
text-decoration: none;
color: #000;
margin-top: 5px;
margin-bottom: 5px;
}
.mainmenu li li a {
text-indent: 2px;
}
.mainmenu ul ul a {
width: 140px;
height: 100%;
}
.mainmenu ul a {
width: 140px;
}
.mainmenu li {
width: 140px;
margin: 0;
padding: 0;
text-indent: -20px;
}
.mainmenu ul li {
position: relative;
width: 100%;
}
.mainmenu ul li a.selected {
color: blue;
}
/* !!!!! */
.mainmenu li ul {
position: absolute;
padding: 0px 5px 0 5px;
left: -999em;
height: auto;
width: 100px;
background: #fff;
font-weight: normal;
text-align: left;
}
.mainmenu li li {
width: 100%;
}
.mainmenu li a {
width: 90px;
}
.mainmenu li li a {
width: 100%;
}
.mainmenu li ul {
margin: -55px 0 0 0px;
}
.ul_ch, .mainmenu li:hover ul ul, .mainmenu li li:hover ul ul, .mainmenu li li li:hover ul ul, .mainmenu li li li li:hover ul ul, .mainmenu li li li li li:hover ul ul {
left: -999em;
}
.mainmenu li:hover ul, .mainmenu li li:hover ul, .mainmenu li li li:hover ul, .mainmenu li li li li:hover ul, .mainmenu li li li li li:hover ul {
left: 100%; /* !!! */
}
.mainmenu li:hover > ul.ul_ch {
left: 100%; /* !!! */
}
.mainmenu li:hover a, .mainmenu li:hover a:visited, .mainmenu li:hover a:hover, .mainmenu li a:hover {
color: red;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited {
color: #000;
}
.mainmenu ul ul a:hover, .mainmenu li:hover li:hover a, .mainmenu li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited {
color: red;
}
/*-------------------final----------------------------*/
- menu {
text-align: left;
position: fixed;
top: 50px;
height: auto;
width: auto;
z-index: 999;
height: 500px;
}
- menu ul li a.selected {
color: red;
background: silver;
}
/*Toggle Area*/
- menu .toggle {
float: right;
width: 9px;
padding: 5px;
cursor: pointer;
border-top: 1px solid white;
border-left: 1px solid #E0E0E0;
color: #999;
text-indent: 0;
margin-left: 0;
}
- menu ul.navmenu li:first-child .toggle {
border-width: 0 0 0 1px;
}
/*Menu Setup*/
- menu ul {
padding: 0;
margin: 0;
width: 150px;
}
- menu ul ul {
border: 1px solid #CCC;
overflow: hidden;
}
- menu ul.navmenu li {
margin: 0;
list-style: none;
float: left;
}
- menu ul.navmenu li li {
float: none;
}
/*Links*/
- menu ul.navmenu a, #menu ul.navmenu a:visited {
text-decoration: none;
padding: 5px;
display: block;
color: #008FDD;
}
- menu ul.navmenu ul.submenu a:hover {
background: #FFF4D2;
color: #333;
}
/*Heading Outer div*/
- menu ul.navmenu .menutop {
border: 1px solid #CCC;
border-width: 0 1px;
overflow: hidden;
width: 150px;
background: #F9F9F9;
}
/*Header Links*/
- menu ul.navmenu .menutop a {
width: 120px;
float: left;
margin: 0 0 1px 0;
border-top: 1px solid white;
}
/*Header Link Hover*/
- menu ul.navmenu .menutop a:hover {
color: #333;
}
/*Removes white border for the first header*/
- menu ul.navmenu li:first-child .menutop a {
border-width: 0px;
}
/*Single Menu Width Fix*/
- menu ul.navmenu .menusingle a {
width: 140px;
}
/*Border Radius and Special Border Width*/
- menu ul.navmenu li:first-child .menutop {
border-width: 1px 1px 0 1px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
- menu ul.navmenu li:last-child .menutop {
border-width: 0px 1px 1px 1px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
- menu ul.navmenu li:last-child ul.submenu {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
- menu ul.navmenu li:last-child .menutop-open {
-moz-border-radius: 0;
-webkit-border-radius: 0px;
border-width: 0 1px;
}
- contentSub {
display: none;
}
- siteSub {
display: none;
}
- search-controls {
display: none;
}
.firstHeading {
display: none;
}
- search-controls {
margin-top: 30px;
}
- footer-box {
display: none;
}
- top-section {
height: 25px;
width: 100%;
position: fixed;
border-left: none;
border-right: none;
}
.left-menu {
margin-top: -15px;
}
.left-menu ul {
border: none;
}
- menubar li a {
color: white;
}
- menubar.right-menu {
margin-top: -15px;
}
.right-menu ul {
border: none;
}
- menubar {
top: 22px;
z-index: 25;
}
img[src*="/wiki/skins/common/images/wiki.png"] {
width: 0;
height: 40px;
margin: 0 auto;
background: transparent url() top left no-repeat;
z-index:10000;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();
if($.browser.msie){
$('#menu ul.navmenu li:last-child .menutop') .css('border-bottom','1px solid #CCC');
}
$('.toggle') .click(function(){
if ($(this) .hasClass('toggle-open')) {
$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty() .append('+') .parents('li') .children('ul') .slideUp(250);
$(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
}else{
$(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
$(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty() .append('–') .parents('li') .children('ul') .slideDown(250);
}
})
})
$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty() .append('+') .parents('li') .children('ul') .slideUp(250);
</script>
</head>
<body>
Team
METU Turkey Software is an interdisciplinary team of 8 students and
3 advisors from various backgrounds such as Molecular Biology, Bioinformatics,
Computer Engineering and Computer Education and Instructional Technology.
We have put our knowledge and experience in our fields together to bring
a much needed solution to a daily problem in field of synthetic biology
for iGEM 2010
Motivation
Since 2008, we have been participating in iGEM as METU ( Middle East
Technical University) wet-lab team, and each year we have noticed the
increasing number of teams participating, along with an increase in
biobricks entries at partsregistry.org. While having more choices of
biobricks to choose from is incredible, searching for and choosing the
appropriate parts is becoming a challenge. This year during the construction
process of iGEM biobrick parts for our new project, we felt the need
for an application to find interacting parts based on an input/output
model to design the genetic constructs. Using a specialized software
for searching the parts registry to find possible biobricks to include
into our construct would be much easy, fast and accurate than manual.
We have shared our need with a group of friends who are software engineers,
and initiated the METU_Turkey_SOFTWARE team where we worked together
over this summer to build the BIO-Guide software.
Scope and Future Aspects
The partsregistry.org is a continuously growing collection of standard
genetic parts that can be mixed and matched to build synthetic biology
devices and systems. The Registry is based on the principle of "get
some, give some". Registry users benefit from using the parts and information
available in the Registry for designing their own genetically engineered
biological systems. In exchange, the expectation is that Registry users
will contribute back to the information and the data on existing parts
and will submit new parts they have designed in order to improve this
community resource.
As an expanding database partsregistry.org needs to be more organized
and the standardization template needs to be improved. Additionally,
the potential of multiple ways of using each part in different construct
combination brings out the necessity for an application to search through
the database. BIO-Guide is the first designed software that organizes
over 1000 parts in partsregistry.org as possible atomics parts to build
new biological device and systems for specific input and outputs based
on graph theory. The requirement of similar applications and software
tools are now inevitable in the emerging field of synthetic biology.
The innovative approach that makes the partsregistry.org easy to use
for synthetic biology applications is the collection of standardized
parts that can be used in any combination with minimal effort under
one database. But while working on our algorithm to search for possible
combinations of parts depending on the given input and output, we have
realized that present standards are inadequate and parts registry form
must be improved.
In very near future a new format for parts registry form is needed
and few additional features should be implemented to have more control
on the database. We are planning to suggest a new format and features
for the parts registry based on the survey results we have received.
And planning to build the next version of BIO-guide based on the revised
parts registry form. Along with using new parts registry standards we
will be improving the algorithm, so that the software can search through
more complex relations and returns all possible functional constructs.
Project Introduction
As the field of Synthetic Biology is on the rise, iGEM is growing
up very fast and the number of parts in the parts registry is increasing
with the addition of more complex parts each day. After facing some
difficulty while running our algorithms on the parts registry, the need
for more effective standardization of parts entry was apparent. We have
investigated the information on parts in iGEM’s 2010 distribution and
reorganized the information on the parts registry forms according to
the needs of our algorithm. Then we have used graph theoretic modeling
to visualize the relations between iGEM Parts and to standardize the
representation of the parts as much as possible by graph theoretical
methods. This helped us to find input output relations between the parts.
Furthermore, our program BIO-Guide is now able to provide alternative
pathways to construct the most reliable and functional Biobrick devices
with respect to given inputs and expected outputs as a guide to Biobricks
parts registry.
Material and Methods
Our material for B-IO Guide Software Program was the all background
information of parts stated in distributed 2010 iGEM plates to whole
wetlab teams. Data of a part having specific part ID has been parsed
by writing a parsing code. Then, other data which needs to be standardized
according to biological importance which has been get out from the Registry
of Parts Page manually. These standardized data are;
- working conditions of biobricks involved within the parts
- properties of inputs and outputs
We named as "Inputs" because an effector which may be chemical(IPTG,
galactose etc.) and physical (UV irradiation, temperature etc) external
inputs or may be proteins synthesized from a biobrick coding sequence
can affect promoters on the parts. The effects of these mentioned inputs
have been determined as inducer (a molecule that starts gene expression),
repressor (blocker of attachment of RNA polymerase to promoter), activator
(increasing the rate of transcription) and inhibitor (decreasing the
rate of transcription). Moreover, the promoters may have additional
property at which they may become constitutively ON without seen any
effect.
On the other hand, for output section, we add new approach which
is "working condition" parameter because the expressed proteins from
biobrick coding sequences may come from different organisms to run mostly
in E.coli. However, in some cases these proteins may not work well as
expected unless suitable and optimum conditions are provided in the
host. Thus, we have thought that natural(in vivo) or experimental(in
vitro) working conditions of the synthesized proteins from the certain
biobricks or constructs should be stated during submitting to Parts
Registry. Nevertheless, our 2010 iGEM Software Program version 1.0 mostly
does not have any experimental data since the data had not been added
for pages of the parts regularly and true. Therefore, if our advised
Parts Registry interfaces are used in iGEM in future and our standards
are used, then we will be able to add such an information to the database
of the program for better performance.
<script type="text/javascript">if (window.runOnloadHook) runOnloadHook();</script>
</body>
</html>