Team:Buenos Aires

From 2013.igem.org

(Difference between revisions)
(prueba)
 
(241 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
<html lang="en">
-
<html>
+
    <head>
-
<head>
+
        <title>iGem Buenos Aires</title>
-
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+
<meta charset=utf-8>
 +
        <meta name="description" content="iGem Buenos Aires" />
 +
        <meta name="keywords" content="biosensing, igem, buenos aires, UBA, arsenic"/>
 +
<link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style_color.css?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style_galery.css?action=raw&ctype=text/css" />
-
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/katamotzikasi" rel="stylesheet" type="text/css"/>
 
-
<style>
 
 +
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" /> <!-- Font -->
-
body{
+
<style type ='text/css'>
-
margin-left: auto;
+
/* Wiki Hacks - START */
-
margin-right:auto;
+
/* Author: Pieter van Boheemen */
 +
/* Team: TU Delft */
 +
#catlinks{display:none;}
 +
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
 +
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: auto; height:100%;}
 +
#bodyContent {background-color:transparent; border: none; padding:0; margin:0; width:100%; height:100%;}
 +
#top-section {display: block;position:fixed; height:3px; width:100%;z-index:999;}
 +
#p-logo {display: none;}
 +
#search-controls {display: none;}
 +
#footer-box {display: none;}
 +
.visualClear { display: none; }
 +
#footer { border: none; width: 100%; margin: 0 auto; padding: 0;}
 +
.firstHeading { display: none;}
 +
#f-list a { color: #333; font-size: 10px;}
 +
#f-list a:hover { color: #666;}
 +
.printfooter { display: none; }
 +
#search-controls { display:none; }
 +
h3#siteSub { display: none;}
 +
#contentSub {display: none;}
 +
p:first-child { display: none;}
 +
/* Wiki Hacks - END */
-
width:830px;
 
-
height: 1000px;
 
-
    color: #000000;
 
-
    font-size: 14px;
 
-
    letter-spacing: 1px;
 
-
    line-height: 30px;
 
-
    text-align: left;
+
li{
-
+
color:#FFF;
-
background:url("http://s3.postimg.org/ou7ozf5kz/background.png");
+
}
-
background-repeat:no-repeat;
+
-
background-position:50% 50%;
+
-
background-size: 100% 100%;
+
 +
h1{
 +
border:none;
}
}
 +
</style>
-
span{
 
-
width: 480px;
 
-
height: 350px;
 
-
margin-left: 10%;
 
-
margin-right:10%;
 
-
+
     </head>
-
    background:#F8F8F8;
+
     <body>
-
    border: 5px solid #DFDFDF;
+
-
    color: #000000;
+
-
    font-size: 13px;
+
-
     letter-spacing: 1px;
+
-
     line-height: 30px;
+
-
    text-align: left;
+
<div id="contenedor">
-
    position:absolute;
 
-
  opacity:0;
 
-
 
 
-
 
-
    display:block;
 
-
    padding:0 20px;
 
 +
<div id="ac_background" class="ac_background">
-
}
+
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/0/0f/Fondopepe.jpg" alt="Background"/>
 +
<div class="ac_loading"> Loading...</div>
 +
</div>
 +
 +
<div id="ac_content" class="ac_content">
-
ul {
 
-
width: 770px;
+
-
height: 100px;
+
<h1><a href="https://igem.org"><img src="https://static.igem.org/mediawiki/igem.org/f/f2/Igemfooterlogo.png"></a><span><b>Buenos Aires</b></span></h1>
 +
<div class="ac_menu">
 +
<ul>
 +
 +
<!-- Wiki Overview -->
 +
    <li>
 +
<a id="https://static.igem.org/mediawiki/2013/0/0f/Fondopepe.jpg" href="#Overview">Overview</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Overview</h2>
 +
<ul>
 +
<li>Here you can find a brief introduction to our project</li>
 +
                                                                <li><a class="sub_menu_link" id="Summary" href="/Team:Buenos_Aires/_summary">Overview</a></li>
-
margin-left: auto;
+
<li><a class="sub_menu_link" id="Abstract" href="/Team:Buenos_Aires/_abstract">Abstract</a></li>
-
margin-right: auto;
+
-
position:relative;
+
</ul>
 +
</div>
 +
</li>
 +
<!-- Team -->
 +
<li>
 +
<a id="https://static.igem.org/mediawiki/2013/b/ba/Pepe1.jpg" href="#Team">Team</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Team</h2>
 +
<ul>
 +
<li>The Team.</li>
-
display:block;
+
<li><a class="sub_menu_link" id="Students" href="/Team:Buenos_Aires/_students">Students</a></li>
-
overflow:hidden;
+
                                                                <li><a class="sub_menu_link" id="Advisors" href="/Team:Buenos_Aires/_advisors">Advisors</a></li>
-
}
+
                                                                <li><a class="sub_menu_link" id="Instructors" href="/Team:Buenos_Aires/_instructors">Instructors</a></li>
 +
 +
