javascript - jQuery Scale div to parent -
i stumped, have written code scale div within div. purposes of question have taken code out of context show working version.
basically on load , if user resizes browser div made dynamically scale fits proportionately within container div.
this works fine. have dropdown select enable user change size of smaller div. uses .removeclass , .addclass. scale function called, work if scale function delayed timer i.e;
$("#pagesize").removeclass(); $("#pagesize").addclass($("#paper").val()); settimeout(function(){ scalepages(); }, 1000); this wont work;
$("#pagesize").removeclass(); $("#pagesize").addclass($("#paper").val()); scalepages(); i confused why needs timer. have tried put in call function still dosent work. have better solutions this?
scalepages(); //using underscore delay resize method till finished resizing window $(window).resize(_.debounce(function () { scalepages(); }, 0)); function scalepages() { var scalex = $('.content-article').width() / ($("."+$('#pagesize').attr('class')).width()); var scaley = $('.content-article').height() / ($("."+$('#pagesize').attr('class')).height()); var scale = (scalex > scaley) ? scaley : scalex; var newleftpos = math.abs(math.floor(((($("."+$('#pagesize').attr('class')).width()) * scale) - $('.content-article').width())/2)); var newtoppos = math.abs(math.floor(((($("."+$('#pagesize').attr('class')).height()) * scale) - $('.content-article').height())/2)); $('#pagesize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newleftpos + 'px;top:' + newtoppos + 'px;'); } $("#paper").change(function() { $("#pagesize").removeclass(); $("#pagesize").addclass($("#paper").val()); settimeout(function(){ scalepages(); }, 1000); });article { height: 250px; width: 500px; display: flex; background: yellow; position: relative; } #paper { float: right; } page { background: black; display: block; margin: 0 auto; -ms-transform-origin: top left; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: 500ms ease-in-out !important; transition: 500ms ease-in-out !important; position: absolute; } .large {width: 5000px;height: 8000px;} .small {height: 95px;width: 41px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <select id="paper"> <option value="large">large</option> <option value="small">small</option> </select> <article class="content-article"> <page id="pagesize" class="large"> <div id="map"></div> </page> </article>
scalepages(); //using underscore delay resize method till finished resizing window $(window).resize(_.debounce(function () { scalepages(); }, 0)); function scalepages() { var scalex = $('.content-article').width() / ($("."+$('#pagesize').attr('class')).width()); var scaley = $('.content-article').height() / ($("."+$('#pagesize').attr('class')).height()); var scale = (scalex > scaley) ? scaley : scalex; var newleftpos = math.abs(math.floor(((($("."+$('#pagesize').attr('class')).width()) * scale) - $('.content-article').width())/2)); var newtoppos = math.abs(math.floor(((($("."+$('#pagesize').attr('class')).height()) * scale) - $('.content-article').height())/2)); $('#pagesize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newleftpos + 'px;top:' + newtoppos + 'px;'); } $("#paper").change(function() { $("#pagesize").removeclass(); $("#pagesize").addclass($("#paper").val()); });article { height: 250px; width: 500px; display: flex; background: yellow; position: relative; } #paper { float: right; } page { background: black; display: block; margin: 0 auto; -ms-transform-origin: top left; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: 500ms ease-in-out !important; transition: 500ms ease-in-out !important; position: absolute; } .large {width: 5000px;height: 8000px;} .small {height: 95px;width: 41px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <select id="paper"> <option value="large">large</option> <option value="small">small</option> </select> <article class="content-article"> <page id="pagesize" class="large"> <div id="map"></div> </page> </article>just removed scalepages function change function
Comments
Post a Comment