Team:ETH Zurich/labblog/buttons

Revision as of 12:31, 1 September 2014 (view source)

Clormeau (Talk | contribs)

← Older edit

Latest revision as of 21:28, 17 October 2014 (view source)

Eledieu (Talk | contribs)

m

(149 intermediate revisions not shown)

Line 1:

<html>

+

<style>

+

#Container .mix{

+

display: none;

+

}

+

</style>

-

+

+

(function($) {

+

function img(url) {

+

var i = new Image;

+

i.src = url;

+

return i;

+

}

+

if ('naturalWidth' in (new Image)) {

+

$.fn.naturalWidth = function() { return this[0].naturalWidth; };

+

$.fn.naturalHeight = function() { return this[0].naturalHeight; };

+

return;

+

}

+

$.fn.naturalWidth = function() { return img(this[0].src).width; };

+

$.fn.naturalHeight = function() { return img(this[0].src).height; };

+

})(jQuery);

-

~~$(document).ready(function() {~~

-

~~$("article").show();~~

-

~~$("rect").on("click", function(){~~

-

~~var filtertag = $(this).attr('class');~~

-

~~$("article").hide().filter('.' + filtertag).show();~~

-

~~});~~

-

$(~~"text" "button"~~).on(~~"click"~~, function(){

+

function onWindowResize()

-

var ~~filtertag~~ = $(~~this~~).~~attr~~(~~'class'~~);

+

{

-

$(~~"article"~~).~~hide~~()~~.filter~~(~~'.' + filtertag~~)~~.show~~();

+

var curWidth = $(window).width(),

-

});

+

curHeight = $(window).height(),

-

});

+

checking=false;

+

if (checking) {

+

return;

+

}

+

checking = true;

+

window.setTimeout(

+

function() {

+

var newWidth = $(window).width(),

+

newHeight = $(window).height();

+

if (!(newWidth !== curWidth ||

+

newHeight !== curHeight)) {

+

resize(false);

+

}

+

checking=false;

+

}, 300);

+

}

-

~~</script>~~

+

function resize(initial) {

+

if (!initial)

+

{

+

var container = $('#container');

+

var imgWidth = 0.9*container.width();

-

~~<button class =~~ "~~plasmids~~"~~> Plasmids assembly </button>~~

+

$( "#map").each(function() {

-

~~<button class = "quorum"> Quorum sensing experiments </button>~~

+

$(this).css('height', 'auto', 'width', 'auto');

-

~~<button class = "beads"> Beads optimization </button>~~

+

$(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);

-

~~<button class = "milli"> Millifluidics </button>~~

+

});

-

~~<button class = "labres"> Experimental results </button><br/>~~

+

}

-

~~<button class = "reactions"> Reactions</button>~~

+

}

-

~~<button class = "parameter"> Parameter fitting </button>~~

+

-

~~<button class = "diffusion"> Diffusion model </button><br/>~~

+

-

~~<button class = "errorprop"> Error propagation </button><br/>~~

+

-

~~<button class = "det"> Deterministic model </button>~~

+

-

~~<button class = "stoc"> Stochastic model </button>~~

+

-

~~<button class = "modres"> Modeling results </button><br/>~~

+

-

~~<button class = "events"> Events </button>~~

+

