title: javascript image resize window
body: <p>I have a problem with a JavaScript I'm developing for my website. I have images which opens on hovering over them.</p>
  
  <p>First my script calculates if the image should be displayed on the right or on the left of my window:</p>
  
  <pre><code>$("html,body").live("mousemove", function (e) {
      //console.log("mousemove: "+e.pageX)  
      var width_window = $(window).width();
      var center = width_window / 2;
      if (e.pageX &lt; center) {
          side = 'left';
      } else {
          side = 'right';
      }
  });
  </code></pre>
  
  <p>Then, once we know on which side of the window the image will be displayed, I have another script to resize the image, depending of the height &amp; width of my window, including the margins:</p>
  
  <pre><code>this.resizeImg = function (img, offset) {
      var d = new Date();
      //console.log(d, side);
  
      var window_height = $(window).height();
      var img_height = $(img).height();
      var img_top = $(img).offset().top;
  
      var window_width = $(window).width();
      var img_width = $(img).width();
      var img_left;
      side == 'left' ? img_left = offset.left : img_left = window_width - offset.left;
  
      console.log(window_width, img_left)
      var image_resize_height = window_height - img_top - 20;
      var image_resize_width = window_width - img_left - 20;
  
      if (img_height + img_top &gt; window_height &amp;&amp; img_width + img_left &gt; window_width) {
          console.log("h w")
  
          if (image_resize_width &gt; image_resize_height) {
              $(img).css('height', image_resize_height + 'px').css("width", "auto");
          } else {
              $(img).css('width', image_resize_width + 'px').css("height", "auto");
          }
  
      } else if (img_height + img_top &gt; window_height) {
          //console.log("h")
          $(img).css('height', image_resize_height + 'px').css("width", "auto");
      } else if (img_width + img_left &gt; window_width) {
          //console.log("w")
          $(img).css('width', image_resize_width + 'px').css("height", "auto");
      } else {
          //console.log("non")
      }
  };
  </code></pre>
  
  <p>It almost works, but sometimes my images exceed the window width or height. I can't find the solution...</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.vignette {
          max-height: 800px;
          max-width : 800px;
          z-index : 2;
          top : 25px;
  }
  
  .info{
      position : relative;
  }
  
  .info img {
      position : absolute;
      display : none;
      cursor : pointer;
  }
  </code></pre>
  
  <p>My full script in jsFiddle: <a href="http://jsfiddle.net/CrnNZ/" rel="nofollow">http://jsfiddle.net/CrnNZ/</a></p>
  
  <p>Here is the link to my website : <a href="http://olivierlellouche.com/" rel="nofollow">http://olivierlellouche.com/</a></p>
  
  <p>Thanks a lot for your help !</p>