Team:ETH Zurich/labblog/buttons

From 2014.igem.org

(Difference between revisions)
m
 
(294 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;
-
  {
+
}
-
    $(".dyn").show();
+
-
    $(".param").show();
+
if ('naturalWidth' in (new Image)) {
-
    $(".stead").show();
+
$.fn.naturalWidth = function() { return this[0].naturalWidth; };
-
    $(".single").show();
+
$.fn.naturalHeight = function() { return this[0].naturalHeight; };
-
    $(".diff").show();
+
return;
-
    $(".error").show();
+
}
-
    $(".pop").show();
+
$.fn.naturalWidth = function() { return img(this[0].src).width; };
-
    $(".det").show();
+
$.fn.naturalHeight = function() { return img(this[0].src).height; };
-
    $(".stoc").show();
+
})(jQuery);
-
    $(".mini").show();
+
-
    $(".gibs").show();
+
-
    $(".frag").show();
+
-
    $(".events").show();
+
-
    $(".inter").show();
+
-
    $(".media").show();
+
-
    $(".facs").show();
+
-
    $(".beads").show();
+
-
  });
+
-
  $(".bdyn").click(
 
-
  function()
 
-
  {
 
-
    $(".param").hide();
 
-
    $(".stead").hide();
 
-
    $(".single").hide();
 
-
    $(".diff").hide();
 
-
    $(".error").hide();
 
-
    $(".pop").hide();
 
-
    $(".det").hide();
 
-
    $(".stoc").hide();
 
-
    $(".mini").hide();
 
-
    $(".gibs").hide();
 
-
    $(".frag").hide();
 
-
    $(".events").hide();
 
-
    $(".inter").hide();
 
-
    $(".media").hide();
 
-
    $(".facs").hide();
 
-
    $(".beads").hide();
 
-
    $(".dyn").show();
 
-
  });
 
-
  $(".bparam").click(
 
-
  function()
 
-
  {
 
-
    $(".dyn").hide();
 
-
    $(".stead").hide();
 
-
    $(".single").hide();
 
-
    $(".diff").hide();
 
-
    $(".error").hide();
 
-
    $(".pop").hide();
 
-
    $(".det").hide();
 
-
    $(".stoc").hide();
 
-
    $(".mini").hide();
 
-
    $(".gibs").hide();
 
-
    $(".frag").hide();
 
-
    $(".events").hide();
 
-
    $(".inter").hide();
 
-
    $(".media").hide();
 
-
    $(".facs").hide();
 
-
    $(".beads").hide();
 
-
    $(".param").show();
 
-
  });
 
-
  $(".bstead").click(
+
function onWindowResize()  
-
  function()
+
{
-
  {
+
  var curWidth = $(window).width(),
-
    $(".dyn").hide();
+
  curHeight = $(window).height(),
-
    $(".param").hide();
+
  checking=false;
-
    $(".single").hide();
+
  if (checking) {
-
    $(".diff").hide();
+
      return;
-
    $(".error").hide();
+
  }
-
    $(".pop").hide();
+
  checking = true;
-
    $(".det").hide();
+
  window.setTimeout(
-
    $(".stoc").hide();
+
    function() {
-
    $(".mini").hide();
+
        var newWidth = $(window).width(),
-
    $(".gibs").hide();
+
            newHeight = $(window).height();
-
    $(".frag").hide();
+
        if (!(newWidth !== curWidth ||
-
    $(".events").hide();
+
            newHeight !== curHeight)) {
-
    $(".inter").hide();
+
            resize(false);  
-
    $(".media").hide();
+
        }
-
    $(".facs").hide();
+
        checking=false;
-
    $(".beads").hide();
+
     }, 300);
-
     $(".stead").show();
+
}
-
  });
+
-
  $(".bsingle").click(
+
function resize(initial) {
-
  function()
+
if (!initial)
-
  {
+
{
-
    $(".dyn").hide();
+
    var container =  $('#container');
-
    $(".param").hide();
+
    var imgWidth = 0.9*container.width();
-
    $(".stead").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".single").show();
+
-
  });
+
-
  $(".bdiff").click(
+
  $( "#map").each(function() {
-
  function()
+
      $(this).css('height', 'auto', 'width', 'auto');
-
  {
+
      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);  
-
    $(".dyn").hide();
+
  });
-
    $(".param").hide();
+
}
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".diff").show();
+
-
  });
+
-
  $(".berror").click(
+
}
-
  function()
+
-
  {
+
-
    $(".dyn").hide();
+
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".error").show();
+
-
  });
+
-
  $(".bpop").click(
+
$(document).ready(function(){
-
  function()
+
-
  {
+
-
    $(".dyn").hide();
+
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".pop").show();
+
-
  });
+
-
   $(".bdet").click(
+
   $('#map').mapster({
-
  function()
+
fillColor: 'FFFFFF',
-
  {
+
fillOpacity: 0.5
-
    $(".dyn").hide();
+
});
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".det").show();
+
-
  });
+
-
  $(".bstoc").click(
+
$(window).resize(
   function()
   function()
-
   {
+
   {  
-
    $(".dyn").hide();
+
onWindowResize();
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".stoc").show();
+
   });
   });
 +
resize(true);
-
  $(".bmini").click(
+
$('#Container').mixItUp({
-
  function()
+
load: {
-
  {
+
filter: 'none'
-
    $(".dyn").hide();
+
},
-
    $(".param").hide();
+
controls: {
-
    $(".stead").hide();
+
toggleFilterButtons: true,
-
    $(".single").hide();
+
toggleLogic: 'or'
-
    $(".diff").hide();
+
}
-
    $(".error").hide();
+
});
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".mini").show();
+
-
  });
