Team:Buenos Aires/Pruebas

From 2013.igem.org

(Difference between revisions)
 
(142 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
 
<html lang="en">
<html lang="en">
     <head>
     <head>
-
         <title>Animated Content Menu with jQuery</title>
+
         <title>iGem Buenos Aires</title>
<meta charset=utf-8>
<meta charset=utf-8>
-
         <meta name="description" content="Animated Content Menu with jQuery" />
+
         <meta name="description" content="iGem Buenos Aires" />
-
         <meta name="keywords" content="jquery, animation, menu, navigation, template, slide out, effect, background image"/>
+
         <meta name="keywords" content="biosensing, igem, buenos aires, UBA, arsenic"/>
-
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+
<link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
-
        <link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
+
 
-
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
+
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" /> <!-- Font -->
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
Line 16: Line 15:
/* Author: Pieter van Boheemen */
/* Author: Pieter van Boheemen */
/* Team: TU Delft */
/* Team: TU Delft */
 +
#catlinks{display:none;}
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
#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: scroll; height:100%;}
+
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: scroll; height:100%;overflow:hidden;}
-
#bodyContent { border: none; padding:0; margin:0; width:100%; height:100%;}
+
#bodyContent {background-color:transparent; border: none; padding:0; margin:0; width:100%; height:100%;}
-
#top-section { height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
+
#top-section {display: block;position:fixed; height:3px; width:100%;z-index:999;}
-
padding:0; border: none; font-size: 10px;}
+
#p-logo {display: none;}
-
#p-logo { height:1px; overflow:scroll; display: none;}
+
#search-controls {display: none;}
-
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
+
#footer-box {display: none;}
-
#footer-box { width: 100%; margin: -10px auto 0 auto; padding: 20px 0;}
+
.visualClear { display: none; }
.visualClear { display: none; }
-
#footer { border: none; width: 965px; margin: 0 auto; padding: 0;}
+
#footer { border: none; width: 100%; margin: 0 auto; padding: 0;}
.firstHeading { display: none;}
.firstHeading { display: none;}
#f-list a { color: #333; font-size: 10px;}
#f-list a { color: #333; font-size: 10px;}
#f-list a:hover { color: #666;}
#f-list a:hover { color: #666;}
.printfooter { display: none; }
.printfooter { display: none; }
-
#footer ul { margin: 0; padding: 0;}
 
-
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
 
#search-controls { display:none; }
#search-controls { display:none; }
h3#siteSub { display: none;}
h3#siteSub { display: none;}
Line 38: Line 35:
/* Wiki Hacks - END */
/* Wiki Hacks - END */
-
 
-
#contenedor{
 
-
height: 800px;
 
-
color:#FFF;
 
-
}
 
