Team:Buenos Aires
From 2013.igem.org
(Difference between revisions)
(234 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | <html lang="en"> | |
- | <html> | + | <head> |
- | <head> | + | <title>iGem Buenos Aires</title> |
- | <meta | + | <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 href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" /> <!-- Font --> | ||
- | /* | + | <style type ='text/css'> |
- | # | + | /* Wiki Hacks - START */ |
- | + | /* 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 */ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | li{ | ||
+ | color:#FFF; | ||
} | } | ||
+ | |||
+ | h1{ | ||
+ | border:none; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
- | |||
+ | </head> | ||
+ | <body> | ||
- | <div id=" | + | <div id="contenedor"> |
+ | |||
+ | |||
+ | <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"> | ||
+ | |||
+ | |||
+ | |||
+ | <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> | ||
+ | |||
+ | <li><a class="sub_menu_link" id="Abstract" href="/Team:Buenos_Aires/_abstract">Abstract</a></li> | ||
+ | |||
+ | </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> | ||
+ | |||
+ | <li><a class="sub_menu_link" id="Students" href="/Team:Buenos_Aires/_students">Students</a></li> | ||
+ | <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> | ||
+ | |||
+ | <a id="https://static.igem.org/mediawiki/2013/b/ba/Pepe1.jpg" href="#Project">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="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> | ||
+ | |||
+ | <!-- Model--> | ||
+ | <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> | ||
+ | |||
+ | <!-- 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> | ||
+ | |||
+ | |||
+ | <!-- 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> | ||
+ | |||
+ | <li><a class="sub_menu_link" id="Wetgallery" href="/Team:Buenos_Aires/_wetgallery">Gallery</a></li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- 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> | ||
+ | |||
+ | <!-- References --> | ||
+ | <li> | ||
+ | <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> | ||
+ | <h2>References</h2> | ||
+ | <ul> | ||
+ | <li>Our inspiration</li> | ||
+ | |||
+ | <li><a class="sub_menu_link" id="Ref" href="/Team:Buenos_Aires/_references">References</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <!-- Attribution --> | ||
+ | <li> | ||
+ | <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> | ||
+ | <h2>Attribution</h2> | ||
+ | <ul> | ||
+ | <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> | ||
+ | |||
+ | </ul> | ||
+ | </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> | ||
+ | |||
+ | |||
+ | <!--Here i put all the text that will open with links:--> | ||
+ | |||
+ | <!--PROJECT--> | ||
+ | |||
+ | <!--Objetive--> | ||
+ | <!-- <iframe class="restricted" id="textObj" scrolling="no"--> | ||
+ | <div class="text_loading"> Loading... </div> | ||
+ | <div class="texto" id="textExt"> Hola | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--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 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('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'); | ||
+ | |||
+ | if(i==0){ | ||
+ | openSubMenu($item, $sub_menu, el_image); | ||
+ | loadText($("#Summary")); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* 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); | ||
+ | |||
+ | |||
+ | loadText($sub_menu.find('.sub_menu_link')); | ||
+ | |||
+ | |||
+ | |||
+ | //}); | ||
+ | |||
+ | 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); | ||
+ | |||
+ | return false; | ||
+ | |||
+ | }); | ||
+ | |||
+ | }); | ||
+ | }, | ||
+ | |||
+ | |||
+ | loadText = function(link) { | ||
+ | |||
+ | $(".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) { | ||
+ | |||
+ | |||
+ | $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