Team:ETH Zurich/modeling/overview
From 2014.igem.org
(Difference between revisions)
Line 10: | Line 10: | ||
<article> | <article> | ||
- | <img id=" | + | <img usemap="#map4" id="map4" src="http://www.image-maps.com/m/private/0/951lqn07g2eo21sr8na25lhl00_modeling-overview.png" border="0" width="920" orgWidth="920" orgHeight="1683" alt="" /> |
- | <map | + | <map id="map4" name="map4" width="920"> |
<area alt="" title="" href="https://2014.igem.org/Team:ETH_Zurich/modeling/qs" shape="rect" coords="7,82,367,531" style="outline:none;" target="_self" /> | <area alt="" title="" href="https://2014.igem.org/Team:ETH_Zurich/modeling/qs" shape="rect" coords="7,82,367,531" style="outline:none;" target="_self" /> | ||
<area alt="" title="" href="https://2014.igem.org/Team:ETH_Zurich/modeling/qs" shape="rect" coords="547,81,907,532" style="outline:none;" target="_self" /> | <area alt="" title="" href="https://2014.igem.org/Team:ETH_Zurich/modeling/qs" shape="rect" coords="547,81,907,532" style="outline:none;" target="_self" /> | ||
Line 19: | Line 19: | ||
<area shape="rect" coords="918,1681,920,1683" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_33863" /> | <area shape="rect" coords="918,1681,920,1683" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_33863" /> | ||
</map> | </map> | ||
+ | </article> | ||
+ | <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 (navigator.userAgent.match(/msie/i)) | ||
+ | { | ||
+ | if ($("#bxsliderText").parent().css("height") != $("#bxslider").parent().css("height")) | ||
+ | setTimeout(function() {$( "#bxsliderText" ).parent().css({"height": $("#bxslider").parent().css("height")});}, 100); | ||
+ | } | ||
+ | |||
+ | if (!initial) | ||
+ | { | ||
+ | var container = $('#bxslider > li'); | ||
+ | var imgWidth = container.width(); | ||
+ | |||
+ | $( "#map4" ).each(function() { | ||
+ | $(this).css('height', 'auto', 'width', 'auto'); | ||
+ | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | $(document).ready(function(){ | ||
+ | sliderText = $('#bxsliderText').bxSlider({'mode': 'fade', 'controls': false, 'pager': false, 'auto': false, "responsive": false, 'touch': false}); | ||
+ | slider = $('#bxslider').bxSlider({ 'auto': false, onSlideAfter: function(slideElement, oldIndex, newIndex){sliderText.goToSlide(newIndex);}, onSlideBefore: function(slideElement, oldIndex, newIndex){sliderText.goToSlide(newIndex);}}); | ||
+ | $('#bxsliderText').parent().css({"height": "100%", 'min-height' : '430px'}); | ||
+ | $('#bxsliderText').parent().parent().css({"height": "100%"}); | ||
+ | $('.bx-viewport #bxslider').bind('mousewheel', function(event, delta, deltaX, deltaY) { | ||
+ | event.preventDefault(); | ||
+ | if (delta < 0) {slider.goToNextSlide();} | ||
+ | else {slider.goToPrevSlide();} | ||
+ | }); | ||
+ | $('#map4').mapster({ | ||
+ | fillColor: 'c2d8f1', | ||
+ | fillOpacity: 0.9, /* | ||
+ | stroke: true, | ||
+ | strokeColor: 'c2d8f1', | ||
+ | strokeOpacity: 0.9, | ||
+ | strokeWidth: 2, */ | ||
+ | clickNavigate: true | ||
+ | }); | ||
+ | |||
+ | |||
+ | $(window).resize( | ||
+ | function() | ||
+ | { | ||
+ | onWindowResize(); | ||
+ | }); | ||
+ | resize(true); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </html> | ||
{{:Team:ETH Zurich/tpl/foot}} | {{:Team:ETH Zurich/tpl/foot}} |