Team:UPO-Sevilla/Project/Epigenetic Flip Flop/Data Page

From 2011.igem.org

(Difference between revisions)
Line 17: Line 17:
                             <h1>Data Page</h1>
                             <h1>Data Page</h1>
 +
                           
 +
<style type="text/css">
 +
        .dataPage{width:700px; height:475px; background: url(https://static.igem.org/mediawiki/2011/d/d8/UPOSevillaEpigeneticFlipFlop.png);}
 +
              .tour_Tn7R{
 +
  border: 3px solid transparent;
 +
    bottom: 0;
 +
    display: inline-block;
 +
    height: 2em;
 +
    left: 5.5em;
 +
    position: relative;
 +
    width: 4.7em;}
 +
.tour_FRT{    border: 3px solid transparent;
 +
    bottom: 0;
 +
    display: inline-block;
 +
    height: 2em;
 +
    left: 5.5em;
 +
    position: relative;
 +
    width: 2em}
 +
.tour_antib{    border: 3px solid transparent;
 +
    bottom: 0;
 +
    display: inline-block;
 +
    height: 2em;
 +
    left: 3.5em;
 +
    position: relative;
 +
    width: 4em}
 +
        .tour_your_bioBrick{
 +
    border: 3px solid transparent;
 +
    bottom: 0;
 +
    display: inline-block;
 +
    height: 2em;
 +
    left: 5em;
 +
    position: relative;
 +
    width: 6.5em;}
 +
  .tour_R6K_origin{
 +
    border: 3px solid transparent;
 +
    bottom: 2em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    position: relative;
 +
    right: 14.5em;
 +
    top: 3em;
 +
    width: 6.7em;}
 +
        .tour_oriT{    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -8.5em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4em;}
 +
.tour_Transposase_action{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 2em;
 +
    left: -0.5em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4.7em;}
 +
.tour_Flp_recombinase_action{
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: 17.5em;
 +
    position: relative;
 +
    top: 11em;
 +
    width: 6.7em;}
 +
.tour_final_cartoon{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: -1.5em;
 +
    position: relative;
 +
    top: 12em;
 +
    width: 4.7em;}
 +
</style>
 +
<div class="wrapper">
 +
<div class="content">
 +
 +
                            <div class="dataPage">
 +
                              <div class="tour_Tn7R"></div>
-
                            <div class="center">
+
                              <div class="tour_FRT"></div>
-
                                <img width="700px" src="https://static.igem.org/mediawiki/2011/d/d8/UPOSevillaEpigeneticFlipFlop.png" alt="Data Page Epigenetic Flip Flop"/>
+
 
-
                            </div>      
+
                              <div class="tour_antib"></div>
 +
 
 +
                              <div class="tour_your_bioBrick"></div>
 +
 
 +
                              <div class="tour_R6K_origin"></div>
 +
 
 +
                              <div class="tour_oriT"></div>
 +
 
 +
                              <div class="tour_Transposase_action"></div>
 +
 
 +
      <div class="tour_Flp_recombinase_action"></div>
 +
 
 +
      <div class="tour_final_cartoon"></div>
 +
                </div>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</div>
 +
 
 +
<!-- The JavaScript -->
 +
      <script src="https://2011.igem.org/Team:UPO-Sevilla/js/jqueryeasing.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
        <script type="text/javascript">
 +
$(function() {
 +
/*
 +
the json config obj.
 +
name: the class given to the element where you want the tooltip to appear
 +
bgcolor: the background color of the tooltip
 +
color: the color of the tooltip text
 +
text: the text inside the tooltip
 +
time: if automatic tour, then this is the time in ms for this step
 +
position: the position of the tip. Possible values are
 +
TL top left
 +
TR  top right
 +
BL  bottom left
 +
BR  bottom right
 +
LT  left top
 +
LB  left bottom
 +
RT  right top
 +
RB  right bottom
 +
T  top
 +
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" : "Your BioBrick: 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" : "Transposase action: The transient expression of the transposase complex causes single site-specific genome integration at the attTn7 site.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Flp_recombinase_action",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Flp recombinase action: The transient expression of Flp recombinase or Flipase induces recombination between FRT sites, removing the resistance cassette between them.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
                    {
 +
"name" : "tour_final_cartoon",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Finally you get your BioBrick into of a new strain of bacterium without plasmid limitations or antibiotic resistance disadvantages.",
 +
"position" : "B",
 +
"time" : 5000
 +
}
 +
 
 +
],
 +
//define if steps should change automatically
 +
autoplay = false,
 +
//timeout for the step
 +
showtime,
 +
//current step of the tour
 +
step = 0,
 +
//total number of steps
 +
total_steps = config.length;
 +
 +
//show the tour controls
 +
showControls();
 +
 +
/*
 +
we can restart or stop the tour,
 +
and also navigate through the steps
 +
*/
 +
$('#activatetour').live('click',startTour);
 +
$('#canceltour').live('click',endTour);
 +
$('#endtour').live('click',endTour);
 +
$('#restarttour').live('click',restartTour);
 +
$('#nextstep').live('click',nextStep);
 +
$('#prevstep').live('click',prevStep);
 +
 +
function startTour(){
 +
$('#activatetour').remove();
 +
$('#endtour,#restarttour').show();
 +
if(!autoplay)
 +
                                          if(total_steps > 1)
 +
$('#nextstep').show();
 +
showOverlay();
 +
nextStep();
 +
}
 +
 +
function nextStep(){
 +
if(!autoplay){
 +
if(step > 0)
 +
$('#prevstep').show();
 +
else
 +
$('#prevstep').hide();
 +
if(step == total_steps-1)
 +
$('#nextstep').hide();
 +
else
 +
$('#nextstep').show();
 +
}
 +
if(step >= total_steps){
 +
//if last step then end tour
 +
endTour();
 +
return false;
 +
}
 +
++step;
 +
showTooltip();
 +
}
 +
 +
function prevStep(){
 +
if(!autoplay){
 +
if(step > 2)
 +
$('#prevstep').show();
 +
else
 +
$('#prevstep').hide();
 +
if(step == total_steps)
 +
$('#nextstep').show();
 +
}
 +
if(step <= 1)
 +
return false;
 +
--step;
 +
showTooltip();
 +
}
 +
 +
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> 

Revision as of 10:46, 21 September 2011

Grey iGEM Logo UPO icon

Data Page

Retrieved from "http://2011.igem.org/Team:UPO-Sevilla/Project/Epigenetic_Flip_Flop/Data_Page"