Team:Buenos Aires/Pruebas

From 2013.igem.org

(Difference between revisions)
 
(145 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
<html lang="en">
-
<head>
+
    <head>
 +
        <title>iGem Buenos Aires</title>
 +
<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.css?action=raw&ctype=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" />
 +
 
<style type ='text/css'>
<style type ='text/css'>
Line 6: 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 29: Line 36:
-
 
+
li{
-
/* General Demo Style */
+
color:#FFF;
-
body{
+
-
    background:#e6eecc url("https://static.igem.org/mediawiki/igem.org/2/29/Beige_paper.png") repeat top left;
+
-
color: #333;
+
-
font-family: 'Terminal Dosis', Arial, sans-serif;
+
-
font-size: 13px;
+
-
}
+
-
.container{
+
-
position:relative;
+
-
height:500px;
+
-
}
+
-
a{
+
-
color: #fff;
+
-
text-decoration: none;
+
-
}
+
-
.clr{
+
-
clear: both;
+
-
}
+
-
.content{
+
-
position:relative;
+
}
}
 +
h1{
h1{
-
margin:0px;
+
border:none;
-
padding:20px;
+
-
font-size:32px;
+
-
color:#000;
+
-
    text-shadow:1px 1px 1px rgba(255,255,255,0.9);
+
-
text-align:center;
+
-
font-weight:400;
+
-
}
+
-
h1 span{
+
-
    display:block;
+
-
font-size:14px;
+
-
color:#666;
+
-
    font-style:italic;
+
-
    font-family:Georgia, serif;
+
-
padding-top:5px;
+
-
}
+
-
/* Header Style */
+
-
.header{
+
-
font-family:'Arial Narrow', Arial, sans-serif;
+
-
line-height: 24px;
+
-
font-size: 11px;
+
-
background: #000;
+
-
opacity: 0.9;
+
-
text-transform: uppercase;
+
-
z-index: 9999;
+
-
position: relative;
+
-
-moz-box-shadow: 1px 0px 2px #000;
+
-
-webkit-box-shadow: 1px 0px 2px #000;
+
-
box-shadow: 1px 0px 2px #000;
+
-
}
+
-
.header a{
+
-
padding: 0px 10px;
+
-
letter-spacing: 1px;
+
-
color: #ddd;
+
-
display: block;
+
-
float: left;
+
-
}
+
-
.header a:hover{
+
-
color: #fff;
+
-
}
+
-
.header span.right{
+
-
float: right;
+
-
}
+
-
.header span.right a{
+
-
float: none;
+
-
display: inline;
+
}
}
 +
</style>
-
.ca-menu{
 
-
    padding:0;
 
-
    margin:20px auto;
 
-
    width: 1020px;
 
-
}
 
-
.ca-menu li{
 
-
    width: 230px;
 
-
    height: 230px;
 
-
    border: 10px solid #f6f6f6;
 
-
    overflow: hidden;
 
-
    position: relative;
 
-
    float:left;
 
-
    margin-right: 4px;
 
-
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    -webkit-border-radius: 125px;
 
-
    -moz-border-radius: 125px;
 
-
    border-radius: 125px;
 
-
    -webkit-transition: all 400ms linear;
 
-
    -moz-transition: all 400ms linear;
 
-
    -o-transition: all 400ms linear;
 
-
    -ms-transition: all 400ms linear;
 
-
    transition: all 400ms linear;
 
-
}
 
-
.ca-menu li:last-child{
 
-
    margin-right: 0px;
 
-
}
 
-
.ca-menu li a{
 
-
    text-align: left;
 
-
    width: 100%;
 
-
    height: 100%;
 
-
    display: block;
 
-
    color: #333;
 
-
    position: relative;
 
 +
 +
 +
    </head>
 +
    <body>
 +
 +
<div id="contenedor">
 +
 +
 +
<div id="ac_background" class="ac_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_loading"></div>
 +
</div>
 +
 +
 +
 +
<div id="ac_content" class="ac_content">
 +
 +
<h1><span>Buenos Aires</span>iGem</h1>
 +
<div class="ac_menu">
 +
<ul>
 +
                                        <li>
 +
<a href="https://static.igem.org/mediawiki/2013/thumb/8/85/B5.jpg/800px-B5.jpg">Tour</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Tour</h2>
 +
<ul>
 +
<li>Take a wiki tour!</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://static.igem.org/mediawiki/2013/thumb/b/b3/B4.jpg/800px-B4.jpg">Project</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Project</h2>
 +
<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="Obj" href="_objetive">Objetive</a></li>
 +
<li><a class="sub_menu_link" id="Mot" href="_motivation">Motivation</a></li>
 +
<!-- <li><a class="sub_menu_link" id="App" href="#nada">Application</a></li>-->
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://static.igem.org/mediawiki/2013/thumb/1/12/B3.jpg/800px-B3.jpg">Results</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Results</h2>
 +
<ul>
 +
<li>Results.</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://static.igem.org/mediawiki/2013/thumb/0/01/B2.jpg/800px-B2.jpg">Team</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Team</h2>
 +
<ul>
 +
<li>The Team.</li>
 +
 +
<li><a class="sub_menu_link" id="Obj" href="_members">Members</a></li>
 +
 +
</ul>
 +
</div>
 +
</li>
 +
 +
</ul>
 +
</div>
 +
</div>
 +
 +
 +
<!--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>
 +
 +
<!-- 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>
 +
 +
    <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
 +
 +
 +
<!--Para mover a las bacterias-->
 +
<script type="text/javascript">
 +
function beeLeft() {
 +
    $("#a1").animate({left: "-=50", top: "-=100"}, 4000, "swing", beeRight);
 +
$("#a2").animate({left: "-=50", top: "+=100"}, 4000, "swing");
 +
$("#a3").animate({left: "+=50", top: "+=50"}, 4000, "swing");
 +
}
}
-
.ca-icon{
+
function beeRight() {
-
     font-family: 'WebSymbolsRegular', cursive;
+
     $("#a1").animate({left: "+=50",top: "+=100"}, 4000, "swing", beeLeft);
-
    font-size: 40px;
+
$("#a2").animate({left: "+=50",top: "-=100"}, 4000, "swing");
-
    color: #f6f6f6;;
+
$("#a3").animate({left: "-=50",top: "-=50"}, 4000, "swing");
-
    line-height: 60px;
+
-
    position: absolute;
+
-
    width: 100%;
+
-
    height: 60px;
+
-
    left: 0px;
+
-
    top: 30px;
+
-
    text-align: center;
+
-
    -webkit-transition: all 400ms linear;
+
-
    -moz-transition: all 400ms linear;
+
-
    -o-transition: all 400ms linear;
+
-
    -ms-transition: all 400ms linear;
+
-
    transition: all 400ms linear;
+
-
}
+
-
.ca-main{
+
-
    font-size: 24px;
+
-
    position: absolute;
+
-
    top: 110px;
+
-
    height: 80px;
+
-
    width: 170px;
+
-
    left: 50%;
+
-
    margin-left: -85px;
+
-
    opacity: 0.8;
+
-
    text-align: center;
+
-
    padding-top:20px;
+
-
}
+
-
.ca-sub{
+
-
    text-align:center;
+
-
    color: #000;
+
-
    font-size: 26px;
+
-
    position: absolute;
+
-
    height: 80px;
+
-
    width: 170px;
+
-
    left: 50%;
+
-
    margin-left: -85px;
+
-
    top: 110px;
+
-
    opacity: 0;
+
-
    padding-top:20px;
+
-
   
+
-
    -webkit-transition: all 400ms linear;
+
-
    -moz-transition: all 400ms linear;
+
-
    -o-transition: all 400ms linear;
+
-
    -ms-transition: all 400ms linear;
+
-
    transition: all 400ms linear;
+
-
   
+
-
}
+
-
.ca-menu li:hover{
+
-
    background: #f7f7f7;
+
-
    border-color: #fff;
+
-
    -webkit-transform: rotate(360deg);
+
-
    -moz-transform: rotate(360deg);
+
-
    -o-transform: rotate(360deg);
+
-
    -ms-transform: rotate(360deg);
+
-
    transform: rotate(360deg);
+
-
}
+
-
.ca-menu li:hover .ca-icon{
+
-
    color: #555;
+
-
    font-size: 60px;
+
-
}
+
-
.ca-menu li:hover .ca-main{
+
-
    display: none;
+
-
}
+
-
.ca-menu li:hover .ca-sub{
+
-
    opacity: 0.8;
+
}
}
 +
beeRight();
-
</style>
+
</script>
 +
 
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
var $ac_background = $('#ac_background'),
 +
$ac_bgimage = $ac_background.find('.ac_bgimage'),
 +
$ac_loading = $ac_background.find('.ac_loading'),
 +
 +
 +
$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('href'));
 +
});
 +
