[Pdx-pm] Browser window height, javascript, jquery

[Keith Lofstrom]

On Fri, Aug 07, 2009 at 02:14:19PM -0700, Keith Lofstrom wrote:
> I want to make my wydiwys presentation tool autoscale single
> images to the browser window.  I want to fill as much of the
> window as I can, while preserving the image aspect ratio. 
> The math is easy, but learning the pixel height of the inside
> of the browser window is surprisingly difficult.

Thanks for all the replies.  Subject to more testing, it was 
indeed a simple $(window).height() that did it, in combination
with a style sheet containing padding and margin set to zero
(otherwise the image plus margins are too big, causing the 
scroll bars to pop up).

Here are the relevant lines of the style sheet:

body {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
}

The new wydiwys.js is at http://server-sky.com/wydiwys

Here are the relevant lines:

....

   $(window).resize(  function(){ scale() });

...

   $(document).ready(function(){   
      scale();       
...

function scale() {
   var WindowHeight = $(window).height();
   var WindowWidth  = $(window).width();
   var WindowAspect = WindowWidth/WindowHeight;
   $('img').each(function(){           // OK, only one img, but this is easy
      var ImageHeight = $(this).height();
      var ImageWidth  = $(this).width();
      var ImageAspect  = ImageWidth/ImageHeight;

      if( ImageAspect < WindowAspect ) {               // wide image
         $(this).height( WindowHeight ) ;
         $(this).width( WindowHeight*ImageAspect );
      } else {                                         // tall image
         $(this).height( WindowWidth/ImageAspect );
         $(this).width ( WindowWidth  ) ;
      }
   }); 
}

I have noticed a little weirdness from firefox - sometimes it seems to
be sending the image height to the image width, resulting in a square
image, but when that happens I just reload the slide.  A debugging 
mystery I will solve after the conference.

BTW, I also figured out how to preload my static images.  I think...

Keith

-- 
Keith Lofstrom          keithl at keithl.com         Voice (503)-520-1993
KLIC --- Keith Lofstrom Integrated Circuits --- "Your Ideas in Silicon"
Design Contracting in Bipolar and CMOS - Analog, Digital, and Scan ICs