javascript - resize div on window resize -
i have code
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <style> html,body { width: 100%; margin: 0; padding: 0; } #main { margin: 0 auto; width: 963px; height: 642px; } #preload { display: block; position: absolute; width: 100%; height: 100%; } .loading { position:absolute; top: 43%; left: 47%; z-index: 2; display: none; } </style> </head> <body> <div id="main"> <img id="preload" src="preload.png"/> <img class="loading" src="../effects/loading icon/loading3.gif" /> </div> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../player/player.js"></script> <script type="text/javascript" src="pic1.js"></script> <script> $(document).ready(function() { $(window).on('resize', function(){ var maxwidth = $(window).width(); var maxheight = $(window).height(); var ratio = $("#main").height() / $("#main").width(); if(maxwidth * ratio > maxheight) { $("#main").height(maxheight); $("#main").width(maxheight / ratio); } else { $("#main").width(maxwidth); $("#main").height(maxwidth * ratio); } $("#preload").width($("#main").width()); $("#preload").height($("#main").height()); }).trigger('resize'); })(jquery); </script> </body> </html> what want div , img inside auto resize window resize. problem is, on 1st time page load, there blank space below div picture 1, , when resize window space disappear can see on picture 2. why there space in picture 1 , how can fix it, tks :) 
update jsfiddle : http://jsfiddle.net/7bnjf/
refactor code image.onload calls resize function initially.
<img id="preload" src="preload.png" onload="resizeimage()" /> in script section:
function resizeimage() { //calculations here... } window.addeventlistener('resize', resizeimage, false); (using vanilla js illustration key-parts need change are.. modify needed).
this implies of course (?) resizeimage() called in onload/onready event window.
Comments
Post a Comment