$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 */
 +
var new_w = $(window).width() - $title.outerWidth(true);
 +
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('href'),
 +
$sub_menu = $item.find('.ac_subitem'),
 +
$ac_close = $sub_menu.find('.ac_close');
 +
$text_loading = $('.text_loading');
 +
 
 +
 
 +
 +
/* user clicks one item : appetizers | main course | desserts | wines | specials */
 +
$el_title.bind('click.Menu', function(e) {
 +
$.when(toggleMenuItems('down')).done(function(){
 +
openSubMenu($item, $sub_menu, el_image);
 +
});
 +
 +
return false;
 +
});
 +
/* closes the submenu */
 +
$ac_close.bind('click.Menu', function(e) {
 +
toggleMenuItems('up');
 +
$(".ac_subitem").css("height", "0px");
 +
/* 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);
 +
return false;
 +
 +
});
 +
 
 +
 +
 +
 +
});
 +
},
 +
-
  <title>Creative CSS3 Animation Menus</title>
+
loadText = function(link) {
-
        <meta charset="UTF-8" />
+
-
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
-
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
        <meta name="description" content="Creative CSS3 Animation Menus" />
+
-
        <meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
+
-
        <meta name="author" content="Codrops" />
+
-
        <link rel="shortcut icon" href="../favicon.ico">
+
-
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+
-
        <link rel="stylesheet" type="text/css" href="css/style9.css" />
+
-
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
+
-
</head>
+
/* Change opacity for later animatation*/
 +
$('.texto').css({opacity:'0.0'});
 +
 +
new_link = $(link).attr('href')+ " #external";
-
<body>
+
$text_loading.show();
-
  <div class="container">
+
-
            <div class="header">
+
-
            </div>
+
$('#textExt').load(new_link, function() {
-
            <h1>Choose your destiny!<span> </span></h1>
+
/* hide loading text: */
-
            <div class="content">
+
                                        $text_loading.hide();
-
                <ul class="ca-menu">
+
/*show external div in textExt*/
-
                    <li>
+
$('#textExt').css({display: 'block'});
-
                        <a href="#">
+
$('#textExt').stop()
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/f/f1/Tuerca-a.png""></span>
+
.animate({opacity: '1'}, 1400, function(){});
-
                            <div class="ca-content">
+
/*Bind function recursivily in the links of the external*/
-
                                <h2 class="ca-main">Project</h2>
+
                                                        $('.texto a').css({color:"#68A"});
-
                                <h3 class="ca-sub">The path we've followed</h3>
+
$('.texto a').bind('click.Menu', function(){
-
                            </div>
+
loadText(this);
-
                        </a>
+
return false;
-
                    </li>
+
});
-
                    <li>
+
});
-
                        <a href="#">
+
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/e/e1/Tuerca-v.png"></span>
+
-
                            <div class="ca-content">
+
-
                                <h2 class="ca-main">Results</h2>
+
-
                                <h3 class="ca-sub">What we've obtained</h3>
+
-
                            </div>
+
-
                        </a>
+
-
                    </li>
+
-
                    <li>
+
-
                        <a href="#">
+
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/2/21/Tuerca-r.png"></span>
+
-
                            <div class="ca-content">
+
-
                                <h2 class="ca-main">Human Practices</h2>
+
-
                                <h3 class="ca-sub">Social and Eco Helping</h3>
+
-
                            </div>
+
-
                        </a>
+
-
                    </li>
+
-
                    <li>
+
-
                        <a href="#">
+
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/d/d0/Tuerca-n.png"></span>
+
-
                            <div class="ca-content">
+
-
                                <h2 class="ca-main">Team</h2>
+
-
                                <h3 class="ca-sub">The minds behind!</h3>
+
-
                            </div>
+
-
                        </a>
+
-
                    </li>
+
-
                </ul>
+
-
            </div><!-- content -->
+
-
        </div>
+
-
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+
 +
 +
 +
},
-
</body>
+
openSubMenu = function($item, $sub_menu, el_image) {
 +
$sub_menu.stop()
 +
.animate({
 +
height : '400px',
 +
marginTop : '-200px'
 +
}, 400, function() {
 +
//the bg image changes
 +
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 = $(window).width() - $title.outerWidth(true);
 +
$menu.css('width', new_w + 'px');
 +
});
 +
},
 +
/* makes an image "fullscreen" and centered */
 +
adjustImageSize = function($img) {
 +
var w_w = $(window).width(),
 +
w_h = $(window).height(),
 +
r_w = w_h / w_w,
 +
i_w = $img.width(),
 +
i_h = $img.height(),
 +
r_i = i_h / i_w,
 +
new_w,new_h,
 +
new_left,new_top;
 +
 +
if(r_w > r_i){
 +
new_h = w_h;
 +
new_w = w_h / r_i;
 +
}
 +
else{
 +
new_h = w_w * r_i;
 +
new_w = w_w;
 +
}
 +
 +
$img.css({
 +
width : new_w + 'px',
 +
height : new_h + '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 19:50, 1 July 2013

iGem Buenos Aires

Background

Buenos AiresiGem

Hola

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