Team:UPO-Sevilla/test

From 2011.igem.org

(Difference between revisions)
 
(22 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
-
                    <div id="principal">
+
      <style type="text/css">
-
                        <div class="main">
+
/*
 +
AnythingSlider v1.7+ Default (base) theme
 +
By Chris Coyier: http://css-tricks.com
 +
with major improvements by Doug Neiner: http://pixelgraphics.us/
 +
based on work by Remy Sharp: http://jqueryfordesigners.com/
 +
*/
 +
/*****************************
 +
  SET DEFAULT DIMENSIONS HERE
 +
*****************************/
 +
/* change the ID to match your slider */
 +
#slider {
 +
width: 700px;
 +
height: 390px;
 +
list-style: none;
 +
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
 +
/* Opera width restriction */
 +
.anythingBase { max-width: 32766px; }
-
                        <ul id="breadcrumbs" class="xbreadcrumbs">
+
/*****************
-
                                    <li class="">
+
  SET COLORS HERE
-
                                      <a class="home" href="/Team:UPO-Sevilla" style="white-space: nowrap; float: left; overflow: hidden; width: 40px; display: block;" init-width="29">Home</a><ul></ul>
+
*****************/
-
                                    </li>
+
/**** Default state (no keyboard focus) ****/
-
                                    <li><a href="/Team:UPO-Sevilla/Foundational_Advances" style="white-space: nowrap; float: left;">Foundational Advances</a><ul></ul></li>
+
/* slider window - top & bottom borders, default state */
-
                                    <li><a href="/Team:UPO-Sevilla/Foundational_Advances/MiniTn7/Overview" style="white-space: nowrap; float: left;">MiniTn7</a><ul></ul></li>
+
div.anythingSlider .anythingWindow {
-
                                    <li class="current"><a href="/Team:UPO-Sevilla/Foundational_Advances/MiniTn7/Data_Page" style="white-space: nowrap; float: left;">Data Page</a><ul></ul></li>
+
border-top: 3px solid #777;
-
                        </ul>
+
border-bottom: 3px solid #777;
 +
}
 +
/* Navigation buttons, default state */
 +
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
 +
background: #777;
 +
color: #000;
 +
}
 +
/* start-stop button, stopped, default state */
 +
div.anythingSlider .start-stop {
 +
background-color: #040;
 +
color: #fff;
 +
}
 +
/* start-stop button, playing, default state */
 +
div.anythingSlider .start-stop.playing {
 +
background-color: #800;
 +
}
 +
/* start-stop button, default hovered text color (when visible) */
 +
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
 +
color: #ddd;
 +
}
-
                            <h1>Data Page</h1>
+
/**** Active State (slider has keyboard focus) ****/
-
                           
