Team:ETH Zurich/project/overview/grid

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
 +
<article id="article">
 +
<h1>Images in the Tooltip</h1>
 +
<IMG SRC="/wiki/images/d/d9/ETH_Zurich_GridGlowing.png" usemap="#map" id="mapTest">
 +
<map id="map" name="map">
 +
<area shape="circle" title="" alt="" coords="281,26,17" href="javascript:alert('foo');" target="" id="age" class="showTip L1" />
 +
</map>
-
<title>Demo</title>
 
-
 
-
<script src="http://www.dyn-web.com/code/tooltips/js/dw_tooltip_c.js" type="text/javascript"></script>
 
<script type="text/javascript">
<script type="text/javascript">
-
/* 2 functions that can be used to vary tooltip width according to image width:
+
(function($) {
-
dw_Tooltip.wrapImageToWidth and dw_Tooltip.wrapToWidth
+
function img(url) {
-
See www.dyn-web.com/code/tooltips/documentation2.php#wrapFn for info */
+
var i = new Image;
-
dw_Tooltip.defaultProps = {
+
i.src = url;
-
    //supportTouch: true, // set false by default
+
return i;
-
    wrapFn: dw_Tooltip.wrapImageToWidth
+
}
}
 +
 +
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);
-
// Problems, errors? See http://www.dyn-web.com/tutorials/obj_lit.php#syntax
 
-
dw_Tooltip.content_vars = {
 
-
    L1: {
 
-
        img: 'https://static.igem.org/mediawiki/2014/d/d9/ETH_Zurich_GridGlowing.png',
 
-
        w: 80, // width of image
 
-
        h: 24 // height of image
 
-
     }
+
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 =  $('#article');
 +
    var imgWidth = container.width();
-
<article>
+
  $( "#mapTest").each(function() {
-
<h1>Images in the Tooltip</h1>
+
      $(this).css('height', 'auto', 'width', 'auto');
 +
      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); 
 +
  });
 +
}
 +
}
-
<ul>
 
-
    <li><a href="#" class="showTip L1">Link 1</a></li>
 
-
</ul>
 
-
<IMG SRC="https://static.igem.org/mediawiki/2014/d/d9/ETH_Zurich_GridGlowing.png" USEMAP="#map">
+
$(document).ready(function(){
-
<map id="map" name="map"><area shape="circle" alt="" coords="281,26,17" href="" target=""id="age" class="showTip L1" /></map>
+
  $('#mapTest').mapster({
 +
    fillColor: '2C2F3D',
 +
    fillOpacity: 1
 +
    /* clickNavigate: false ,
 +
    stroke: true,
 +
    strokeColor: 'c2d8f1',
 +
    strokeOpacity: 0.9,
 +
    strokeWidth: 2,
 +
    clickNavigate: true */
 +
  });
 +
 
 +
 
 +
$(window).resize(
 +
  function()
 +
  {
 +
onWindowResize();
 +
  });
 +
resize(true);
 +
});
 +
</script>
 +
 
</article>
</article>

Revision as of 11:35, 30 September 2014

iGEM ETH Zurich 2014

Retrieved from "http://2014.igem.org/Team:ETH_Zurich/project/overview/grid"