Javascript创建一个响应式容器

Question

I have an older website that I need to be made more dynamic. The website has a graphic chart that is nested inside a div. The problem I have is that there is javascript code that hard codes the height and width of the div container. I tried changing the size amount(350) to auto and percentage(10%) but it breaks the program. I can't figure out how the program converts the integer value to a pixel value either, but that's probably just my incompetence with javascript. I may have missed some important information so let me know if you need anything else. Thanks

Javascript

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: 1100,
    height: 350
});

HTML

<div class='fourthDiv' id="conKinetic">
    ....This div holds the graphics
</div>

Answer 1

If you are using jQuery, you can set the width and height as percentage and then pass the current pixel units in this way:

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: $('#conKinetic').width(),
    height: $('#conKinetic').height()
});

Of course, you can edit the width or height values to adapt them to your layout:

width: $('#conKinetic').width() - 50,

Consider this example:

 $(document).ready( function() { $('body').append( 'My width is 50%, equivalent to ' + $( '#hi' ).width() + ' px.'); }); 

 body { width: 100%; } #hi { width: 50%; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="hi">hello!</div> 

Hope it helps!