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.
- var html = '<center>';
- for(var pg=1; pg<=pages; pg++)
- {
- var mp = pages+'';
- var cp = pg+'';
- while(cp.length < mp.length) { cp = '0'+cp; }
- html += '<div class="pdfpage" style="width:100px; height:100px"';
- html += ' <img style="width:100%;height:100%" src="/ionmed/reports/'+id+'-doc-'+cp+'.png?rand='+Math.random()+'" />';
- }
- html += '</center>';
- $('div#report-scroller').html(html);
- function zoomIn()
- {
- var imgs = $('.pdfpage');
- var w = $('.pdfpage').width() * 1.5;
- var h = $('.pdfpage').height() * 1.5;
- imgs.each(function() {
- $(this).css({
- "width":w+'px',
- "height":h+'px'
- });
- });
- }
- .pdfpage {
- margin-top: 4px;
- margin-bottom: 4px;
- border: 1px solid black;
- display: block;
- }