Team:UPO-Sevilla/test

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:57em; height:38.7em; background: url(a.png);}
 +
        .tour_Tn7R{       
 +
display: inline-block;
 +
height: 2em;
 +
left: 7.5em;
 +
position: relative;
 +
width: 4.7em;
 +
    bottom: 2em;}
 +
.tour_FRT{       
 +
display: inline-block;
 +
height: 2em;
 +
left: 10.5em;
 +
position: relative;
 +
width: 2em;
 +
bottom: 2em;}
 +
.tour_antib{     
 +
display: inline-block;
 +
height: 2em;
 +
left: 10.5em;
 +
position: relative;
 +
width: 4em;
 +
bottom: 2em;}
 +
        .tour_your_bioBrick{
 +
display: inline-block;
 +
height: 2em;
 +
left: 16em;
 +
position: relative;
 +
width: 6.5em;
 +
bottom: 2em;}
 +
  .tour_R6K_origin{  
 +
display: inline-block;
 +
height: 1em;
 +
position: relative;
 +
right: 4.5em;
 +
top: 3em;
 +
width: 6.7em;
 +
bottom: 2em;}
 +
        .tour_oriT{     
 +
display: inline-block;
 +
height: 1em;
 +
left: 6.5em;
 +
position: relative;
 +
top: 2.5em;
 +
width: 4em;}
 +
.tour_Transposase_action{   
 +
display: inline-block;
 +
height: 2em;
 +
left: 18.5em;
 +
position: relative;
 +
top: 3em;
 +
width: 4.7em;}
 +
.tour_Flp_recombinase_action{
 +
display: inline-block;
 +
height: 4em;
 +
left: -13.5em;
 +
position: relative;
 +
top: 19em;
 +
width: 6.7em;}
 +
.tour_final_cartoon{         
 +
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>
 +
 +
                              <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 type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></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" : "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
 +
},
 +
 +
],
 +
//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 && 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>
                         </div>

Revision as of 17:56, 19 September 2011

Grey iGEM Logo UPO icon

Data Page

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