+
-
  $(".bgibs").click(
 
-
  function()
 
-
  {
 
-
    $(".dyn").hide();
 
-
    $(".param").hide();
 
-
    $(".stead").hide();
 
-
    $(".single").hide();
 
-
    $(".diff").hide();
 
-
    $(".error").hide();
 
-
    $(".pop").hide();
 
-
    $(".det").hide();
 
-
    $(".stoc").hide();
 
-
    $(".mini").hide();
 
-
    $(".frag").hide();
 
-
    $(".events").hide();
 
-
    $(".inter").hide();
 
-
    $(".media").hide();
 
-
    $(".facs").hide();
 
-
    $(".beads").hide();
 
-
    $(".gibs").show();
 
-
  });
 
-
  $(".bfrag").click(
+
$("a#insidelink").on("click", function(){
-
  function()
+
      var targetid = $(this).attr('targetid');
-
  {
+
        $('article#'+targetid).show();
-
    $(".dyn").hide();
+
                                              });
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".facs").hide();
+
-
    $(".beads").hide();
+
-
    $(".frag").show();
+
-
  });
+
-
  $(".bfacs").click(
+
});
-
  function()
+
-
  {
+
-
    $(".param").hide();
+
-
    $(".stead").hide();
+
-
    $(".single").hide();
+
-
    $(".diff").hide();
+
-
    $(".error").hide();
+
-
    $(".pop").hide();
+
-
    $(".det").hide();
+
-
    $(".stoc").hide();
+
-
    $(".mini").hide();
+
-
    $(".gibs").hide();
+
-
    $(".frag").hide();
+
-
    $(".events").hide();
+
-
    $(".inter").hide();
+
-
    $(".media").hide();
+
-
    $(".dyn").hide();
+
-
    $(".beads").hide();
+
-
    $(".facs").show();
+
-
  });
+
-
  $(".bbeads").click(
 
-
  function()
 
-
  {
 
-
    $(".param").hide();
 
-
    $(".stead").hide();
 
-
    $(".single").hide();
 
-
    $(".diff").hide();
 
-
    $(".error").hide();
 
-
    $(".pop").hide();
 
-
    $(".det").hide();
 
-
    $(".stoc").hide();
 
-
    $(".mini").hide();
 
-
    $(".gibs").hide();
 
-
    $(".frag").hide();
 
-
    $(".events").hide();
 
-
    $(".inter").hide();
 
-
    $(".media").hide();
 
-
    $(".dyn").hide();
 
-
    $(".facs").hide();
 
-
    $(".beads").show();
 
-
  });
 
-
 
-
});
 
</script>
</script>
-
<button class = "ball"> View all </button>
+
<center>
-
<h1>Modeling</h1>
+
<div id="container" class="controls" style="width:700px;">
-
<button class = "bdyn"> Dynamic behavior </button>
+
<img usemap="#map" id="map" src="/wiki/images/9/90/ETH_Zurich_Blogbuttons.png" style="width:700px;"/>
-
<button class = "bparam"> Parameter fitting </button>
+
<map id="map" name="map">
-
<button class = "bsingle"> Single cell model </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 = "bdiff"> Diffusion model </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 = "berror"> Error propagation </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 = "bpop"> Population model </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 = "bdet"> Deterministic model </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="" />
-
<button class = "bstoc"> Stochastic model </button>
+
<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 = "bstead"> Steady states </button>
+
<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="" />
-
<h1>Lab</h1>
+
<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 = "bgibs"> Gibson Assembly</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 = "bmini"> Miniprep </button>
+
<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 = "bfrag"> Fragment preparation </button>
+
<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="" />
-
<h1>Human practice</h1>
+
<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 = "bevents"> Events</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 = "binter"> Interviews </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="" />
-
<button class = "bmedia"> Media </button>
+
<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 = "bfacs"> FACS </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="" />
-
<button class = "bbeads"> Beads </button>
+
<area shape="poly" alt="" title="" coords="2044,1428,2820,1428,2432,792" href="" class="filter" data-filter=".lab" target="" />
-
<!--
+
<area shape="poly" alt="" title="" coords="1916,1636,1536,2268,2304,2268" href="" class="filter" data-filter=".modeling
-
<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">
+
" target="" />
-
<rect class="bpcr" x="200" fill="#3FA9F5" width="224" height="224"/>
+
<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="" />
-
<text transform="matrix(1 0 0 1 257.7773 112)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test1</text>
+
<area shape="poly" alt="" title="" coords="3072,1836,3336,2268,2560,2268,2948,1640" href="" class="filter" data-filter=".human
-
<rect class="ball" x="536" fill="#7AC943" width="224" height="224"/>
+
" target="" />
-
<text transform="matrix(1 0 0 1 590.625 112)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test2</text>
+
<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="" />
-
<rect class="bgibson" x="200" y="336" fill="#FF7BAC" width="224" height="224"/>
+
<area shape="poly" alt="" title="" coords="1872,40,1252,388,1276,660,1468,812,2076,728" href="" class="filter" data-filter=".edinburgh" target="" />
-
<text transform="matrix(1 0 0 1 255.8555 448)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test3</text>
+
<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="ball" x="536" y="336" fill="#FF931E" width="224" height="224"/>
+
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
-
<text transform="matrix(1 0 0 1 588.8203 448)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test4</text>
+
</div>
-
</svg>
+
</center>
-
-->
+
</html>
</html>

Latest revision as of 21:28, 17 October 2014

Retrieved from "http://2014.igem.org/Team:ETH_Zurich/labblog/buttons"