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

From 2011.igem.org

(Difference between revisions)
Line 16: Line 16:
                         </ul>
                         </ul>
-
                             <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/df/UPOSevillaImprovingFlipFlop.png);}
 +
              .tour_PcI{
 +
    border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 31.5em;
 +
    position: relative;
 +
    width: 3.7em;}
 +
.tour_LacI_Das{     
 +
    border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 31.5em;
 +
    position: relative;
 +
    width: 2em;}
 +
.tour_GFP_DAS{
 +
  border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 30.5em;
 +
    position: relative;
 +
    width: 4em;}
 +
        .tour_asRNA{
 +
    border: 3px solid transparent;
 +
    bottom: -3em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -6em;
 +
    position: relative;
 +
    width: 6.5em;}
 +
  .tour_PLac{
 +
    border: 3px solid transparent;
 +
    bottom: 2em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    position: relative;
 +
    right: 2.5em;
 +
    top: 3em;
 +
    width: 6.7em;}
 +
        .tour_cI{        border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -15em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4em;}
 +
.tour_OmpN_RFP{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -17.3em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4.7em;}
 +
.tour_OmpN_SspB{
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: -17.5em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 6.7em;}
 +
.tour_IPTG{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: 5.5em;
 +
    position: relative;
 +
    top: -2em;
 +
    width: 4.7em;}
 +
</style>
 +
<div class="wrapper">
 +
<div class="content">
 +
 +
                            <div class="dataPage">
 +
                              <div class="tour_PcI"></div>
-
                            <div class="center">
+
                              <div class="tour_LacI_Das"></div>
-
                                <img width="700px" src="https://static.igem.org/mediawiki/2011/d/df/UPOSevillaImprovingFlipFlop.png" alt="Data Page Improving Flip Flop"/>
+
 
-
                            </div>                              
+
                              <div class="tour_GFP_DAS"></div>
 +
 
 +
                              <div class="tour_asRNA"></div>
 +
 
 +
                              <div class="tour_PLac"></div>
 +
 
 +
                              <div class="tour_cI"></div>
 +
 
 +
                              <div class="tour_OmpN_RFP"></div>
 +
 
 +
                              <div class="tour_OmpN_SspB"></div>
 +
 
 +
                              <div class="tour_IPTG"></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_PcI",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"position" : "T",
 +
"text" : "When we give a heat shock to our bacteria (42 ºC) cI promoter (PcI) is activated, expressing LacI::Das+4 and GFP::Das+4 proteins. Now we are in State 1. ",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_LacI_Das",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "LacI::Das+4 is Lac promoter repressor. This protein represses PLac and, therefore, State 2. This will assure de maintenance of State 1 over State 2 in absence of State 2 stimulus.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_GFP_DAS",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "GFP::Das+4 is State 1 reporter, which makes our bacteria glow in green when exposed to UV.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_asRNA",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Additionally, RybB asRNA is also regulated by PcI promoter so that it is also expressed when we give the heat shock. RybB bind State 2 OmpN::SspB’s and OmpN::RFP’s mRNA as they have its binding sequence fused (OmpN protein start sequence). This union prevents these mRNA’s translation, so that we are also eliminating State 2 reporter and SspB adaptor when expressing State 1.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_PLac",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "When we give an IPTG pulse to our bacteria Lac promoter (PLac) is activated, expressing cI (temperature-sensitive), OmpN::SspB and OmpN::RFP proteins. Now we are in State 2. ",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_cI",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "cI is cI promoter repressor. This protein represses PcI and, therefore, State 1. This will assure de maintenance of State 2 over State 1 in absence of State 1 stimulus. As this cI is temperature sensitive it is degraded when we give our bacteria the heat shock necessary for State 1 activation.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_OmpN_RFP",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "OmpN::RFP is State 2 reporter, which makes our bacteria glow in red when exposed to UV.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_OmpN_SspB",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "SspB is the adaptor protein that allows the ClpXP protease to degrade DAS+4 tagged proteins, in this case LacI::DAS+4  and GFP::DAS+4. Therefore, State 2 expression also eliminates State 1 reporter and State 2 repressor. ",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_IPTG",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "This State won’t change again until we give our bacterias the heat shock.",
 +
"position" : "T",
 +
"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 16:35, 21 September 2011

Grey iGEM Logo UPO icon

Data Page

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