Team:ETH Zurich/human/overview
From 2014.igem.org
Line 1: | Line 1: | ||
{{:Team:ETH Zurich/tpl/head|Overview}} | {{:Team:ETH Zurich/tpl/head|Overview}} | ||
+ | <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); | ||
+ | |||
+ | |||
+ | |||
+ | 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); | ||
+ | } | ||
+ | |||
+ | function resize(initial) { | ||
+ | if (!initial) | ||
+ | { | ||
+ | var container = $('#article'); | ||
+ | var imgWidth = container.width(); | ||
+ | |||
+ | $( "#map" ).each(function() { | ||
+ | $(this).css('height', 'auto', 'width', 'auto'); | ||
+ | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $('#map').mapster({ | ||
+ | fillColor: '2C2F3D', | ||
+ | fillOpacity: 0.5, | ||
+ | clickNavigate: true /*, | ||
+ | stroke: true, | ||
+ | strokeColor: 'c2d8f1', | ||
+ | strokeOpacity: 0.9, | ||
+ | strokeWidth: 2, | ||
+ | clickNavigate: true */ | ||
+ | }); | ||
+ | |||
+ | |||
+ | $(window).resize( | ||
+ | function() | ||
+ | { | ||
+ | onWindowResize(); | ||
+ | }); | ||
+ | resize(true); | ||
+ | }); | ||
+ | </script> | ||
<html><article> | <html><article> |
Revision as of 08:42, 1 October 2014
Overview
<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);
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);
}
function resize(initial) { if (!initial) {
var container = $('#article'); var imgWidth = container.width();
$( "#map" ).each(function() { $(this).css('height', 'auto', 'width', 'auto'); $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); });
}
}
$(document).ready(function(){
$('#map').mapster({ fillColor: '2C2F3D', fillOpacity: 0.5, clickNavigate: true /*, stroke: true, strokeColor: 'c2d8f1', strokeOpacity: 0.9, strokeWidth: 2, clickNavigate: true */ });
$(window).resize(
function() {
onWindowResize();
});
resize(true); }); </script>