Team:ETH Zurich/labblog/buttons

Revision as of 12:02, 8 July 2014 (view source)

Clormeau (Talk | contribs)

m

← Older edit

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

Eledieu (Talk | contribs)

m

(309 intermediate revisions not shown)

Line 1:

<html>

+

<style>

+

#Container .mix{

+

display: none;

+

}

+

</style>

-

$(~~document~~).~~ready~~(

+

(function($) {

-

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);

+

function onWindowResize()

{

-

$(".~~ball"~~).~~click~~(

+

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

-

~~function~~()

+

curHeight = $(window).height(),

-

{

+

checking=false;

-

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

+

if (checking) {

-

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

+

return;

-

});

+

}

+

checking = true;

+

window.setTimeout(

+

function() {

+

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

+

newHeight = $(window).height();

+

if (!(newWidth !== curWidth ||

+

newHeight !== curHeight)) {

+

resize(false);

+

}

+

checking=false;

+

}, 300);

+

}

-

$( ~~"rect"~~ )~~.hover(function~~() {

+

function resize(initial) {

-

$( ~~this ).fadeOut( 100~~ );

+

if (!initial)

-

~~$( this )~~.~~fadeIn~~( ~~500 );~~

+

{

-

});

+

var container = $('#container');

+

var imgWidth = 0.9*container.width();

-

$("~~.bpcr~~").~~click~~(

+

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

-

function()

+

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

-

{

+

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

-

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

+

});

-

$(".~~gibson"~~).~~hide~~();

+

}

-

});

+

-

$(".~~bgibson"~~).~~click~~(

+

}

+

$(document).ready(function(){

+

$('#map').mapster({

+

fillColor: 'FFFFFF',

+

fillOpacity: 0.5

+

});

+

$(window).resize(

function()

-

{

+

{

-

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

+

onWindowResize();

-

~~$(".PCR").hide~~();

+

});

+

resize(true);

+

$('#Container').mixItUp({

+

load: {

+

filter: 'none'

+

},

+

controls: {

+

toggleFilterButtons: true,

+

toggleLogic: 'or'

+

}

});

+

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

+

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

+

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

+

});

+

});

+

</script>

-

<~~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~~">

+

-

<~~rect class~~="~~bpcr~~" x="~~200~~" ~~fill~~="~~#3FA9F5~~" ~~width~~="~~224~~" ~~height~~="~~224~~"/>

+

-

<~~text transform~~="~~matrix(1 0 0 1 257.7773 112)~~" ~~fill~~="~~#FFFFFF~~" ~~font~~-~~family~~="~~'Skia~~-~~Regular~~'" ~~font~~-~~size~~="48">~~Test1~~</~~text~~>

+

-

<~~rect class~~="~~ball~~" x="~~536~~" ~~fill~~="~~#7AC943~~" ~~width~~="~~224~~" ~~height~~="~~224~~"/>

+

-

<~~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~~>

+

+

+

+

+

+

+

+

+

+

+

+

+

<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 type="text/javascript">
-$(document).ready(
+(function($) {
-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);
+function onWindowResize()
 {
-  $(".ball").click(
+   var curWidth = $(window).width(),
-  function()
+   curHeight = $(window).height(),
-  {
+   checking=false;
-    $(".PCR").show();
+   if (checking) {
-    $(".gibson").show();
+      return;
-  });
+   }
+   checking = true;
+   window.setTimeout(
+     function() {
+        var newWidth = $(window).width(),
+            newHeight = $(window).height();
+        if (!(newWidth !== curWidth ||
+            newHeight !== curHeight)) {
+            resize(false);
+        }
+        checking=false;
+    }, 300);
+}
-  $( "rect" ).hover(function() {
+function resize(initial) {
-    $( this ).fadeOut( 100 );
+if (!initial)
-    $( this ).fadeIn( 500 );
+{
-  });
+     var container =  $('#container');
+     var imgWidth = 0.9*container.width();
-  $(".bpcr").click(
+   $( "#map").each(function() {
-  function()
+      $(this).css('height', 'auto', 'width', 'auto');
-  {
+      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);
-    $(".PCR").show();
+   });
-    $(".gibson").hide();
+}
-  });
-   $(".bgibson").click(
+}
+$(document).ready(function(){
+   $('#map').mapster({
+fillColor: 'FFFFFF',
+fillOpacity: 0.5
+});
+$(window).resize(
    function()
    {
-    $(".gibson").show();
+onWindowResize();
-    $(".PCR").hide();
    });
+resize(true);
+$('#Container').mixItUp({
+	load: {
+		filter: 'none'
+	},
+	controls: {
+		toggleFilterButtons: true,
+		toggleLogic: 'or'
+	}
 });
+$("a#insidelink").on("click", function(){
+       var targetid = $(this).attr('targetid');
+        $('article#'+targetid).show();
+                                               });
+});
 </script>
-<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">
+<center>
-<rect class="bpcr" x="200" fill="#3FA9F5" width="224" height="224"/>
+<div id="container" class="controls" style="width:700px;">
-<text transform="matrix(1 0 0 1 257.7773 112)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test1</text>
+<img usemap="#map" id="map" src="/wiki/images/9/90/ETH_Zurich_Blogbuttons.png" style="width:700px;"/>
-<rect class="ball" x="536" fill="#7AC943" width="224" height="224"/>
+<map id="map" name="map">
-<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="648,872,172,1080,368,1436,1000,1488,1124,1324" href="" class="filter" data-filter=".integrase" target="" />
-<rect class="bgibson" x="200" y="336" fill="#FF7BAC" width="224" height="224"/>
+<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="" />
-<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="412,1976,780,1772,1060,1800,1000,1512,376,1476,-4,1652" href="" class="filter" data-filter='.interviews' target="" />
-<rect class="ball" x="536" y="336" fill="#FF931E" width="224" height="224"/>
+<area shape="poly" alt="" title="" coords="340,2396,1308,2340,1476,1912,776,1816,528,1952" href="" class="filter" data-filter=".plasmids" target="" />
-<text transform="matrix(1 0 0 1 588.8203 448)" fill="#FFFFFF" font-family="'Skia-Regular'" font-size="48">Test4</text>
+<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="" />
-</svg>
+<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