JS:
$(window).resize(function() {
var Ha = $(".webuploader-wrap").width($(".webuploader-wrap").parent().width());
var Hb = Ha - Ha*0.2;
$(".webuploader-wrap").height(Hb).width(Ha);
$(".webuploader-wrap").next().width(Ha+2);
console.log($(".webuploader-wrap").parent().outerWidth(),Ha,Hb)
});
HTML:
<div class="form-group row">
<label class="col-sm-3 control-label">
:
</label>
<div class="col-sm-9">
<div class="row">
bmppngjpegjpg
</div>
<div class="row">
<ul class="text-center col-xs-4">
<div class="webuploader-wrap">
<div class="uploader-one" id="Door_head_photo_wrap">
<div class="queueList-one">
<div class="placeholder dndArea">
<div id="Door_head_photo" class="webuploader-container-one">
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>my page is a single page with four tab,-like forms to fill in and guide the process. The width () value of the first page col-xs-4 is in PX units, and the second three or four pages get 33.333333%. My first page is displayed, and the latter page is display:none when initialized. Click the next page to display it. What is the problem?
my goal is to make the height of webuploader-wrap proportional to the width, so get his parent width as height, and the width of .webuploader-wrap also get parent .col-xs-4. Is there any other way?