</ul>
 +
</div>
 +
</li>
 +
<!-- Project-->
 +
<li>
-
ul li{
+
<a id="https://static.igem.org/mediawiki/2013/b/ba/Pepe1.jpg" href="#Project">Project</a>
-
display:table;
+
<div class="ac_subitem">
-
width: 100px;
+
<span class="ac_close"></span>
-
height: 99px;
+
<h2>Project</h2>
-
float:left;
+
<ul>
 +
<li>  We aim to build a quantitative modular Biosensor for the detection of
 +
toxic pollutants in water</li>
 +
 +
<li><a class="sub_menu_link" id="Mot" href="/Team:Buenos_Aires/_motivation">Motivation</a></li>
 +
<li><a class="sub_menu_link" id="Biological" href="/Team:Buenos_Aires/_biological_design">Biological Design</a></li>
 +
<li><a class="sub_menu_link" id="Pysical" href="/Team:Buenos_Aires/_device">Physical Design</a></li>
 +
</ul>
 +
</div>
 +
</li>
-
padding: 0 120px;
+
<!-- Model-->
-
overflow:hidden;
+
<li>
 +
<a id="https://static.igem.org/mediawiki/2013/6/6d/Pepe3.jpg" href="#Model">Model</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Model</h2>
 +
<ul>
 +
<li>Mathematical model</li>
 +
<li><a class="sub_menu_link" id="model" href="/Team:Buenos_Aires/_model">Model</a></li>
 +
 +
</ul>
 +
</div>
 +
</li>
-
/*Rota el li, funciona para Moz y Chrome, NO TOCAR*/
+
<!-- Results-->
 +
<li>
 +
<a id="https://static.igem.org/mediawiki/2013/6/6d/Pepe3.jpg" href="#Results">Results</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Results</h2>
 +
<ul>
 +
<li>Results and parts characterization</li>
 +
<li><a class="sub_menu_link" id="resRFP" href="/Team:Buenos_Aires/_res_rfpdeg">GFP under Arsenite Inducible Promoter</a></li>
 +
<li><a class="sub_menu_link" id="resmRFP" href="/Team:Buenos_Aires/_resqrfp">mRFP under Arsenite Inducible Promoter</a></li>
 +
<li><a class="sub_menu_link" id="resGFPr" href="/Team:Buenos_Aires/_res_rgfp">LuxI under Arsenite Inducible Promoter</a></li>
 +
<li><a class="sub_menu_link" id="resdmRFP" href="/Team:Buenos_Aires/_hybrid">Hybrid promoter induction and repression</a></li>
 +
<li><a class="sub_menu_link" id="resBasu" href="/Team:Buenos_Aires/_res_basu">GFP under Hypoxia Inducible Promoter (Tech Monterrey's part)</a></li>
 +
</ul>
 +
</div>
 +
</li>
-
background:transparent url("http://s16.postimg.org/dt3lc44f5/plasmido.png") no-repeat center center;
 
-
    /* -webkit-mask-image: url("plasmido.png");*/
 
-
      -webkit-mask-size: 62px 62px;
 
-
      -webkit-animation-name: rotate;
 
-
    -webkit-animation-duration: 15s;
 
-
    -webkit-animation-iteration-count: infinite;
 
-
    -webkit-animation-timing-function: linear;
 
-
  -moz-animation-name: rotate;
 
-
  -moz-animation-duration:15s;
 
-
  -moz-animation-iteration-count:infinite;
 
-
  -moz-animation-timing-function:linear;
 
-
opacity:0.8;
 
-
 
-
}
 
 +
<!-- Lab-->
 +
<li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Lab">Lab</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Lab</h2>
 +
<ul>
 +
<li>Lab</li>
 +
 +
                                                                <li><a class="sub_menu_link" id="Obj" href="/Team:Buenos_Aires/_protocols">Protocols</a></li>
 +
<li><a class="sub_menu_link" id="bactstrains" href="/Team:Buenos_Aires/_bacteria">Bacteria strains used in characterization</a></li>
-
a{
+
<li><a class="sub_menu_link" id="Wetgallery" href="/Team:Buenos_Aires/_wetgallery">Gallery</a></li>
-
  display:table-cell;
 
-
  width:100px;
 
-
height: 35px;
 
-
    cursor:pointer;
 
-
text-align:center;
 
-
/*text-transform: uppercase;*/
 
-
font-size: 25px;
 
-
vertical-align:middle;
 
-
+
</ul>
-
overflow:hidden;
+
</div>
-
position:relative;
+
</li>
-
/*Rota la parte de adentro del boton para la izquierda, así
 
-
parece que está fijo (porque está rotando el li */
 
-
      -webkit-animation-name: invrotate;
 
-
    -webkit-animation-duration: 15s;
 
-
    -webkit-animation-iteration-count: infinite;
 
-
    -webkit-animation-timing-function: linear;
 
-
  -moz-animation-name: invrotate;
 
-
  -moz-animation-duration:15s;
 
-
  -moz-animation-iteration-count:infinite;
 
-
  -moz-animation-timing-function:linear;
 
-
opacity:1;
 
-
 
 
 +
<!-- Parts -->
 +
<li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Parts">Parts</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Parts</h2>
 +
<ul>
 +
<li>Our biobricks</li>
 +
 +
                                                                <li><a class="sub_menu_link" id="PSub" href="/Team:Buenos_Aires/_tabladepartes">Parts Submitted</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
<!-- Safety-->
 +
                    <li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="https://docs.google.com/file/d/0B6G1_zuAUVbabDk0dW1XRlNBbUU/edit?usp=sharing">Safety</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Safety</h2>
 +
<ul>
 +
<li>Safety practices</li>
 +
<li><a class="sub_menu_link" id="Obj" href="http:/Team:Buenos_Aires/_safety">Safety</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
<!-- Human Practices-->
 +
                    <li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Human Practice">Human Practice</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Human Practice</h2>
 +
<ul>
 +
<li>The social objetive behind the competition</li>
 +
<li><a class="sub_menu_link" id="Obj" href="http:/Team:Buenos_Aires/_mapaarsenico">Sampling water</a></li>
 +
<li><a class="sub_menu_link" id="Outreach" href="/Team:Buenos_Aires/_outreach">Community Outreach</a></li>
-
}
 
 +
</ul>
 +
</div>
 +
</li>
-
@-webkit-keyframes rotate {
+
<!-- References -->
-
      from {-webkit-transform:rotate(0deg);}
+
                    <li>
-
      to {-webkit-transform:rotate(360deg);}
+
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#References">References</a>
-
    }
+
<div class="ac_subitem">
-
   
+
<span class="ac_close"></span>
-
@-moz-keyframes rotate {
+
<h2>References</h2>
-
  from {-moz-transform:rotate(0deg);}
+
<ul>
-
  to {  -moz-transform:rotate(360deg);}
+
                                                                <li>Our inspiration</li>
-
}
+
                                                         
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_references">References</a></li>
 +
</ul>
 +
</div>
 +
</li>
-
@-webkit-keyframes invrotate {
+
<!-- Attribution -->
-
      from {-webkit-transform:rotate(0deg);}
+
                    <li>
-
      to {-webkit-transform:rotate(-360deg);}
+
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Attribution">Attributions</a>
-
    }
+
<div class="ac_subitem">
-
   
+
<span class="ac_close"></span>
-
@-moz-keyframes invrotate {
+
<h2>Attribution</h2>
-
  from {-moz-transform:rotate(0deg);}
+
<ul>
-
  to {  -moz-transform:rotate(-360deg);}
+
                                                                <li>Attributions, acknowledgments and sponsors</li>
-
}
+
                                                         
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_attribution">Attributions</a></li>
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_acknowledgment">Acknowledgments</a></li>
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_sponsors">Sponsors</a></li>
-
a:link, a:visited
+
</ul>
-
/*Editar acá si quiero cambiar el formato de los botones*/
+
</div>
-
{
+
</li>
 +
<!-- Contact us -->
 +
                    <li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Contact">Contact</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Contact us</h2>
 +
<ul>
 +
                                                                <li>Our facebook, website and email</li>
 +
                                                         
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_contact">Contact</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
<!-- Media -->
 +
                    <li>
 +
<a id="https://static.igem.org/mediawiki/2013/4/4b/Pepe4.jpg" href="#Media">Media</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Press</h2>
 +
<ul>
 +
                                                                <li>Our team in local media</li>
 +
                                                         
 +
<li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_media">Media</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
 +
</ul>
 +
</div>
 +
</div>
-
display:table-cell;
 
-
color:#000000;
 
-
text-decoration:none;
 
-
opacity:1;
 
-
font-family:'KatamotzIkasi';
 
-
  font-weight: bold;
+
<!--Here i put all the text that will open with links:-->
-
  font-style: normal;
+
 +
<!--PROJECT-->
 +
<!--Objetive-->
 +
<!-- <iframe class="restricted" id="textObj" scrolling="no"-->
 +
<div class="text_loading"> Loading... </div>
 +
<div class="texto" id="textExt"> Hola
-
}
+
</div>
-
a:hover,a:active
 
-
{
 
-
opacity:0.3;
 
-
}
 
 +
</div>
 +
 +
<!-- The JavaScript -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>
-
#projPrev{
+
   
-
opacity:0;
+
-
filter:alpha(opacity=0);
+
-
}
+
-
</style>
 
 +
