|
|
(286 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| + | <style> |
| + | #Container .mix{ |
| + | display: none; |
| + | } |
| + | </style> |
| | | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
- | $(document).ready(
| + | (function($) { |
- | function() | + | function img(url) { |
- | { | + | var i = new Image; |
- | $(".ball").click(
| + | i.src = url; |
- | function()
| + | return i; |
- | {
| + | } |
- | $(".plasmids").show();
| + | |
- | $(".quorum").show();
| + | if ('naturalWidth' in (new Image)) { |
- | $(".beads").show();
| + | $.fn.naturalWidth = function() { return this[0].naturalWidth; }; |
- | $(".milli").show();
| + | $.fn.naturalHeight = function() { return this[0].naturalHeight; }; |
- | $(".labres").show();
| + | return; |
- | $(".parameter").show();
| + | } |
- | $(".diffusion").show();
| + | $.fn.naturalWidth = function() { return img(this[0].src).width; }; |
- | $(".error").show();
| + | $.fn.naturalHeight = function() { return img(this[0].src).height; }; |
- | $(".det").show();
| + | })(jQuery); |
- | $(".stoc").show();
| + | |
- | $(".modres").show();
| + | |
- | $(".events").show();
| + | |
- | $(".interviews").show();
| + | |
- | $(".media").show();
| + | |
- | $(".survey").show();
| + | |
- | $(".meetings").show();
| + | |
- | });
| + | |
| | | |
- | $(".bmodeling").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").show();
| |
- | $(".diffusion").show();
| |
- | $(".error").show();
| |
- | $(".det").show();
| |
- | $(".stoc").show();
| |
- | $(".modres").show();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
| | | |
- | $(".blab").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").show();
| |
- | $(".quorum").show();
| |
- | $(".beads").show();
| |
- | $(".milli").show();
| |
- | $(".labres").show();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
| | | |
- | $(".bhuman").click(
| + | function onWindowResize() |
- | function()
| + | { |
- | {
| + | var curWidth = $(window).width(), |
- | $(".plasmids").hide();
| + | curHeight = $(window).height(), |
- | $(".quorum").hide();
| + | checking=false; |
- | $(".beads").hide();
| + | if (checking) { |
- | $(".milli").hide();
| + | return; |
- | $(".labres").hide();
| + | } |
- | $(".parameter").hide();
| + | checking = true; |
- | $(".diffusion").hide();
| + | window.setTimeout( |
- | $(".error").hide();
| + | function() { |
- | $(".det").hide();
| + | var newWidth = $(window).width(), |
- | $(".stoc").hide();
| + | newHeight = $(window).height(); |
- | $(".modres").hide();
| + | if (!(newWidth !== curWidth || |
- | $(".events").show();
| + | newHeight !== curHeight)) { |
- | $(".interviews").show();
| + | resize(false); |
- | $(".media").show();
| + | } |
- | $(".survey").show();
| + | checking=false; |
- | $(".meetings").hide(); | + | }, 300); |
- | });
| + | } |
| | | |
- | $(".bplasmids").click(
| + | function resize(initial) { |
- | function()
| + | if (!initial) |
- | {
| + | { |
- | $(".plasmids").show();
| + | var container = $('#container'); |
- | $(".quorum").hide();
| + | var imgWidth = 0.9*container.width(); |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bquorum").click(
| + | $( "#map").each(function() { |
- | function()
| + | $(this).css('height', 'auto', 'width', 'auto'); |
- | {
| + | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); |
- | $(".plasmids").hide();
| + | }); |
- | $(".quorum").show();
| + | } |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bbeads").click(
| + | } |
- | function()
| + | |
- | {
| + | |
- | $(".plasmids").hide();
| + | |
- | $(".quorum").hide();
| + | |
- | $(".beads").show();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bmilli").click(
| + | $(document).ready(function(){ |
- | function()
| + | |
- | {
| + | |
- | $(".plasmids").hide();
| + | |
- | $(".quorum").hide();
| + | |
- | $(".beads").hide();
| + | |
- | $(".milli").show();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".blabres").click( | + | $('#map').mapster({ |
- | function()
| + | fillColor: 'FFFFFF', |
- | {
| + | fillOpacity: 0.5 |
- | $(".plasmids").hide();
| + | }); |
- | $(".quorum").hide();
| + | |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").show();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bparameter").click(
| + | $(window).resize( |
| function() | | function() |
- | { | + | { |
- | $(".plasmids").hide();
| + | onWindowResize(); |
- | $(".quorum").hide();
| + | |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").show();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
| }); | | }); |
| + | resize(true); |
| | | |
- | $(".bdiffusion").click(
| + | $('#Container').mixItUp({ |
- | function()
| + | load: { |
- | {
| + | filter: 'none' |
- | $(".plasmids").hide();
| + | }, |
- | $(".quorum").hide();
| + | controls: { |
- | $(".beads").hide();
| + | toggleFilterButtons: true, |
- | $(".milli").hide();
| + | toggleLogic: 'or' |
- | $(".labres").hide();
| + | } |
- | $(".parameter").hide();
| + | }); |
- | $(".diffusion").show();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".berror").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").show();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
| | | |
- | $(".bdet").click(
| + | $("a#insidelink").on("click", function(){ |
- | function()
| + | var targetid = $(this).attr('targetid'); |
- | {
| + | $('article#'+targetid).show(); |
- | $(".plasmids").hide();
| + | }); |
- | $(".quorum").hide();
| + | |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").show();
| + | |
- | $(".stoc").hide();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bstoc").click(
| + | }); |
- | function()
| + | |
- | {
| + | |
- | $(".plasmids").hide();
| + | |
- | $(".quorum").hide();
| + | |
- | $(".beads").hide();
| + | |
- | $(".milli").hide();
| + | |
- | $(".labres").hide();
| + | |
- | $(".parameter").hide();
| + | |
- | $(".diffusion").hide();
| + | |
- | $(".error").hide();
| + | |
- | $(".det").hide();
| + | |
- | $(".stoc").show();
| + | |
- | $(".modres").hide();
| + | |
- | $(".events").hide();
| + | |
- | $(".interviews").hide();
| + | |
- | $(".media").hide();
| + | |
- | $(".survey").hide();
| + | |
- | $(".meetings").hide();
| + | |
- | });
| + | |
| | | |
- | $(".bmodres").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").show();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
- |
| |
- | $(".bevents").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").show();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
- |
| |
- | $(".binterviews").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").show();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
- |
| |
- | $(".bmedia").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").show();
| |
- | $(".survey").hide();
| |
- | $(".meetings").hide();
| |
- | });
| |
- |
| |
- | $(".survey").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").show();
| |
- | $(".meetings").hide();
| |
- | });
| |
- |
| |
- |
| |
- | $(".bmeetings").click(
| |
- | function()
| |
- | {
| |
- | $(".plasmids").hide();
| |
- | $(".quorum").hide();
| |
- | $(".beads").hide();
| |
- | $(".milli").hide();
| |
- | $(".labres").hide();
| |
- | $(".parameter").hide();
| |
- | $(".diffusion").hide();
| |
- | $(".error").hide();
| |
- | $(".det").hide();
| |
- | $(".stoc").hide();
| |
- | $(".modres").hide();
| |
- | $(".events").hide();
| |
- | $(".interviews").hide();
| |
- | $(".media").hide();
| |
- | $(".survey").hide();
| |
- | $(".meetings").show();
| |
- | });
| |
- |
| |
- | });
| |
| </script> | | </script> |
| | | |
- | <button class = "ball"> View all </button> <br/> | + | <center> |
- | | + | <div id="container" class="controls" style="width:700px;"> |
- | <button class = "blab"> Lab </button> | + | <img usemap="#map" id="map" src="/wiki/images/9/90/ETH_Zurich_Blogbuttons.png" style="width:700px;"/> |
- | | + | <map id="map" name="map"> |
- | <button class = "bplasmids"> Plasmids assembly </button>
| + | <area shape="poly" alt="" title="" coords="648,872,172,1080,368,1436,1000,1488,1124,1324" href="" class="filter" data-filter=".integrase" target="" /> |
- | <button class = "bquorum"> Quorum sensing experiments </button> | + | <area shape="poly" alt="" title="" coords="1052,652,884,776,912,1064,1136,1268,1628,1264,1376,824" href="" class="filter" data-filter=".slams" target="" /> |
- | <button class = "bbeads"> Beads optimization </button>
| + | <area shape="poly" alt="" title="" coords="412,1976,780,1772,1060,1800,1000,1512,376,1476,-4,1652" href="" class="filter" data-filter='.interviews' target="" /> |
- | <button class = "bmilli"> Millifluidics </button> | + | <area shape="poly" alt="" title="" coords="340,2396,1308,2340,1476,1912,776,1816,528,1952" href="" class="filter" data-filter=".plasmids" target="" /> |
- | <button class = "blabres"> Experimental results </button> | + | <area shape="poly" alt="" title="" coords="532,2448,440,2740,792,2820,1420,2680,1320,2636,1296,2396" href="" class="filter" data-filter=".parameter" target="" /> |
- | | + | <area shape="poly" alt="" title="" coords="436,2788,436,3416,1252,3260,1480,2716,832,2880" href="" class="filter" data-filter=".milli" target="" /> |
- | <button class = "bmodeling"> Modeling </button><br/> | + | <area shape="poly" alt="" title="" coords="1668,3340,2196,3236,1816,2808,1828,2716,1552,2720,1384,3120" href="" class="filter" data-filter=".diffusion" target="" /> |
- | | + | <area shape="poly" alt="" title="" coords="2348,3342,2576,2920,3044,3056,3368,3324,3036,3548,2377,3604" href="" class="filter" data-filter=".hpcollaboration" target="" /> |
- | <button class = "bparameter"> Parameter fitting </button> | + | <area shape="poly" alt="" title="" coords="3852,2480,4216,2668,4244,3208,3412,3280,3124,3028,3232,2716" href="" class="filter" data-filter=".quorum" target="" /> |
- | <button class = "bdiffusion"> Diffusion model </button><br/> | + | <area shape="poly" alt="" title="" coords="2772,2188,2492,2352,2580,2860,3072,3012,3156,2688,3100,2360" href="" class="filter" data-filter=".whole" target="" /> |
- | <button class = "berror"> Error propagation </button><br/> | + | <area shape="poly" alt="" title="" coords="3336,1816,3236,2108,3336,2268,3192,2268,3160,2364,3216,2664,3840,2436,3776,1984" href="" class="filter" data-filter=".talks" target="" /> |
- | <button class = "bdet"> Deterministic model </button> | + | <area shape="poly" alt="" title="" coords="4060,1456,3852,1980,3916,2424,4392,2344,4573,1856" href="" class="filter" data-filter=".qsmodule" target="" /> |
- | <button class = "bstoc"> Stochastic model </button> | + | <area shape="poly" alt="" title="" coords="3692,692,3600,1212,4020,1404,4336,1316,4228,836" href="" class="filter" data-filter=".school" target="" /> |
- | <button class = "bmodres"> Modeling results </button> | + | <area shape="poly" alt="" title="" coords="2996,872,2796,1080,2856,1328,3320,1776,3540,1252" href="" class="filter" data-filter=".intmodule" data-filter=".intmodule" target="" /> |
- | | + | <area shape="poly" alt="" title="" coords="3020,364,3000,812,3548,1200,3644,652,3336,184" href="" class="filter" data-filter=".biobricks" target="" /> |
- | <button class = "bhuman"> Human practice </button> | + | <area shape="poly" alt="" title="" coords="2168,748,2512,612,2932,824,2736,1040,2612,1072,2428,796,2312,996" href="" class="filter" data-filter=".survey" target="" /> |
- | | + | <area shape="poly" alt="" title="" coords="2044,1428,2820,1428,2432,792" href="" class="filter" data-filter=".lab" target="" /> |
- | <button class = "bevents"> Events </button> | + | <area shape="poly" alt="" title="" coords="1916,1636,1536,2268,2304,2268" href="" class="filter" data-filter=".modeling |
- | <button class = "binterviews"> Interviews </button><br/> | + | " target="" /> |
- | <button class = "bmedia"> Media </button><br/> | + | <area shape="poly" alt="" title="" coords="2080,1492,2772,1496,2864,1632,2496,2208,2356,2200,1996,1628" href="" class="filter" data-filter=".meetings" target="" /> |
- | <button class = "bsurvey"> Survey </button> | + | <area shape="poly" alt="" title="" coords="3072,1836,3336,2268,2560,2268,2948,1640" href="" class="filter" data-filter=".human |
- | | + | " target="" /> |
- | <button class = "bmeetings"> Weekly meetings </button> | + | <area shape="poly" alt="" title="" coords="1924,2364,2140,2496,2428,2372,2516,2888,2292,3280,1876,2792" href="" class="filter" data-filter=".biobricks" target="" /> |
- | <!--
| + | <area shape="poly" alt="" title="" coords="1872,40,1252,388,1276,660,1468,812,2076,728" href="" class="filter" data-filter=".edinburgh" target="" /> |
- | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="200" height="200" viewBox="0 0 1000 1000" enable-background="new 0 0 300 200" xml:space="preserve">
| + | <area shape="poly" alt="" title="" coords="1188,1320,1644,1324,1552,1748,1512,1856,1124,1808,1064,1484" href="" class="filter" data-filter=".stochastic" target="" /> |
- | <rect class="bpcr" x="200" fill="#3FA9F5" width="224" height="224"/> | + | <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map> |
- | <text transform="matrix(1 0 0 1 257.7773 112)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test1</text> | + | </div> |
- | <rect class="ball" x="536" fill="#7AC943" width="224" height="224"/> | + | </center> |
- | <text transform="matrix(1 0 0 1 590.625 112)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test2</text> | + | |
- | <rect class="bgibson" x="200" y="336" fill="#FF7BAC" width="224" height="224"/> | + | |
- | <text transform="matrix(1 0 0 1 255.8555 448)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test3</text> | + | |
- | <rect class="ball" x="536" y="336" fill="#FF931E" width="224" height="224"/> | + | |
- | <text transform="matrix(1 0 0 1 588.8203 448)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test4</text> | + | |
- | </svg> | + | |
- | -->
| + | |
| | | |
| </html> | | </html> |