"
Team:ETH Zurich/slidermapchip
From 2014.igem.org
(Difference between revisions)
(Created page with " <html> <img src="https://static.igem.org/mediawiki/2014/5/54/ETH_Zurich_Slider_Slide4.png" usemap="#map" id="map"/> <map id="map" name="map"><area shape="rect" alt="" title="" coords...") |
|||
| (13 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| - | |||
<html> | <html> | ||
| + | <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) | ||
| + | { | ||
| + | slider.redrawSlider(); | ||
| + | var container = $('#container1'); | ||
| + | var imgWidth = container.width(); | ||
| + | |||
| + | $( "#map1").each(function() { | ||
| + | $(this).css('height', 'auto', 'width', 'auto'); | ||
| + | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); | ||
| + | }); | ||
| + | |||
| + | container = $('#container2'); | ||
| + | imgWidth = container.width(); | ||
| + | |||
| + | $( "#map2").each(function() { | ||
| + | $(this).css('height', 'auto', 'width', 'auto'); | ||
| + | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); | ||
| + | }); | ||
| + | slider.redrawSlider(); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | $(document).ready(function(){ | ||
| + | |||
| + | $('#map1').mapster({ | ||
| + | fillColor: 'FFFFFF', | ||
| + | fillOpacity: 0.5, | ||
| + | isSelectable: false, | ||
| + | clickNavigate: true, | ||
| + | }); | ||
| + | |||
| + | $('#map2').mapster({ | ||
| + | fillColor: 'FFFFFF', | ||
| + | fillOpacity: 0.5, | ||
| + | isSelectable: false, | ||
| + | clickNavigate: true, | ||
| + | }); | ||
| + | |||
| + | |||
| + | |||
| + | $(window).resize( | ||
| + | function() | ||
| + | { | ||
| + | onWindowResize(); | ||
| + | }); | ||
| + | resize(true); | ||
| + | |||
| + | }); | ||
| + | |||
| + | </script> | ||
| - | <img src="https://static.igem.org/mediawiki/2014/ | + | <img src="https://static.igem.org/mediawiki/2014/0/0c/ETH_Zurich_Slider_Slide5.png" usemap="#map2" id="map2"/> |
| - | <map id=" | + | <map id="map2" name="map2"><area shape="rect" alt="" title="" coords="78,492,714,530" href="2014.igem.org/Team:ETH_Zurich/modeling/diffmodel" target="" /><area shape="rect" alt="" title="" coords="164,82,416,266" href="https://2014.igem.org/Team:ETH_Zurich/lab/chip" target="" /><area shape="rect" alt="" title="" coords="432,282,636,450" href="https://2014.igem.org/Team:ETH_Zurich/lab/chip#movies" target="" /><area shape="rect" alt="" title="" coords="428,84,634,268" href="https://2014.igem.org/Team:ETH_Zurich/lab/bead" target="" /><area shape="rect" alt="" title="" coords="164,282,418,450" href="https://2014.igem.org/Team:ETH_Zurich/lab/chip#Preparation" target="" /> |
| + | </map> | ||
</html> | </html> | ||
Latest revision as of 18:58, 17 October 2014
