Image resize issue in Safari

Image resize issue in Safari

I have the following code which I've changed a million times trying to find the "right" trick but it still doesn't work in Safari.  All attempts have worked in Firefox.  All I'm trying to do is dynamically build a div from a query to display a series of images.  My header has zoom in/out buttons which should resize each image in the div.  Safari works only AFTER I resize the browser window just a nudge.  Once I do that one time, the zoom function works great.

Why does Safari need this browser resize before the image zooming happens when Firefox does not?  Any way I can do this from script so the user doesn't have to physically do it?  I've tried it with and without the enclosing inner div.
  1.     var html = '<center>';
  2.     for(var pg=1; pg<=pages; pg++)
  3.     {
  4.         var mp = pages+'';
  5.         var cp = pg+'';
  6.         while(cp.length < mp.length) { cp = '0'+cp; }
  7.         html += '<div class="pdfpage" style="width:100px; height:100px"';
  8.         html += ' <img style="width:100%;height:100%" src="/ionmed/reports/'+id+'-doc-'+cp+'.png?rand='+Math.random()+'" />';
  9.     }
  10.     html += '</center>';
  11.     $('div#report-scroller').html(html);
  1. function zoomIn()
  2. {
  3.     var imgs = $('.pdfpage');
  4.     var w = $('.pdfpage').width() * 1.5;
  5.     var h = $('.pdfpage').height() * 1.5;
  6.     imgs.each(function() {
  7.         $(this).css({
  8.             "width":w+'px',
  9.             "height":h+'px'
  10.         });
  11.     });
  12. }
  1. .pdfpage {
  2.     margin-top: 4px;
  3.     margin-bottom: 4px;
  4.     border: 1px solid black;
  5.     display: block;
  6. }



    • Topic Participants

    • brad