$(document).ready(function(){

-

~~<button class = "interviews"> Interviews </button>~~

+

-

~~<button class = "media"> Media </button>~~

+

-

~~<button class = "survey"> Survey </button><br/>~~

+

-

~~<div style="text-align~~:~~center;">~~

+

$('#map').mapster({

-

~~<svg xmlns="http~~:~~//www~~.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="50%" y="0px" width="200" height="200" viewBox="200 0 1000 1000" enable-background="new 200 0 1000 1000" xml:space="preserve">

+

fillColor: 'FFFFFF',

+

fillOpacity: 0.5

+

});

-

~~<rect id="ball" class="all" style="cursor: pointer" x="200" width="500" height="500"/>~~

+

$(window).resize(

-

~~<text class="all" x="290" y="270" style="cursor: pointer" fill="#FFFFFF" font-size="100">View all</text>~~

+

function()

+

{

+

onWindowResize();

+

});

+

resize(true);

-

~~<rect id="blab" class="lab" style="cursor~~: ~~pointer" x="700" width="500" height="500"/>~~

+

$('#Container').mixItUp({

-

~~<text class="lab" x="850" y="270" style="cursor~~: ~~pointer" fill="#FFFFFF" font-size="100">Lab</text>~~

+

load: {

+

filter: 'none'

+

},

+

controls: {

+

toggleFilterButtons: true,

+

toggleLogic: 'or'

+

}

+

});

-

~~<rect id="bmeetings" class="meetings" style="cursor: pointer" x="200" y="500" width="500" height="500"/>~~

-

~~<text class="meetings" x="260" y="710" style="cursor: pointer" fill="#FFFFFF" font-size="100">~~

-

~~<tspan x="260">Weekly</tspan>~~

-

~~<tspan x="260" dy="150">Meetings</tspan>~~

-

~~</text>~~

-

~~<rect id=~~"~~bmodeling~~" ~~class=~~"~~modeling~~" ~~style~~=~~"cursor: pointer" x="700" y="500" width="500" height="500"/>~~

+

$("a#insidelink").on("click", function(){

-

~~<text class="modeling" x="770" y="770" style="cursor: pointer" fill="~~#~~FFFFFF" font-size="100">Modeling</text>~~

+

var targetid = $(this).attr('targetid');

-

~~</svg>~~

+

$('article#'+targetid).show();

+

});

-

~~<br/>~~

+

});

-

~~<a href="#" class="link-sort-list asc">Oldest~~</a>

+

</script>

-

<~~a href~~="#" class="~~link~~-~~sort~~-~~list desc~~">~~Newest~~</a>

+

-

<br/>

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

<area shape="poly" alt="" title="" coords="1916,1636,1536,2268,2304,2268" href="" class="filter" data-filter=".modeling

+

" target="" />

+

+

<area shape="poly" alt="" title="" coords="3072,1836,3336,2268,2560,2268,2948,1640" href="" class="filter" data-filter=".human

+

" target="" />

+

+

+

+

</map>

</div>

+

</center>

</html>

@@ Line 1: / Line 1: @@
 <html>