+
/* slider window - top & bottom borders, active state */
-
<style type="text/css">
+
div.anythingSlider.activeSlider .anythingWindow {
-
        .dataPage{width:700px; height:475px; background: url(https://static.igem.org/mediawiki/2011/f/f0/UPOSevillaTn7DataPage.png);}
+
border-color: #7C9127;
-
              .tour_Tn7R{
+
}
-
  border: 3px solid red;
+
/* Navigation buttons, active state */
-
    bottom: 0;
+
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
-
    display: inline-block;
+
background-color: #7C9127;
-
    height: 2em;
+
}
-
    left: 5.5em;
+
/* start-stop button, stopped, active state */
-
    position: relative;
+
div.anythingSlider .start-stop {
-
    width: 4.7em;}
+
background-color: #080;
-
.tour_FRT{
+
color: #fff;
-
border: solid 3px red;       
+
}
-
display: inline-block;
+
/* start-stop button, playing, active state */
-
height: 2em;
+
div.anythingSlider .start-stop.playing {
-
left: 10.5em;
+
background-color: #d00;
-
position: relative;
+
}
-
width: 2em;
+
/* start-stop button, active slider hovered text color (when visible) */
-
bottom: 2em;}
+
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
-
.tour_antib{
+
color: #fff;
-
border: solid 3px red;     
+
}
-
display: inline-block;
+
-
height: 2em;
+
-
left: 10.5em;
+
-
position: relative;
+
-
width: 4em;
+
-
bottom: 2em;}
+
-
        .tour_your_bioBrick{  
+
-
border: solid 3px red;
+
-
display: inline-block;
+
-
height: 2em;
+
-
left: 16em;
+
-
position: relative;
+
-
width: 6.5em;
+
-
bottom: 2em;}
+
-
  .tour_R6K_origin{
+
-
border: solid 3px red;  
+
-
display: inline-block;
+
-
height: 1em;
+
-
position: relative;
+
-
right: 4.5em;
+
-
top: 3em;
+
-
width: 6.7em;
+
-
bottom: 2em;}
+
-
        .tour_oriT{
+
-
border: solid 3px red;   
+
-
display: inline-block;
+
-
height: 1em;
+
-
left: 6.5em;
+
-
position: relative;
+
-
top: 2.5em;
+
-
width: 4em;}
+
-
.tour_Transposase_action{ 
+
-
border: solid 3px red;  
+
-
display: inline-block;
+
-
height: 2em;
+
-
left: 18.5em;
+
-
position: relative;
+
-
top: 3em;
+
-
width: 4.7em;}
+
-
.tour_Flp_recombinase_action{
+
-
border: solid 3px red;
+
-
display: inline-block;
+
-
height: 4em;
+
-
left: -13.5em;
+
-
position: relative;
+
-
top: 19em;
+
-
width: 6.7em;}
+
-
.tour_final_cartoon{  
+
-
border: solid 3px red;      
+
-
display: inline-block;
+
-
height: 4em;
+
-
left: -32.5em;
+
-
position: relative;
+
-
top: 18em;
+
-
width: 4.7em;}
+
-
</style>
+
-
<div class="wrapper">
+
-
<div class="content">
+
-
+
-
                            <div class="dataPage">
+
-
                              <div class="tour_Tn7R"></div>
+
-
                              <div class="tour_FRT"></div>
+
/***********************
 +
  COMMON SLIDER STYLING
 +
***********************/
 +
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
 +
div.anythingSlider {
 +
display: block;
 +
margin: 0 auto;
 +
overflow: visible !important; /* needed for Opera and Safari */
 +
position: relative;
 +
padding: 0 45px 28px 45px;
 +
}
 +
/* anythingSlider viewport window */
 +
div.anythingSlider .anythingWindow {
 +
overflow: hidden;
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
/* anythingSlider base (original element) */
 +
.anythingBase {
 +
background: transparent;
 +
list-style: none;
 +
position: absolute;
 +
overflow: visible !important;
 +
top: 0;
 +
left: 0;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
/* all panels inside the slider */
 +
.anythingBase .panel {
 +
background: transparent;
 +
display: block;
 +
overflow: hidden;
 +
float: left;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
.anythingBase .panel.vertical {
 +
float: none;
 +
}
-
                              <div class="tour_antib"></div>
+
/* Navigation Arrows */
 +
div.anythingSlider .arrow {
 +
top: 50%;
 +
position: absolute;
 +
display: block;
 +
}
 +
div.anythingSlider .arrow a {
 +
display: block;
 +
height: 140px;
 +
margin: -70px 0 0 0; /* half height of image */
 +
width: 45px;
 +
text-align: center;
 +
outline: 0;
 +
background: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png) no-repeat;
 +
}
 +
/* hide text, target the span so IE7 doesn't text-indent the link */
 +
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
 +
/* back arrow */
 +
div.anythingSlider .back { left: 0; }
 +
div.anythingSlider .back a { background-position: left top; }
 +
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
 +
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
 +
/* forward arrow */
 +
div.anythingSlider .forward { right: 0; }
 +
div.anythingSlider .forward a { background-position: right top; }
 +
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
 +
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
-
                              <div class="tour_your_bioBrick"></div>
+
/* Navigation Links */
 +
div.anythingSlider .anythingControls { outline: 0; display: none; }
 +
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
 +
div.anythingSlider .anythingControls ul li { display: inline; }
 +
div.anythingSlider .anythingControls ul a {
 +
font: 11px/18px Georgia, Serif;
 +
display: inline-block;
 +
text-decoration: none;
 +
padding: 2px 8px;
 +
height: 18px;
 +
margin: 0 5px 0 0;
 +
background-image: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png);
 +
background-position: center -288px ;
 +
background-repeat: repeat-x;
 +
text-align: center;
 +
outline: 0;
 +
border-radius: 0 0 5px 5px;
 +
-moz-border-radius: 0 0 5px 5px;
 +
-webkit-border-radius: 0 0 5px 5px;
 +
}
 +
div.anythingSlider .anythingControls ul a:hover {
 +
background-image: none;
 +
}
 +
/* Navigation size window */
 +
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
-
                              <div class="tour_R6K_origin"></div>
+
/* slider autoplay right-to-left, reverse order of nav links to look better */
 +
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
 +
div.anythingSlider.rtl .anythingControls ul { float: left; }    /* move nav link group to left */
 +
div.anythingSlider.rtl .anythingWindow {
 +
direction: ltr;
 +
unicode-bidi: bidi-override;
 +
}
 +
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
-
                              <div class="tour_oriT"></div>
+
/* Autoplay Start/Stop button */
 +
div.anythingSlider .start-stop {
 +
background-image: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png);
 +
background-position: center -288px;
 +
background-repeat: repeat-x;
 +
padding: 2px 5px;
 +
width: 40px;
 +
text-align: center;
 +
text-decoration: none;
 +
float: right;
 +
z-index: 100;
 +
outline: 0;
 +
border-radius: 0 0 5px 5px;
 +
-moz-border-radius: 0 0 5px 5px;
 +
-webkit-border-radius: 0 0 5px 5px;
 +
}
 +
