|
|
| (95 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($) { |
| - | $('#map').mapster({
| + | function img(url) { |
| - | fillColor: '2C2F3D',
| + | var i = new Image; |
| - | fillOpacity: 0.5,
| + | i.src = url; |
| - | clickNavigate: true /*,
| + | return i; |
| - | stroke: true,
| + | } |
| - | strokeColor: 'c2d8f1',
| + | |
| - | strokeOpacity: 0.9,
| + | if ('naturalWidth' in (new Image)) { |
| - | strokeWidth: 2,
| + | $.fn.naturalWidth = function() { return this[0].naturalWidth; }; |
| - | clickNavigate: true */
| + | $.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); |
| | | | |
| - | $("article").show();
| |
| | | | |
| - | $("a#insidelink, area, button").on("click", function(){
| |
| - | var filtertag = $(this).attr('class');
| |
| - | $("article").hide().filter('.' + filtertag).show();
| |
| - | });
| |
| | | | |
| - | }); | + | function onWindowResize() |
| | + | { |
| | + | 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(); |
| | | | |
| - | <center>
| + | $( "#map").each(function() { |
| - | <img usemap="#map" id="map" src="/wiki/images/9/90/ETH_Zurich_Blogbuttons.png" style="width:90%;"/>
| + | $(this).css('height', 'auto', 'width', 'auto'); |
| - | <map id="map" name="map"><area shape="poly" alt="" title="" coords="2473,4,1672,1492,1959,1324,2008,1476,2060,1458,2134,1295,2648,1540,2652,1507,2833,1404,3068,1604,3104,1656,3296,1544" class="all" href="" target="" /><area shape="poly" alt="" title="" coords="1544,2132,1744,2520,2176,2588,2236,2552,2372,2332,2200,2040" class="plasmids" href="" target="" /><area shape="poly" alt="" title="" coords="1136,1948,972,2064,1000,2348,1224,2564,1712,2556,1476,2120" class="slams" href="" target="" /><area shape="poly" alt="" title="" coords="736,2160,263,2379,458,2728,1096,2780,1212,2612" class="integraseexp" href="" target="" /><area shape="poly" alt="" title="" coords="92,2936,464,2772,1092,2800,1160,3100,872,3064,500,3268" class="interviews" href="" target="" /><area shape="poly" alt="" title="" coords="426,3692,632,3220,881,3104,1564,3200,1392,3640" class="crosstalkexp" href="" target="" /><area shape="poly" alt="" title="" coords="532,4028,624,3731,1387,3682,1416,3928,1508,3972,884,4120" class="parameter" href="" target="" /><area shape="poly" alt="" title="" coords="1628,3200,1960,3664,1928,3956,1604,3956,1458,3892,1436,3656" class="" href="" target="" /><area shape="poly" alt="" title="" coords="2012,2940,1615,3564,2392,3560" class="modeling" href="" target="" /><area shape="poly" alt="" title="" coords="2016,3664,1963,4088,2376,4573,2608,4172,2520,3660,2228,3784" class="biobricks" href="" target="" /><area shape="poly" alt="" title="" coords="1640,4008,1463,4411,1759,4631,2280,4528,1908,4112,1920,4008" class="diffusion" href="" target="" /><area shape="poly" alt="" title="" coords="2466,4895,2430,4643,2660,4212,3132,4340,3464,4617,3136,4840" class="hpcollaboration" href="" target="" /><area shape="poly" alt="" title="" coords="3944,3772,4308,3956,4336,4504,3504,4572,3212,4324,3316,4012" class="qsexperiments" href="" target="" /><area shape="poly" alt="" title="" coords="3420,3108,3868,3276,3936,3728,3308,3960,3248,3652" class="openhouse" href="" target="" /><area shape="poly" alt="" title="" coords="2520,2092,2136,2719,2902,2712" class="lab" href="" target="" /><area shape="poly" alt="" title="" coords="2172,2788,2088,2924,2448,3496,2592,3492,2944,2924,2864,2788" class="meetings" href="" target="" /><area shape="poly" alt="" title="" coords="2584,3640,2869,3478,3188,3652,3244,3984,3160,4308,2668,4152" class="whole" href="" target="" /><area shape="poly" alt="" title="" coords="3040,2944,2660,3556,2724,3556,2868,3476,3012,3556,3420,3560" class="human" href="" target="" /><area shape="poly" alt="" title="" coords="3084,2160,2884,2376,2944,2620,3412,3068,3628,2544" class="integrasemod" href="" target="" /><area shape="poly" alt="" title="" coords="3788,1984,3692,2504,4112,2700,4424,2604,4324,2132" class="school" href="" target="" /><area shape="poly" alt="" title="" coords="3424,1476,3108,1660,3088,2100,3640,2500,3732,1944" class="millifluidics" href="" target="" /><area shape="poly" alt="" title="" coords="2596,1900,3032,2116,2828,2336,2692,2364,2524,2088,2396,2288,2252,2036" class="survey" href="" target="" /><area shape="poly" alt="" title="" coords="1348,1676,1959,1321,2164,2016,1560,2104,1364,1948" class="stochastic" href="" target="" /><area shape="poly" alt="" title="" coords="4148,2744,4664,3152,4476,3644,4008,3724,3944,3268" class="qsmodule" href="" target="" /><area shape="poly" alt="" title="" coords="528,4700,1344,4552,1568,4008,928,4172,524,4084" class="beads" href="" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
| + | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); |
| - | </center>
| + | }); |
| | + | } |
| | | | |
| | + | } |
| | | | |
| - | <div id="top" style="text-align:center;" height="500px">
| + | $(document).ready(function(){ |
| - | <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" viewBox="200 0 1500 1500" enable-background="new 200 0 1500 1500" xml:space="preserve">
| + | |
| | | | |
| - | <g class="all" id="red" style="text-decoration:none;">
| + | $('#map').mapster({ |
| - | <rect style="cursor: pointer" x="200" width="500" height="500"></rect>
| + | fillColor: 'FFFFFF', |
| - | <text x="290" y="270" style="cursor: pointer" fill="#FFFFFF" font-size="100">View all</text>
| + | fillOpacity: 0.5 |
| - | </g>
| + | }); |
| | | | |
| - | <g class="lab" id="green" style="text-decoration:none;">
| + | $(window).resize( |
| - | <rect style="cursor: pointer" x="700" width="500" height="500"></rect>
| + | function() |
| - | <text x="850" y="270" style="cursor: pointer" fill="#FFFFFF" font-size="100">Lab</text>
| + | { |
| - | </g>
| + | onWindowResize(); |
| | + | }); |
| | + | resize(true); |
| | | | |
| - | <g class="modeling" href="#" id="blue" style="text-decoration:none;">
| + | $('#Container').mixItUp({ |
| - | <rect style="cursor: pointer" x="200" y="500" width="500" height="500"></rect>
| + | load: { |
| - | <text x="270" y="770" style="cursor: pointer" fill="#FFFFFF" font-size="100">Modeling</text>
| + | filter: 'none' |
| - | </g>
| + | }, |
| | + | controls: { |
| | + | toggleFilterButtons: true, |
| | + | toggleLogic: 'or' |
| | + | } |
| | + | }); |
| | | | |
| - | <g class="meetings" href="#" id="red" style="text-decoration:none;">
| |
| - | <rect style="cursor: pointer" x="700" y="500" width="500" height="500"></rect>
| |
| - | <text x="260" y="710" style="cursor: pointer" fill="#FFFFFF" font-size="100">
| |
| - | <tspan x="760">Weekly</tspan>
| |
| - | <tspan x="760" dy="150">Meetings</tspan>
| |
| - | </text>
| |
| - | </g>
| |
| | | | |
| - | </svg>
| + | $("a#insidelink").on("click", function(){ |
| | + | var targetid = $(this).attr('targetid'); |
| | + | $('article#'+targetid).show(); |
| | + | }); |
| | | | |
| - | <!--
| + | }); |
| - | <br/>
| + | |
| - | <a href="#" class="link-sort-list asc">Oldest</a>
| + | |
| | | | |
| - | <a href="#" class="link-sort-list desc">Newest</a>
| + | </script> |
| - | <br/>
| + | |
| - | -->
| + | |
| | | | |
| | + | <center> |
| | + | <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> | | </div> |
| | + | </center> |
| | | | |
| - | <!--
| |
| - | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 200" enable-background="new 0 0 200 200" xml:space="preserve" height="200">
| |
| - | <path fill="#1EB2E1" d="M434.5,116.1l-44.7,20.7l14.9,41.8c17.6,4.6,34.5,11.6,50.2,20.8l40.7-19.4l-9.2-42.2L434.5,116.1z"></path>
| |
| - | <polygon fill="#CD3C28" points="270.7,127.2 321.1,128.2 326,85 296,68 265.3,87.8 "></polygon>
| |
| - | <polygon fill="#CD3C28" points="196.1,152.7 211,178.8 247.5,196.2 244.2,171.4 210.5,142.5 "></polygon>
| |
| - | <polygon fill="#60C914" points="231.6,86.1 219.2,105.4 216.6,133.2 247.4,159.6 260.2,131.7 254.5,89.8 "></polygon>
| |
| - | <polygon fill="#1EB2E1" points="143.2,94.2 141.1,138.3 187.5,145.3 205.6,132.5 208.1,106.2 172.7,81.3 "></polygon>
| |
| - | <polygon fill="#CD3C28" points="183,42.2 178.9,72.2 212.3,95.7 223.2,78.7 219.2,35 198.5,27.6 "></polygon>
| |
| - | <polygon fill="#1EB2E1" points="230.3,35.3 234,75.3 258.2,79.3 287.9,60.1 263.6,27.7 "></polygon>
| |
| - | <polygon fill="#60C914" points="282.7,5.1 272.5,21.3 296.2,52.9 329.1,15.9 319.5,0 "></polygon>
| |
| - | <polygon fill="#1EB2E1" points="338.6,21.7 304.5,60.1 332.6,76.1 395.6,57.7 407.9,31 381.8,15.8 "></polygon>
| |
| - | <path fill="#1EB2E1" d="M258.7,196.7c14.4-7.9,29.6-14,45.5-18.1l14-39.4l-48.9-1L255,169.4L258.7,196.7z"></path>
| |
| - | <path fill="#60C914" d="M337,88.7l-4.5,41.2c0.2,0,0.3,0,0.5,0c7-1,14.1-1.9,21.5-1.9h1.8c7.9,0,16.8-0.1,25.6,0.9l44.1-20.6
| |
| - | L397.4,69L337,88.7z"></path><path fill="#60C914" d="M137.1,148.9l-28.6,26.1l17.1,38.5l38.7,4.1c10.6-13.1,22.6-25.1,35.6-35.8l-14.5-25.6L137.1,148.9z"></path>
| |
| - | <polygon fill="#1EB2E1" points="469.8,53.3 501.1,76.4 535.7,69.6 521.2,38.8 485.7,20 453.1,26.4 "></polygon><polygon fill="#CD3C28" points="505,86.8 497.6,129 544.3,134.6 562.3,98.8 539.5,80.4 "></polygon>
| |
| - | <polygon fill="#60C914" points="486.9,126.1 494.2,84.5 467.5,64.9 442.3,107.6 "></polygon>
| |
| - | <polygon fill="#CD3C28" points="418.7,33.8 405.9,61.8 433.9,100.2 459.4,57 442.6,30 "></polygon>
| |
| - | <polygon fill="#CD3C28" points="70.9,161.7 96.6,167.3 128.7,140.4 131.3,96.3 98,102 70.5,128.2 "></polygon>
| |
| - | -->
| |
| - |
| |
| - | </svg>
| |
| | </html> | | </html> |
"