<!--Hace girar las bacterias cuando se pone el mouse arriba-->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
  $(".swing").hover(function(){
 +
    $(".swing").css('-moz-transform', 'rotate(360deg)');
 +
    $(".swing").css('-webkit-transform', 'rotate(360deg)');
 +
    $(".swing").css('-o-transform', 'rotate(360deg)');
 +
    $(".swing").css('-ms-transform', 'rotate(360deg)');
 +
    },function(){
 +
    $(".swing").css('-moz-transform', 'rotate(-360deg)');
 +
    $(".swing").css('-webkit-transform', 'rotate(-360deg)');
 +
    $(".swing").css('-o-transform', 'rotate(-360deg)');
 +
    $(".swing").css('-ms-transform', 'rotate(-360deg)');
 +
  });
 +
});
 +
</script>
-
 
 
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 
-
<script>
 
-
$(document).ready(function(){
 
-
  $("li").hover(function(){
 
-
var liId = $(this).attr('id');
 
-
var namePrev = liId + "Prev";
 
-
var element = document.getElementById(namePrev);
 
-
element.style.opacity="0.9"
 
-
 
+
-
  }, function(){
+
<script type="text/javascript">
-
var liId = $(this).attr('id');
+
$(function() {
-
var namePrev = liId + "Prev";
+
var $ac_background = $('#ac_background'),
-
var element = document.getElementById(namePrev);
+
$ac_bgimage = $ac_background.find('.ac_bgimage'),
-
element.style.opacity="0.0"
+
$ac_loading = $ac_background.find('.ac_loading'),
-
});
+
-
});
+
-
</script>   
+
$ac_content = $('#ac_content'),
 +
$title = $ac_content.find('h1'),
 +
$menu = $ac_content.find('.ac_menu'),
 +
$mainNav = $menu.find('ul:first'),
 +
$menuItems = $mainNav.children('li'),
 +
totalItems = $menuItems.length,
 +
$ItemImages = new Array();
 +
 +
/*
 +
for this menu, we will preload all the images.
 +
let's add all the image sources to an array,
 +
including the bg image
 +
*/
 +
$menuItems.each(function(i) {
 +
$ItemImages.push($(this).children('a:first').attr('id'));
 +
});
 +
$ItemImages.push($ac_bgimage.attr('src'));
 +
 
 +
 +
var Menu = (function(){
 +
var init = function() {
 +
loadPage();
 +
initWindowEvent();
 +
},
 +
loadPage = function() {
 +
/*
 +
1- loads the bg image and all the item images;
 +
2- shows the bg image;
 +
3- shows / slides out the menu;
 +
4- shows the menu items;
 +
5- initializes the menu items events
 +
*/
 +
 +
$ac_loading.show();//show loading status image
 +
$.when(loadImages()).done(function(){
 +
$.when(showBGImage()).done(function(){
 +
//hide the loading status image
 +
$ac_loading.hide();
 +
$.when(slideOutMenu()).done(function(){
 +
$.when(toggleMenuItems('up')).done(function(){
 +
initEventsSubMenu();
 +
});
 +
});
 +
});
 +
});
 +
},
 +
 +
 +
showBGImage = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
//adjusts the dimensions of the image to fit the screen
 +
adjustImageSize($ac_bgimage);
 +
$ac_bgimage.fadeIn(1000, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
slideOutMenu = function() {
 +
/* calculate new width for the menu */
 +
if($("#contenedor").width() > 1100){
 +
var new_w = $("#contenedor").width() - $title.outerWidth(true) - 15;
 +
} else {
 +
var new_w = 1024 - $title.outerWidth(true) - 15;
 +
}
 +
$(".texto").css('width', new_w - 130 + 'px');
 +
/* All links blank */
 +
$("a").css('color', '#FFF');
 +
return $.Deferred(
 +
function(dfd) {
 +
//slides out the menu
 +
$menu.stop()
 +
.animate({
 +
width : new_w + 'px'
 +
}, 700, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
/* shows / hides the menu items */
 +
toggleMenuItems = function(dir) {
 +
return $.Deferred(
 +
function(dfd) {
 +
/*
 +
slides in / out the items.
 +
different animation time for each one.
 +
*/
 +
$menuItems.each(function(i) {
 +
var $el_title = $(this).children('a:first'),
 +
marginTop, opacity, easing;
 +
if(dir === 'up'){
 +
marginTop = '0px';
 +
opacity = 1;
 +
easing = 'easeOutBack';
 +
}
 +
else if(dir === 'down'){
 +
marginTop = '60px';
 +
opacity = 0;
 +
easing = 'easeInBack';
 +
}
 +
$el_title.stop()
 +
.animate({
 +
marginTop : marginTop,
 +
opacity : opacity
 +
}, 200 + i * 200 , easing, function(){
 +
if(i === totalItems - 1)
 +
dfd.resolve();
 +
});
 +
});
 +
}
 +
).promise();
 +
},
 +
initEventsSubMenu = function() {
 +
$menuItems.each(function(i) {
 +
var $item = $(this), // the <li>
 +
$el_title = $item.children('a:first'),
 +
el_image = $el_title.attr('id'),
 +
$sub_menu = $item.find('.ac_subitem'),
 +
$ac_close = $sub_menu.find('.ac_close');
 +
$text_loading = $('.text_loading');
-
</head>
+
if(i==0){
 +
openSubMenu($item, $sub_menu, el_image);
 +
loadText($("#Summary"));
 +
}
 +
                                   
-
<body>
+
 +
/* user clicks one item : appetizers | main course | desserts | wines | specials */
 +
$el_title.bind('click.Menu', function(e) {
 +
 +
/* Menu Items doesnt disappear when link cliked */
 +
$(".ac_subitem").css("height", "0px");
 +
$(".ac_subitem").css("border", "none");
 +
/* all other text display is none*/
 +
$('.texto').css({opacity: '0.0', display: 'none'});
 +
/* Mark other links as blank */
 +
$(".ac_content a").css('color', '#FFF');
 +
/* Current link in black */
 +
$el_title.css('color', '#000');
 +
 +
 +
//$.when(toggleMenuItems('down')).done(function(){
 +
openSubMenu($item, $sub_menu, el_image);
-
<ul id="contenedor">
+
                                                                        loadText($sub_menu.find('.sub_menu_link'));
-
<li id="proj"> <a href="#Project">Project</a></li>
+
-
<li id="team"> <a href="#Team">Team</a></li>
+
-
</ul>
+
-
<span id="teamPrev">
 
-
            Fotitos de los pibes
 
-
      </span>
 
-
<span id="projPrev">
 
-
        <p>  El proyecto se basa en el biosensado cuantitativo de contaminantes en aguas.  </p>
 
-
  <p> La contaminación con arsénico es una problemática a nivel mundial, y en particular
+
//});
-
en la Argentina. </p>
+
 +
return false;
 +
});
 +
/* closes the submenu */
 +
$ac_close.bind('click.Menu', function(e) {
 +
toggleMenuItems('up');
 +
$(".ac_subitem").css("height", "0px");
 +
$(".ac_subitem").css("border", "none");
 +
/* all other text display is none*/
 +
$('.texto').css({opacity: '0.0', display: 'none'});
 +
 +
return false;
 +
});
 +
/* open link's text in "texto" class div */
 +
 +
 +
$(".sub_menu_link").bind('click.Menu', function(){
 +
loadText(this);
-
<p>Los controles existentes son aislados y requieren de conocimientos técnicos y de un equipamiento
+
return false;
-
costoso para el usuario medio. Frente a esto es que surge la idea de brindarle a la población una forma
+
-
simple, elegante y económica de realizar sus propias pruebas de agua.</p>
+
});
 +
 +
});
 +
},
 +
-
+
loadText = function(link) {
-
      </span>
+
 +
$(".ac_subitem a").css('color', '#FFF');
 +
/* Change opacity for later animatation*/
 +
$('.texto').css({opacity:'0.2'});
 +
                                              // $('.texto').css({display: 'none'});
 +
 +
$(link).css('color', '#000');
 +
new_link = $(link).attr('href')+ " #external";
 +
                                                $text_loading.appendTo('#Contenedor');
 +
$text_loading.show();
 +
$('#textExt').load(new_link, function() {
 +
/* hide loading text: */
 +
                                        $text_loading.hide();
 +
/*show external div in textExt*/
 +
$('#textExt').css({display: 'block'});
 +
                                                       
 +
$('#textExt').stop()
 +
.animate({opacity: '1'}, 1400, function(){});
 +
                                                      /*('#textExt').                                                  animate({scrollTop: $('#textExt').offset().top -100 }, 'slow');*/
 +
                                                       
 +
/*Bind function recursivily in the links of the external*/
 +
                                                        $('.texto a').css({color:"#68A"});
 +
 +
 +
 +
cargar();
 +
 +
 +
 +
$('#external #inwiki a').bind('click.Menu', function(){
 +
loadText(this);
 +
return false;
 +
});
 +
 +
 +
});
 +
 +
 +
 +
 +
 +
},
 +
 +
/* Carga una función javascript cuando abro un external link */
 +
cargar =function(){
 +
  $.getScript('https://2013.igem.org/Team:Buenos_Aires/js/external.js?action=raw&ctype=text/javascript', function() {
 +
  externa(); /*In this callback function you can fire the methods/functions defined in the loaded script file.*/
 +
  prueba();
 +
});
 +
},
 +
openSubMenu = function($item, $sub_menu, el_image) {
-
</body>
+
 +
$sub_menu.appendTo('#contenedor');
 +
$sub_menu.stop()
 +
.animate({
 +
height : '400px',
 +
marginTop : '120px'
 +
 +
}, 400, function() {
 +
//the bg image changes
 +
$sub_menu.css({border: "solid black"});
 +
showItemImage(el_image);
 +
});
 +
},
 +
/* changes the background image */
 +
showItemImage = function(source) {
 +
//if its the current one return
 +
if($ac_bgimage.attr('src') === source)
 +
return false;
 +
 +
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
 +
$itemImage.insertBefore($ac_bgimage);
 +
adjustImageSize($itemImage);
 +
$ac_bgimage.fadeOut(1500, function() {
 +
$(this).remove();
 +
$ac_bgimage = $itemImage;
 +
});
 +
$itemImage.fadeIn(1500);
 +
},
 +
/*
 +
on window resize, ajust the bg image dimentions,
 +
and recalculate the menus width
 +
*/
 +
initWindowEvent = function() {
 +
/* on window resize set the width for the menu */
 +
$(window).bind('resize.Menu' , function(e) {
 +
adjustImageSize($ac_bgimage);
 +
/* calculate new width for the menu */
 +
var new_w = $("#contenedor").width() - $title.outerWidth(true) - 15;
 +
$menu.css('width', new_w + 'px');
 +
                            $(".texto").css('width', new_w - 130 + 'px');
 +
                                                       
 +
});
 +
},
 +
/* makes an image "fullscreen" and centered */
 +
adjustImageSize = function($img) {
 +
 +
$img.css({
 +
width : $(window).width + 'px',
 +
height : $(window).height + 'px',
 +
 +
});
 +
},
 +
/* preloads a set of images */
 +
loadImages = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
var total_images = $ItemImages.length,
 +
loaded = 0;
 +
for(var i = 0; i < total_images; ++i){
 +
$('<img/>').load(function() {
 +
++loaded;
 +
if(loaded === total_images)
 +
dfd.resolve();
 +
}).attr('src' , $ItemImages[i]);
 +
}
 +
}
 +
).promise();
 +
};
 +
 +
return {
 +
init : init
 +
};
 +
})();
 +
 +
/*
 +
call the init method of Menu
 +
*/
 +
Menu.init();
 +
});
 +
</script>
 +
    </body>
</html>
</html>

Latest revision as of 14:56, 28 October 2013

iGem Buenos Aires

Background
Loading...

Buenos Aires

Loading...
Hola

Retrieved from "http://2013.igem.org/Team:Buenos_Aires"