Team:UPO-Sevilla/Project/Basic 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/a/a8/UPOSevillaBasicFlipFlopDataPage.png);}
 +
              .tour_Green{
 +
        border: 3px solid transparent;
 +
    bottom: -2.5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 15.5em;
 +
    position: relative;
 +
    width: 3.7em;}
 +
.tour_LacI{     
 +
      border: 3px solid transparent;
 +
    bottom: -2.5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 9em;
 +
    position: relative;
 +
    width: 2em;}
 +
.tour_Plac{
 +
    border: 3px solid transparent;
 +
    bottom: -2.5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 1.5em;
 +
    position: relative;
 +
    width: 4em;}
 +
        .tour_cI{    border: 3px solid transparent;
 +
    bottom: -6em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 22em;
 +
    position: relative;
 +
    width: 6.5em;}
 +
  .tour_GFP{
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    position: relative;
 +
    right: 2.8em;
 +
    top: 21.5em;
 +
    width: 6.7em;}
 +
        .tour_Red{      border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -6em;
 +
    position: relative;
 +
    top: 21.5em;
 +
    width: 4em;}
 +
.tour_cI_ts{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -4.5em;
 +
    position: relative;
 +
    top: 21.8em;
 +
    width: 4.7em;}
 +
.tour_LacI_2{
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: -14.5em;
 +
    position: relative;
 +
    top: 24.5em;
 +
    width: 6.7em;}
 +
.tour_RFP{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: 3.5em;
 +
    position: relative;
 +
    top: 7em;
 +
    width: 4.7em;}
 +
</style>
 +
<div class="wrapper">
 +
<div class="content">
 +
 +
                            <div class="dataPage">
 +
                              <div class="tour_Green"></div>
 +
 
 +
                              <div class="tour_LacI"></div>
 +
 
 +
                              <div class="tour_Plac"></div>
 +
 
 +
                              <div class="tour_cI"></div>
 +
 
 +
                              <div class="tour_GFP"></div>
 +
 
 +
                              <div class="tour_Red"></div>
 +
 
 +
                              <div class="tour_cI_ts"></div>
 +
 
 +
                              <div class="tour_LacI_2"></div>
 +
 
 +
                              <div class="tour_RFP"></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_Green",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"position" : "T",
 +
"text" : "Green State: The adition of IPTG estimulates the production of GFP. But how?",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_LacI",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "LacI: This proteins binds to the Plac sequence, repressing the downstream genes.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Plac",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Plac: The addition of IPTG separates LacI from the DNA, expressing the following genes:",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_cI",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "cI: represes LacI and RFP, because they are under control of promoter Prm",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_GFP",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "GFP: Our bacterium gets green!",
 +
"position" : "B",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Red",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Red state: The opposing state works the other way round.",
 +
"position" : "B",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_cI_ts",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "cI (ts): The heat shock stops this protein to work properly, allowing the pressence of:",
 +
"position" : "B",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_LacI_2",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "LacI: forbids the transcripction of the genes responsibles of the green state",
 +
"position" : "B",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_RFP",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "RFP: Switch to red achieved!",
 +
"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> 
 +
 
 +
 
 +
                         
                              
                              
-
                            <div class="center">
 
-
                                <img width="700px" src="https://static.igem.org/mediawiki/2011/a/a8/UPOSevillaBasicFlipFlopDataPage.png" alt="Data Page Basic Flip Flop"/>
 
-
                            </div>                           
 
                         </div>
                         </div>

Revision as of 17:34, 21 September 2011

Grey iGEM Logo UPO icon

Data Page

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