|
|
| Line 3: |
Line 3: |
| | <html> | | <html> |
| | <div id="principal"> | | <div id="principal"> |
| - | <div class="main">
| |
| - |
| |
| | | | |
| | <ul id="breadcrumbs" class="xbreadcrumbs"> | | <ul id="breadcrumbs" class="xbreadcrumbs"> |
| Line 17: |
Line 15: |
| | <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/f/f0/UPOSevillaTn7DataPage.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="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 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 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)
| |
| - | 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>
| |
| | | | |
| - | <div class="left">
| |
| - | </html>{{:Team:UPO-Sevilla/leftTemplateFoundational_Advances}}<html>
| |
| | </div> | | </div> |
| | </html> | | </html> |
| | | | |
| - | {{:Team:UPO-Sevilla/footTemplate}} | + | {{:Team:UPO-Sevilla/footTemplateHome}} |
"