li{
li{
Line 49: Line 41:
h1{
h1{
-
color:#FFF;
 
border:none;
border:none;
}
}
Line 61: Line 52:
     <body>
     <body>
-
<contenedor>
+
<div id="contenedor">
 +
 
<div id="ac_background" class="ac_background">
<div id="ac_background" class="ac_background">
-
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/1/1c/Chicos.jpg" alt="Background"/>
+
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/thumb/b/b3/B4.jpg/800px-B4.jpg" alt="Background"/>
<div class="ac_overlay"></div>
<div class="ac_overlay"></div>
<div class="ac_loading"></div>
<div class="ac_loading"></div>
</div>
</div>
 +
 +
 +
<div id="ac_content" class="ac_content">
<div id="ac_content" class="ac_content">
 +
<h1><span>Buenos Aires</span>iGem</h1>
<h1><span>Buenos Aires</span>iGem</h1>
<div class="ac_menu">
<div class="ac_menu">
<ul>
<ul>
-
<li>
+
                                        <li>
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Project</a>
+
<a href="https://static.igem.org/mediawiki/2013/thumb/8/85/B5.jpg/800px-B5.jpg">Tour</a>
<div class="ac_subitem">
<div class="ac_subitem">
<span class="ac_close"></span>
<span class="ac_close"></span>
-
<h2>Project</h2>
+
<h2>Tour</h2>
<ul>
<ul>
-
<li>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</li>
+
<li>Take a wiki tour!</li>
-
<li><a class="ps" href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })">Open the page programatically.</a>Pepe</li>
+
-
<li>Smoked Salmon Terrine</li>
+
-
<li>Tuna Ceviche</li>
+
-
<li>Wild Mushroom Flan</li>
+
-
<li>Almond Bruschetta</li>
+
-
<li>Green Chilli Canapee</li>
+
-
<li>Artichoke Rucula Salad</li>
+
</ul>
</ul>
</div>
</div>
</li>
</li>
<li>
<li>
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Results</a>
+
<a href="https://static.igem.org/mediawiki/2013/thumb/b/b3/B4.jpg/800px-B4.jpg">Project</a>
<div class="ac_subitem">
<div class="ac_subitem">
<span class="ac_close"></span>
<span class="ac_close"></span>
-
<h2>Results</h2>
+
<h2>Project</h2>
<ul>
<ul>
-
<li>Drops of rain could be heard hitting the pane, which made him feel quite sad.</li>
+
<li> We aim to build a quantitative modular Biosensor for the detection of
-
<li>>Wild Sea Bass Filet</li>
+
toxic pollutants in water</li>
-
<li>Linguini and Clams</li>
+
<li><a class="sub_menu_link" id="Obj" href="_objetive">Objetive</a></li>
-
<li>Shrimp and Crabmeat Alfredo</li>
+
<li><a class="sub_menu_link" id="Mot" href="_motivation">Motivation</a></li>
-
<li>Broiled Stuffed Flounder </li>
+
<!-- <li><a class="sub_menu_link" id="App" href="#nada">Application</a></li>-->
-
<li>Mussels Marinara</li>
+
-
<li>Grilled Mooloolaba Giant king prawns</li>
+
-
<li>Lobster Mornay</li>
+
-
<li>Fresh Shrimp Tart</li>
+
</ul>
</ul>
</div>
</div>
</li>
</li>
<li>
<li>
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Team</a>
+
<a href="https://static.igem.org/mediawiki/2013/thumb/1/12/B3.jpg/800px-B3.jpg">Results</a>
<div class="ac_subitem">
<div class="ac_subitem">
<span class="ac_close"></span>
<span class="ac_close"></span>
-
<h2>Team</h2>
+
<h2>Results</h2>
<ul>
<ul>
-
<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
+
<li>Results.</li>
-
<li>Ratatouille</li>
+
-
<li>Le Tourin</li>
+
-
<li>Wild Salmon Bruschetta</li>
+
-
<li>Sweet Mustard Gratin</li>
+
-
<li>Homemade Pizza Mediteranica</li>
+
-
<li>Spanakopita Speciale</li>
+
-
<li>Ricotta Spinach Cannelloni</li>
+
</ul>
</ul>
</div>
</div>
</li>
</li>
<li>
<li>
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Desserts</a>
+
<a href="https://static.igem.org/mediawiki/2013/thumb/0/01/B2.jpg/800px-B2.jpg">Team</a>
<div class="ac_subitem">
<div class="ac_subitem">
<span class="ac_close"></span>
<span class="ac_close"></span>
-
<h2>Desserts</h2>
+
<h2>Team</h2>
<ul>
<ul>
-
<li>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
+
<li>The Team.</li>
-
<li>New England Apple Crisp</li>
+
 
-
<li>Southern Pecan Pie</li>
+
<li><a class="sub_menu_link" id="Obj" href="_members">Members</a></li>
-
<li>Brownie Fudge Sundae</li>
+
-
<li>Strawberry Mousse Cake</li>
+
-
<li>Vanilla Crème brûlée</li>
+
-
<li>Lemon Sorbet</li>
+
-
<li>Crunchy Almond Cake</li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Wines</a>
+
-
<div class="ac_subitem">
+
-
<span class="ac_close"></span>
+
-
<h2>Wines</h2>
+
-
<ul>
+
-
<li>A small river named Duden flows by their place and supplies it with the necessary regelialia.</li>
+
-
<li>CARM Douro Reserva</li>
+
-
<li>Fontodi Colli della Toscana Centrale Flaccianello</li>
+
-
<li>Alban Syrah Edna Valley Alban Estate Reva</li>
+
-
<li>Zaca Mesa Syrah Santa Ynez Valley</li>
+
-
<li>Quinta do Vallado Douro Reserva</li>
+
-
<li>Viticcio Chianti Classico Riserva</li>
+
-
<li>Avignonesi Vino Nobile di Montepulciano</li>
+
</ul>
</ul>
</div>
</div>
</li>
</li>
 +
