jQuery Scale div to parent

+1 vote
asked Sep 12, 2017 by redcrusador

I am stumped, I have written some code to scale a div within a div. For the purposes of this question I have taken the code out of context to show a working version.

Basically on load and if the user resizes the browser a div its made to dynamically scale so it fits proportionately within the container div.

This all works fine. I have a dropdown select to enable the user to change size of the smaller div. It uses .removeClass and .addClass. Then the scale function is called, however it will only work if the scale function is delayed by a timer i.e;

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
setTimeout(function(){ scalePages();
}, 1000);

This wont work;

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
scalePages();

I am confused why it needs a timer. I have tried to put it in a call back function but still this dosent work. Does anyone have any better solutions to this?

 scalePages();
//using underscore to 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: all 500ms ease-in-out !important; transition: all 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>

1 Answer

0 votes
answered Mar 6, 2018 by curiousrk

 scalePages();
//using underscore to 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: all 500ms ease-in-out !important; transition: all 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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...