/* hide cell shading on hover - makes the button appear to come forward */
 +
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
-
                              <div class="tour_Transposase_action"></div>
+
/* probably not necessary, but added just in case */
-
 
+
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
-
      <div class="tour_Flp_recombinase_action"></div>
+
transition-duration: 0;
 +
-o-transition-duration: 0;
 +
-moz-transition-duration: 0;
 +
-webkit-transition-duration: 0;
 +
}
-
      <div class="tour_final_cartoon"></div>
+
/*
-
                </div>
+
AnythingSlider v1.5.10 Minimalist Round Theme
-
</div>
+
By Rob Garrison
-
</div>
+
*/
-
<!-- The JavaScript -->
+
/****** SET COLORS HERE *******/
-
      <script src="https://2011.igem.org/Team:UPO-Sevilla/js/jqueryeasing.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
/* Default State */
-
        <script type="text/javascript">
+
div.anythingSlider-minimalist-round .anythingWindow {
-
$(function() {
+
border-top: 3px solid #333;
-
/*
+
border-bottom: 3px solid #333;
-
the json config obj.
+
}
-
name: the class given to the element where you want the tooltip to appear
+
div.anythingSlider-minimalist-round .anythingControls ul a {
-
bgcolor: the background color of the tooltip
+
border: 1px solid #000;
-
color: the color of the tooltip text
+
background: #333;
-
text: the text inside the tooltip
+
}
-
time: if automatic tour, then this is the time in ms for this step
+
div.anythingSlider-minimalist-round .anythingControls ul a:hover, div.anythingSlider-minimalist-round .anythingControls ul a.cur {
-
position: the position of the tip. Possible values are
+
background: #777;
-
TL top left
+
}
-
TR  top right
+
div.anythingSlider-minimalist-round .start-stop {
-
BL  bottom left
+
border: 1px solid #000;
-
BR  bottom right
+
}
-
LT  left top
+
div.anythingSlider-minimalist-round .start-stop.playing {
-
LB  left bottom
+
background-color: #300;
-
RT  right top
+
}
-
RB  right bottom
+
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
-
T  top
+
color: #ddd;
-
R  right
+
}
-
B  bottom
+
-
L  left
+
-
*/
+
-
var config = [
+
-
{
+
-
"name" : "tour_Tn7R",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"position" : "T",
+
-
"text" : "Tn7R & Tn7L: ends of Tn7 transposon, required for transposition. They are recognized by the transposase machinery, which will transpose any sequence located between these two motifs.",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_FRT",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "FRT: Flp recombinase target sites, required for excision of the resistance cassette.",
+
-
"position" : "T",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_antib",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "Antibiotic resistance cassette for selection of strains bearing transposon insertions. After that it can be removed by site-specific recombination at the flanking FRT sites.",
+
-
"position" : "T",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_your_bioBrick",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "You can use the BioBrick cloning site to clone the part(s) you wish to insert at the microbial genome.",
+
-
"position" : "T",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_R6K_origin",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"position" : "T",
+
-
"text" : "R6K origin: replication origin only active in pir+ E. coli strains.",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_oriT",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "oriT: transference origin for conjugation purposes.",
+
-
"position" : "T",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_Transposase_action",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "The transient expression of the transposase complex causes site-specific genome integration. TnsD recognizes the attTn7 insertion site at the conserve C-terminal end of glmS gen. Its interaction with DNA makes TnsC positions in attTn7. TnsC interacts with TnsA and TnsB, which recognize Tn7R and Tn7L, excise and insert them at the attTn7.",
+
-
"position" : "T",
+
-
"time" : 5000
+
-
},
+
-
{
+
-
"name" : "tour_Flp_recombinase_action",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "The transient expression of Flp recombinase or Flipase induces recombination between FRT sites, removing the resistance cassette between them.",
+
-
"position" : "B",
+
-
"time" : 5000
+
-
},
+
-
                    {
+
-
"name" : "tour_final_cartoon",
+
-
"bgcolor" : "white",
+
-
"color" : "black",
+
-
"text" : "Finally you can insert your BioBrick into of a new strain of bacterium without plasmid limitations or antibiotic resistance disadvantages.",
+
-
"position" : "B",
+
-
"time" : 5000
+
-
}
+
-
],
+
/* Active State */
-
//define if steps should change automatically
+
div.anythingSlider-minimalist-round.activeSlider .anythingWindow {
-
autoplay = false,
+
border-color: #164054;
-
//timeout for the step
+
}
-
showtime,
+
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a {
-
//current step of the tour
+
background-color: #164054;
-
step = 0,
+
}
-
//total number of steps
+
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a.cur {
-
total_steps = config.length;
+
background: #fff;
-
+
}
-
//show the tour controls
+
div.anythingSlider-minimalist-round.activeSlider .start-stop.playing {
-
showControls();
+
background-color: #f00;
-
+
}
-
/*
+
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
-
we can restart or stop the tour,
+
color: #fff;
-
and also navigate through the steps
+
}
-
*/
+
 
-
$('#activatetour').live('click',startTour);
+
/* Navigation Arrows */
-
$('#canceltour').live('click',endTour);
+
div.anythingSlider-minimalist-round .arrow {
-
$('#endtour').live('click',endTour);
+
top: 50%;
-
$('#restarttour').live('click',restartTour);
+
position: absolute;
-
$('#nextstep').live('click',nextStep);
+
display: block;
-
$('#prevstep').live('click',prevStep);
+
}
-
+
div.anythingSlider-minimalist-round .arrow a {
-
function startTour(){
+
display: block;
-
$('#activatetour').remove();
+
height: 40px;
-
$('#endtour,#restarttour').show();
+
margin-top: -20px; /* half height of image */
-
if(!autoplay)
+
width: 30px;
-
                                          if(total_steps > 1)
+
text-align: center;
-
$('#nextstep').show();
+
outline: 0;
-
showOverlay();
+
background: url(https://static.igem.org/mediawiki/2011/a/a9/UPOSevillaArrows-minimalist.png) no-repeat;
-
nextStep();
+
}
-
}
+
div.anythingSlider-minimalist-round .forward { right: 0; }
-
+
div.anythingSlider-minimalist-round .back { left: 0; }
-
function nextStep(){
+
div.anythingSlider-minimalist-round .forward a { background-position: right bottom; }
-
if(!autoplay){
+
div.anythingSlider-minimalist-round .back a { background-position: left bottom; }
-
if(step > 0)
+
div.anythingSlider-minimalist-round .forward a:hover, div.anythingSlider-minimalist-round .forward a.hover { background-position: right top; }
-
$('#prevstep').show();
+
div.anythingSlider-minimalist-round .back a:hover, div.anythingSlider-minimalist-round .back a.hover { background-position: left top; }
-
else
+
 
-
$('#prevstep').hide();
+
/* Navigation Links */
-
if(step == total_steps-1)
+
div.anythingSlider-minimalist-round .anythingControls {
-
$('#nextstep').hide();
+
float: right;
-
else
+
position: absolute;
-
$('#nextstep').show();
+
bottom: 0;
-
}
+
right: 15%;
-
if(step >= total_steps){
+
z-index: 100;
-
//if last step then end tour
+
opacity: 0.90;
-
endTour();
+
filter: alpha(opacity=90);
-
return false;
+
}
-
}
+
div.anythingSlider-minimalist-round .anythingControls ul {
-
++step;
+
margin: 0;
-
showTooltip();
+
z-index: 100;
-
}
+
}
-
+
div.anythingSlider-minimalist-round .anythingControls ul li {
-
function prevStep(){
+
display: block;
-
if(!autoplay){
+
float: left;
-
if(step > 2)
+
}
-
$('#prevstep').show();
+
div.anythingSlider-minimalist-round .anythingControls ul a {
-
else
+
display: block;
-
$('#prevstep').hide();
+
height: 10px;
-
if(step == total_steps)
+
width: 10px;
-
$('#nextstep').show();
+
margin: 3px;
-
}
+
padding: 0;
-
if(step <= 1)
+
outline: 0;
-
return false;
+
border-radius: 5px;
-
--step;
+
-moz-border-radius: 5px;
-
showTooltip();
+
-webkit-border-radius: 5px;
 +
}
 +
 
 +
/* Navigation size window arrows */
 +
div.anythingSlider-minimalist-round .anythingControls li.next a span, div.anythingSlider-minimalist-round .anythingControls li.prev a span {
 +
text-indent: 1px;
 +
margin-top: 3px;
 +
}
 +
div.anythingSlider-minimalist-round .anythingControls li.prev a, div.anythingSlider-minimalist-round .anythingControls li.next a {
 +
color: #ddd;
 +
}
 +
div.anythingSlider-minimalist-round .anythingControls li.next a:hover, div.anythingSlider-minimalist-round .anythingControls li.prev a:hover {
 +
color: #000;
 +
}
 +
 
 +
/* slider autoplay right-to-left, reverse order of nav links to look better */
 +
div.anythingSlider-minimalist-round.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
 +
div.anythingSlider-minimalist-round.rtl .anythingControls ul { float: left; }   /* move nav link group to left */
 +
/* div.anythingSlider-minimalist-round.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
 +
 
 +
/* Autoplay Start/Stop button */
 +
div.anythingSlider-minimalist-round .start-stop {
 +
margin: 3px;
 +
padding: 0;
 +
display: inline-block;
 +
width: 14px;
 +
height: 14px;
 +
position: relative;
 +
bottom: 2px;
 +
left: 0;
 +
z-index: 100;
 +
text-align: center;
 +
text-decoration: none;
 +
float: right;
 +
border-radius: 7px;
 +
-moz-border-radius: 7px;
 +
-webkit-border-radius: 7px;
 +
}
 +
 
 +
/* Extra - replace defaults */
 +
div.anythingSlider-minimalist-round {
 +
padding: 6px 30px;
 +
}
 +
 
 +
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
 +
div.anythingSlider-minimalist-round .arrow a span, div.anythingSlider-minimalist-round .anythingControls ul a span, div.anythingSlider-minimalist-round .start-stop span {
 +
display: block;
 +
line-height: 1px; /* needed for IE7 */
 +
text-indent: -9999px;
 +
}
 +
 
 +
 
 +
#slider { width: 1000px; height: 500px; }
 +
 
 +
      </style>
 +
 
 +
      <script src="https://2011.igem.org/Team:UPO-Sevilla/js/anythingSlider.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
 
 +
<script>
 +
// DOM Ready
 +
$(function(){
 +
$('#slider').anythingSlider({
 +
theme          : 'minimalist-round',
 +
easing          : 'easeInOutBack',
 +
                                autoPlay        : true,
 +
// resumeDelay    : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
 +
onSlideComplete : function(slider){
 +
// alert('Welcome to Slide #' + slider.currentPage);
}
}
-
 
-
function endTour(){
 
-
step = 0;
 
-
if(autoplay) clearTimeout(showtime);
 
-
removeTooltip();
 
-
hideControls();
 
-
hideOverlay();
 
-
}
 
-
 
-
function restartTour(){
 
-
step = 0;
 
-
if(autoplay) clearTimeout(showtime);
 
-
nextStep();
 
-
}
 
-
 
-
function showTooltip(){
 
-
//remove current tooltip
 
-
removeTooltip();
 
-
 
-
var step_config = config[step-1];
 
-
var $elem = $('.' + step_config.name);
 
-
 
-
if(autoplay)
 
-
showtime = setTimeout(nextStep,step_config.time);
 
-
 
-
var bgcolor = step_config.bgcolor;
 
-
var color = step_config.color;
 
-
 
-
var $tooltip = $('<div>',{
 
-
id : 'tour_tooltip',
 
-
className : 'tooltip',
 
-
html : '<p>'+step_config.text+'</p><span class="tooltip_arrow"></span>'
 
-
}).css({
 
-
'display' : 'none',
 
-
'background-color' : bgcolor,
 
-
'color' : color
 
-
});
 
-
 
-
//position the tooltip correctly:
 
-
 
-
//the css properties the tooltip should have
 
-
var properties = {};
 
-
 
-
var tip_position = step_config.position;
 
-
 
-
//append the tooltip but hide it
 
-
$('BODY').prepend($tooltip);
 
-
 
-
//get some info of the element
 
-
var e_w = $elem.outerWidth();
 
-
var e_h = $elem.outerHeight();
 
-
var e_l = $elem.offset().left;
 
-
var e_t = $elem.offset().top;
 
-
 
-
 
-
switch(tip_position){
 
-
case 'TL' :
 
-
properties = {
 
-
'left' : e_l,
 
-
'top' : e_t + e_h + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TL');
 
-
break;
 
-
case 'TR' :
 
-
properties = {
 
-
'left' : e_l + e_w - $tooltip.width() + 'px',
 
-
'top' : e_t + e_h + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TR');
 
-
break;
 
-
case 'BL' :
 
-
properties = {
 
-
'left' : e_l + 'px',
 
-
'top' : e_t - $tooltip.height() + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BL');
 
-
break;
 
-
case 'BR' :
 
-
properties = {
 
-
'left' : e_l + e_w - $tooltip.width() + 'px',
 
-
'top' : e_t - $tooltip.height() + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BR');
 
-
break;
 
-
case 'LT' :
 
-
properties = {
 
-
'left' : e_l + e_w + 'px',
 
-
'top' : e_t + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LT');
 
-
break;
 
-
case 'LB' :
 
-
properties = {
 
-
'left' : e_l + e_w + 'px',
 
-
'top' : e_t + e_h - $tooltip.height() + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LB');
 
-
break;
 
-
case 'RT' :
 
-
properties = {
 
-
'left' : e_l - $tooltip.width() + 'px',
 
-
'top' : e_t + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RT');
 
-
break;
 
-
case 'RB' :
 
-
properties = {
 
-
'left' : e_l - $tooltip.width() + 'px',
 
-
'top' : e_t + e_h - $tooltip.height() + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RB');
 
-
break;
 
-
case 'T' :
 
-
properties = {
 
-
'left' : e_l + e_w/2 - $tooltip.width()/2 + 'px',
 
-
'top' : e_t + e_h + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_T');
 
-
break;
 
-
case 'R' :
 
-
properties = {
 
-
'left' : e_l - $tooltip.width() + 'px',
 
-
'top' : e_t + e_h/2 - $tooltip.height()/2 + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_R');
 
-
break;
 
-
case 'B' :
 
-
properties = {
 
-
'left' : e_l + e_w/2 - $tooltip.width()/2 + 'px',
 
-
'top' : e_t - $tooltip.height() + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_B');
 
-
break;
 
-
case 'L' :
 
-
properties = {
 
-
'left' : e_l + e_w  + 'px',
 
-
'top' : e_t + e_h/2 - $tooltip.height()/2 + 'px'
 
-
};
 
-
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_L');
 
-
break;
 
-
}
 
-
 
-
 
-
/*
 
-
if the element is not in the viewport
 
-
we scroll to it before displaying the tooltip
 
-
*/
 
-
var w_t = $(window).scrollTop();
 
-
var w_b = $(window).scrollTop() + $(window).height();
 
-
//get the boundaries of the element + tooltip
 
-
var b_t = parseFloat(properties.top,10);
 
-
 
-
if(e_t < b_t)
 
-
b_t = e_t;
 
-
 
-
var b_b = parseFloat(properties.top,10) + $tooltip.height();
 
-
if((e_t + e_h) > b_b)
 
-
b_b = e_t + e_h;
 
-
 
-
 
-
if((b_t < w_t || b_t > w_b) || (b_b < w_t || b_b > w_b)){
 
-
$('html, body').stop()
 
-
.animate({scrollTop: b_t}, 500, 'easeInOutExpo', function(){
 
-
//need to reset the timeout because of the animation delay
 
-
if(autoplay){
 
-
clearTimeout(showtime);
 
-
showtime = setTimeout(nextStep,step_config.time);
 
-
}
 
-
//show the new tooltip
 
-
$tooltip.css(properties).show();
 
-
});
 
-
}
 
-
else
 
-
//show the new tooltip
 
-
$tooltip.css(properties).show();
 
-
}
 
-
 
-
function removeTooltip(){
 
-
$('#tour_tooltip').remove();
 
-
}
 
-
 
-
function showControls(){
 
-
/*
 
-
we can restart or stop the tour,
 
-
and also navigate through the steps
 
-
*/
 
-
var $tourcontrols  = '<div id="tourcontrols" class="tourcontrols">';
 
-
$tourcontrols += '<p>Data Page. Step by Step</p>';
 
-
$tourcontrols += '<span class="button" id="activatetour">Start the tour</span>';
 
-
if(!autoplay){
 
-
$tourcontrols += '<div class="nav"><span class="button" id="prevstep" style="display:none;">< Previous</span>';
 
-
$tourcontrols += '<span class="button" id="nextstep" style="display:none;">Next ></span></div>';
 
-
}
 
-
$tourcontrols += '<a id="restarttour" style="display:none;">Restart the tour</span>';
 
-
$tourcontrols += '<a id="endtour" style="display:none;">End the tour</a>';
 
-
$tourcontrols += '<span class="close" id="canceltour"></span>';
 
-
$tourcontrols += '</div>';
 
-
 
-
$('BODY').prepend($tourcontrols);
 
-
$('#tourcontrols').animate({'right':'30px'},500);
 
-
}
 
-
 
-
function hideControls(){
 
-
$('#tourcontrols').remove();
 
-
}
 
-
 
-
function showOverlay(){
 
-
var $overlay = '<div id="tour_overlay" class="overlay"></div>';
 
-
$('BODY').prepend($overlay);
 
-
}
 
-
 
-
function hideOverlay(){
 
-
$('#tour_overlay').remove();
 
-
}
 
-
 
});
});
-
        </script>
+
});
-
                        </div>
+
</script>
 +
 
 +
                    <div id="principal">
 +
                         
 +
<div class="center">
 +
<ul id="slider">
 +
<li><a href="/Team:UPO-Sevilla/Project/Basic_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/5/51/UPOSevillaBasicFlipFlopPrincipal.png" alt=""></a></li>
 +
 
 +
<li><a href="/Team:UPO-Sevilla/Project/Improving_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/0/0f/UPOSevillaImprovingFlipFlopPrincipal.png" alt=""></a></li>
 +
 
 +
<li><a href="/Team:UPO-Sevilla/Project/Epigenetic_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/0/00/UPOSevillaEpigeneticFlipFlopPrincipal.png" alt=""></a></li>
 +
 
 +
<li><a href="/Team:UPO-Sevilla/Foundational_Advances/MiniTn7/Overview"><img src="https://static.igem.org/mediawiki/2011/1/1f/UPOSevillaMiniTn7Principal.png" alt=""></a></li>
 +
 +
          <li><a href="/Team:UPO-Sevilla/Foundational_Advances/BioBrick_Creator"><img src="https://static.igem.org/mediawiki/2011/2/27/UPOSevillaBiobrickPrincipal.png" alt=""></a></li>
 +
 
 +
<li><a href="/Team:UPO-Sevilla/Human_Practice"><img src="https://static.igem.org/mediawiki/2011/c/c5/UPOSevillaHumanPracticePrincipal.png" alt=""></a></li>
 +
</ul>
 +
 
 +
</div>
 +
 
 +
<p>
 +
                                For its second year, <strong>the UPO-Sevilla team</strong> participates on the international Synthetic Biology competition iGEM. <strong>Synthetic biology</strong> is a new and exciting discipline of science that puts together computing, engineering and molecular biology with the goal of designing and constructing biological machines: living organisms with the ability to perform new and useful tasks. The iGEM contest is an initiative that hosts undergraduate student teams from all over the world to develop new biological designs, work on them over the summer and present them in the <strong>iGEM Jamborees</strong>.
 +
                            </p>
 +
                            <p>
 +
                                UPO-Sevilla was <strong>the pioneer Andalusian team</strong> to participate in the iGEM competition last year. The UPO-Sevilla team has grown from six students and two supervisors in 2010 to ten students and seven supervisors in 2011. This year's team hosts a mixture of computer science, engineering, biotechnology, genetics, physiology and microbiology students and professors. This multidisciplinary team is working hard on the <strong>Flashbacter</strong> project, aimed to develop biological machines able to store information, much like a computer's memory does. Find more details on this in <a href="/Team:UPO-Sevilla/Project" title="Project">the Project section</a>.
 +
                            </p>
 +
                            <p>
 +
                                In addition to research, the UPO-Sevilla team has undertaken during this year an active <strong>diffusion program</strong> to promote awareness of Synthetic biology, especially among younger students in Andalucía including seminars, workshops, and the first blog in spanish devoted to Synthetic biology, <a href="http://tornillosygenes.com" target="_blank" title="Tornillos y Genes">Tornillos y genes.</a><!-- Learn more about this in the Human practices/diffusion section.-->
 +
                            </p>
 +
 
-
                        <div class="left">
+
                    </div>
-
                              </html>{{:Team:UPO-Sevilla/leftTemplateFoundational_Advances}}<html>
+
-
                        </div>
+
</html>
</html>
-
{{:Team:UPO-Sevilla/footTemplate}}
+
{{:Team:UPO-Sevilla/footTemplate2}}

Latest revision as of 23:13, 20 September 2011

Grey iGEM Logo UPO icon

For its second year, the UPO-Sevilla team participates on the international Synthetic Biology competition iGEM. Synthetic biology is a new and exciting discipline of science that puts together computing, engineering and molecular biology with the goal of designing and constructing biological machines: living organisms with the ability to perform new and useful tasks. The iGEM contest is an initiative that hosts undergraduate student teams from all over the world to develop new biological designs, work on them over the summer and present them in the iGEM Jamborees.

UPO-Sevilla was the pioneer Andalusian team to participate in the iGEM competition last year. The UPO-Sevilla team has grown from six students and two supervisors in 2010 to ten students and seven supervisors in 2011. This year's team hosts a mixture of computer science, engineering, biotechnology, genetics, physiology and microbiology students and professors. This multidisciplinary team is working hard on the Flashbacter project, aimed to develop biological machines able to store information, much like a computer's memory does. Find more details on this in the Project section.

In addition to research, the UPO-Sevilla team has undertaken during this year an active diffusion program to promote awareness of Synthetic biology, especially among younger students in Andalucía including seminars, workshops, and the first blog in spanish devoted to Synthetic biology, Tornillos y genes.

Retrieved from "http://2011.igem.org/Team:UPO-Sevilla/test"