</ul>
</ul>
</div>
</div>
</div>
</div>
-
+
 
-
<div class="ac_footer">
+
 
-
iGem Bs As
+
<!--Here i put all the text that will open with links:-->
 +
 
 +
<!--PROJECT-->
 +
 
 +
<!--Objetive-->
 +
<!-- <iframe class="restricted" id="textObj" scrolling="no"-->
 +
<div class="text_loading"></div>
 +
<div class="texto" id="textExt"> Hola
 +
 
 +
</div>
 +
 
 +
<!-- <div class="texto" id="textObj"> -->
 +
<!-- <H1>Objectives</H1>-->
 +
<!-- <p> The project will focus on the <b>development of a specific water biosensor </b>, but with a modular and scalable approach. Thereby you could easily afford multiple measurements with the very same device.</p>-->
 +
 
 +
<!-- <p>The device will be designed in a way that its collected data will be easily accessible via a web interface, and later it could be transferred to the relevant agencies upon request. </p>-->
 +
 
 +
<!-- <p> At the end of this project we expect to have a prototype of measuring device and a diagram of a system for the distribution, collection and centralization of data. </p> -->
 +
 
 +
<!-- <p> The project will focus on the measurement of a primary pollutant: <b> arsenic </b>. However, its <b>modular and scalable design</b> provides an easy way for incorporate various contaminants already identified, such as nitrate / nitrite, lead and hydrocarbons. </p>-->
 +
<!-- -->
 +
<!-- <p>With the data collected is expected that <b>any user with minimal training</b> (image-based Instruction) can easily and quickly determine the <b>presence and level of the contaminant</b> on his water consumption. Also with the systematic use of this tool by the enforcement authorities, can implement specific public policies based on current and reliable information.</p>-->
 +
 
 +
<!-- </div>-->
 +
 
 +
<!--Moti-->
 +
 
 +
<!-- <div class="texto" id="textMot"> -->
 +
<!-- <H1>Motivation</H1>-->
 +
<!-- <p>Limited access to clean water is a deep problem and <b>tends to worsen with time</b>. The pollution that converts water in non-drinkable can vary from just a single toxic (eg arsenic) to a highly complex mixture of types of substances such as those found in various river basins (eg Sali-Dulce, Matanza-Riachuelo among others).</p> -->
 +
<!-- <p>Depending on the type of contamination (complexity and abundance),  making  the water to be drinkable could be <b>easy and inexpensive</b>. Even if it weren't possible to make it drinkable, information on pollutant levels could be easily used to modify consumption patterns and seek alternative sources of water.</p>-->
 +
<!-- <p>At present, the spatial and temporal quantification of contaminants is limited by the difficulty in processing the samples and associated costs. Moreover, the lack of centralization and systematization of data does the task of obtain them by decision makers, stakeholders and the general public, very difficult.</p>  -->
 +
 
 +
<!-- </div>-->
 +
 
 +
<!-- <div class="texto" id="textApp"> Apli </div>-->
 +
 
 +
<!--RESULTS-->
 +
 
 +
 
 +
<!--TEAM-->
 +
 
 +
 
 +
 
 +
</div>
-
</div>
 
-
</div>
 
<!-- The JavaScript -->
<!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Line 172: Line 172:
     <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
     <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
-
    <script>
 
-
        /* Default pageslide, moves to the right */
 
-
        $(".first").pageslide();
 
-
       
 
-
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
 
-
        $(".second").pageslide({ direction: "left", modal: true });
 
-
    </script>
 
-
<script>
+
 