+<style>
+#Container .mix{
+	display: none;
+}
+</style>
-<script>
+<script type="text/javascript">
+(function($) {
+function img(url) {
+var i = new Image;
+i.src = url;
+return i;
+}
+if ('naturalWidth' in (new Image)) {
+$.fn.naturalWidth = function() { return this[0].naturalWidth; };
+$.fn.naturalHeight = function() { return this[0].naturalHeight; };
+return;
+}
+$.fn.naturalWidth = function() { return img(this[0].src).width; };
+$.fn.naturalHeight = function() { return img(this[0].src).height; };
+})(jQuery);
-$(document).ready(function() {
-    $("article").show();
-    $("rect").on("click", function(){
-        var filtertag = $(this).attr('class');
-        $("article").hide().filter('.' + filtertag).show();
-    });
-    $("text" "button").on("click", function(){
+function onWindowResize()
-         var filtertag = $(this).attr('class');
+{
-        $("article").hide().filter('.' + filtertag).show();
+   var curWidth = $(window).width(),
-    });
+   curHeight = $(window).height(),
-});
+   checking=false;
+   if (checking) {
+      return;
+   }
+   checking = true;
+   window.setTimeout(
+     function() {
+         var newWidth = $(window).width(),
+            newHeight = $(window).height();
+        if (!(newWidth !== curWidth ||
+            newHeight !== curHeight)) {
+            resize(false);
+        }
+        checking=false;
+    }, 300);
+}
-</script>
+function resize(initial) {
+if (!initial)
+{
+     var container =  $('#container');
+     var imgWidth = 0.9*container.width();
-<button class = "plasmids"> Plasmids assembly </button>
+   $( "#map").each(function() {
-<button class = "quorum"> Quorum sensing experiments </button>
+      $(this).css('height', 'auto', 'width', 'auto');
-<button class = "beads"> Beads optimization </button>
+      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);
-<button class = "milli"> Millifluidics </button>
+   });
-<button class = "labres"> Experimental results </button><br/>
+}
-<button class = "reactions"> Reactions</button>
+}
-<button class = "parameter"> Parameter fitting </button>
-<button class = "diffusion"> Diffusion model </button><br/>
-<button class = "errorprop"> Error propagation </button><br/>
-<button class = "det"> Deterministic model </button>
-<button class = "stoc"> Stochastic model </button>
-<button class = "modres"> Modeling results </button><br/>
-<button class = "events"> Events </button>
+$(document).ready(function(){
-<button class = "interviews"> Interviews </button>
-<button class = "media"> Media </button>
-<button class = "survey"> Survey </button><br/>
-<div style="text-align:center;">
+  $('#map').mapster({
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="50%" y="0px" width="200" height="200" viewBox="200 0 1000 1000" enable-background="new 200 0 1000 1000" xml:space="preserve">
+fillColor: 'FFFFFF',
+fillOpacity: 0.5
+});
-<rect id="ball" class="all" style="cursor: pointer" x="200" width="500" height="500"/>
+$(window).resize(
-<text class="all" x="290" y="270" style="cursor: pointer" fill="#FFFFFF" font-size="100">View all</text>
+  function()
+  {
+onWindowResize();
+  });
+resize(true);
-<rect id="blab" class="lab" style="cursor: pointer" x="700" width="500" height="500"/>
+$('#Container').mixItUp({
-<text class="lab" x="850" y="270" style="cursor: pointer" fill="#FFFFFF" font-size="100">Lab</text>
+	load: {
+		filter: 'none'
+	},
+	controls: {
+		toggleFilterButtons: true,
+		toggleLogic: 'or'
+	}
+});
-<rect id="bmeetings" class="meetings" style="cursor: pointer" x="200" y="500" width="500" height="500"/>
-<text class="meetings" x="260" y="710" style="cursor: pointer" fill="#FFFFFF" font-size="100">
-<tspan x="260">Weekly</tspan>
-<tspan x="260" dy="150">Meetings</tspan>
-</text>
-<rect id="bmodeling" class="modeling" style="cursor: pointer" x="700" y="500" width="500" height="500"/>
+$("a#insidelink").on("click", function(){
-<text class="modeling" x="770" y="770" style="cursor: pointer" fill="#FFFFFF" font-size="100">Modeling</text>
+       var targetid = $(this).attr('targetid');
-</svg>
+        $('article#'+targetid).show();
+                                               });
-<br/>
+});
-<a href="#" class="link-sort-list asc">Oldest</a>
+</script>
-<a href="#" class="link-sort-list desc">Newest</a>
+<center>
-<br/>
+<div id="container" class="controls" style="width:700px;">
+<img usemap="#map" id="map" src="/wiki/images/9/90/ETH_Zurich_Blogbuttons.png" style="width:700px;"/>
+<map id="map" name="map">
+<area shape="poly" alt="" title="" coords="648,872,172,1080,368,1436,1000,1488,1124,1324" href="" class="filter" data-filter=".integrase" target="" />
+<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="" />
+<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="" />
+<area shape="poly" alt="" title="" coords="340,2396,1308,2340,1476,1912,776,1816,528,1952" href="" class="filter" data-filter=".plasmids" target="" />
+<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="" />
+<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="" />
+<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="" />
+<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="" />
+<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="" />
+<area shape="poly" alt="" title="" coords="4060,1456,3852,1980,3916,2424,4392,2344,4573,1856" href="" class="filter" data-filter=".qsmodule" target="" />
+<area shape="poly" alt="" title="" coords="3692,692,3600,1212,4020,1404,4336,1316,4228,836" href="" class="filter" data-filter=".school" target="" />
+<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="" />
+<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="" />
+<area shape="poly" alt="" title="" coords="1916,1636,1536,2268,2304,2268" href="" class="filter" data-filter=".modeling
+" target="" />
+<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="" />
+<area shape="poly" alt="" title="" coords="3072,1836,3336,2268,2560,2268,2948,1640" href="" class="filter" data-filter=".human
+" target="" />
+<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="" />
+<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="" />
+<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
 </div>
+</center>
 </html>

Team:ETH Zurich/labblog/buttons

From 2014.igem.org

Latest revision as of 21:28, 17 October 2014