-
$(document).ready(function(){
+
<!--Para mover a las bacterias-->
-
  $("li").click(function(){
+
<script type="text/javascript">
-
var liId = $(this).attr('id');
+
function beeLeft() {
-
var namePrev = liId + "Text";
+
    $("#a1").animate({left: "-=50", top: "-=100"}, 4000, "swing", beeRight);
-
var element = document.getElementById(namePrev);
+
$("#a2").animate({left: "-=50", top: "+=100"}, 4000, "swing");
-
element.style.display="block";
+
$("#a3").animate({left: "+=50", top: "+=50"}, 4000, "swing");
-
 
+
-
  });
+
}
-
});
+
function beeRight() {
-
</script>  
+
    $("#a1").animate({left: "+=50",top: "+=100"}, 4000, "swing", beeLeft);
 +
$("#a2").animate({left: "+=50",top: "-=100"}, 4000, "swing");
 +
$("#a3").animate({left: "-=50",top: "-=50"}, 4000, "swing");
 +
}
 +
 
 +
beeRight();
 +
 
 +
</script>
 +
 
<script type="text/javascript">
<script type="text/javascript">
Line 197: Line 198:
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_loading = $ac_background.find('.ac_loading'),
$ac_loading = $ac_background.find('.ac_loading'),
 +
$ac_content = $('#ac_content'),
$ac_content = $('#ac_content'),
Line 230: Line 232:
5- initializes the menu items events
5- initializes the menu items events
*/
*/
 +
$ac_loading.show();//show loading status image
$ac_loading.show();//show loading status image
$.when(loadImages()).done(function(){
$.when(loadImages()).done(function(){
Line 243: Line 246:
});
});
},
},
 +
 +
 +
 +
showBGImage = function() {
showBGImage = function() {
return $.Deferred(
return $.Deferred(
Line 305: Line 312:
$sub_menu = $item.find('.ac_subitem'),
$sub_menu = $item.find('.ac_subitem'),
$ac_close = $sub_menu.find('.ac_close');
$ac_close = $sub_menu.find('.ac_close');
 +
$text_loading = $('.text_loading');
 +
 +
/* user clicks one item : appetizers | main course | desserts | wines | specials */
/* user clicks one item : appetizers | main course | desserts | wines | specials */
Line 311: Line 321:
openSubMenu($item, $sub_menu, el_image);
openSubMenu($item, $sub_menu, el_image);
});
});
 +
return false;
return false;
});
});
/* closes the submenu */
/* closes the submenu */
$ac_close.bind('click.Menu', function(e) {
$ac_close.bind('click.Menu', function(e) {
-
closeSubMenu($sub_menu);
+
toggleMenuItems('up');
 +
$(".ac_subitem").css("height", "0px");
 +
/* all other text display is none*/
 +
$('.texto').css({opacity: '0.0', display: 'none'});
 +
return false;
return false;
});
});
 +
/* open link's text in "texto" class div */
 +
 +
 +
$(".sub_menu_link").bind('click.Menu', function(){
 +
loadText(this);
 +
return false;
 +
 +
});
 +
 +
 +
 +
});
});
},
},
 +
 +
 +
loadText = function(link) {
 +
 +
 +
/* Change opacity for later animatation*/
 +
$('.texto').css({opacity:'0.0'});
 +
 +
new_link = $(link).attr('href')+ " #external";
 +
 +
$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(){});
 +
/*Bind function recursivily in the links of the external*/
 +
                                                        $('.texto a').css({color:"#68A"});
 +
$('.texto a').bind('click.Menu', function(){
 +
loadText(this);
 +
return false;
 +
});
 +
});
 +
 +
 +
 +
},
 +
openSubMenu = function($item, $sub_menu, el_image) {
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
$sub_menu.stop()
Line 344: Line 402:
});
});
$itemImage.fadeIn(1500);
$itemImage.fadeIn(1500);
-
},
 
-
closeSubMenu = function($sub_menu) {
 
-
$sub_menu.stop()
 
-
.animate({
 
-
height : '0px',
 
-
marginTop : '0px'
 
-
}, 400, function() {
 
-
//show items
 
-
toggleMenuItems('up');
 
-
});
 
},
},
/*
/*
Line 391: Line 439:
width : new_w + 'px',
width : new_w + 'px',
height : new_h + 'px',
height : new_h + 'px',
-
left : (w_w - new_w) / 2 + 'px',
+
-
top : (w_h - new_h) / 2 + 'px'
+
});
});
},
},

Latest revision as of 19:50, 1 July 2013

iGem Buenos Aires

Background

Buenos AiresiGem

Hola

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