Develop Reference

Make height responsive according to width in JavaScript

I have a rectangle which I want to be responsive according to the width.
Currently, my logic is straight-forward:
aspectRatio = 16 / 9
win = {
width: window.innerWidth,
height: window.innerHeight,
}
get browser() {
const width = this.win.width - 250
const height = width / this.aspectRatio
return {
width,
height,
}
}
I calculate my width by subtracting sidebar width which is 250 from win.width.
And for my height, I divide width by aspectRatio.
However, this results in 0 height when I reduce my window size to ~700px.
My application looks like:
Demo → https://gqhhl.csb.app/
CodeSandBox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl
What I really want is for that papayawhip rectangle to be responsive. I'm not sure which algorithm to use? I'm using Canvas using KonvaJS but the logic is in JavaScript.
How do I make it responsive & proportional? Currently, the height gets shortened very quick.

Here is my solution:
function App() {
const store = useStore();
const { win, browser, aspectRatio } = store;
const pad = 50;
const rectWidth = browser.width - pad;
const rectHeight = rectWidth / aspectRatio;
return (
<div className="flex">
<div id="sidebar">
<h1 className="text">
Center <span>papayawhip</span> Canvas
</h1>
</div>
<Stage width={browser.width} height={browser.height} id="konva">
<Layer>
<Rect
width={rectWidth}
height={rectHeight}
x={pad / 2}
y={(win.height - rectHeight) / 2}
fill="papayawhip"
/>
</Layer>
</Stage>
</div>
);
}
Also, I changed the store, so browser returns canvas area:
get browser() {
const width = this.win.width - 250
const height = this.win.height
return {
width,
height,
}
}
Demo: https://codesandbox.io/s/react-konva-responsive-canvas-ogk1n

First Solution
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
Second Solution
padding-top: calc(9 / 16 * 100%);

You need to change CSS but say your component is buried 3 levels deep. Unlike the CSS file, which is next to your .tsx and imported already, so use it!
Line 5 of your code:
import "./styles.css"
Add this to the end of the file (copied from #deadcoder's answer which solves the ratio issue). Also see the breakpoint below it for how a responsive breakpoint goes. That's how you do the responsive thing without it shrinking to nothing.
canvas {
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
#media screen and (max-width: 1200px) {
canvas {
width: 100%;
height: 400px;
padding: 0; /* reset the ratio for smaller sizes so you can crop it */
}
}
#media screen and (max-width: 600px) {
canvas {
width: 100%;
height: 200px;
padding: 0; /* reset the ratio for smaller sizes so you can crop it */
}
}
Also consider giving that canvas an ID or class to single it out.
If the height is disappearing too quickly still, consider using the whole area as the canvas or using a background image

Resizable video does not fully fit to parent div

I have a video element which is draggable and resizable.
I would like the video element to fit 100% to the parent div
when I resize it, but this is where I fail to do so.
This is what I have so far:
CSS
.my-div
{
width: 320px;
height: 240px;
top: 200px;
left: 400px;
position:absolute;
z-index: 9;
background-color: #28a745;
}
JS
let video_div = document.createElement('div');
video_div.id = 'video-div'
$(video_div).addClass('my-div')
$("body").append(($(video_div).draggable().resizable()))
let video_element;
video_element = document.createElement('video');
$(video_element).attr('id', 'my_video');
$(video_element).attr('class', 'video-js vjs-default-skin');
$(video_element).attr('width', '100%');
$(video_element).attr('height', '100%');
$(video_element).attr('controls', ' ');
$(video_element).attr('preload', 'auto');
$(video_element).attr('data-setup', '{}');
let source = document.createElement('source');
$(source).attr('type', "video/mp4");
$(source).attr('src', "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4");
$(video_div).append(video_element)
$(video_element).append(source);
As you can see from this fiddle, if you try to resize
the video,it doesn't fit to the parent div
(green background appears behind)
How could I modify my code to achieve that?
EDIT: Updated Fiddle that shows the problen once I add the video-js library

By default, the video tag tries to keep the video aspect ratio.
If you want to fill your parent, you must use the CSS property "object-fit"
In your code, try to add
video_element.style.objectFit = "fill";
or, using JQuery:
$(video_element).css("object-fit", "fill");
Of course, doing this will not guarantee a perfect aspect ratio for the video.
More info about the object-fit property here https://developer.mozilla.org/it/docs/Web/CSS/object-fit

Add % to the height of the surrounding div the one called .my-div (whit this video it is 56.25%). If you change the width the height is always 56.25% of the height and the video should fit.
You can calculate the ratio on this webpage: https://www.calculatorsoup.com/calculators/math/ratios.php

Is it possible to add an extra height to equalizer height?

I need to add an extra 35px to whatever the height calculated by Foundation Equalizer. Is this possible?
For example, if Equalizer height calculation is 350px, I would like 35px to be added on. So style created will be height: 385px; instead of height: 350px;.
Thank you.

Init Foundation with this code:
$(document).foundation({
equalizer: {
after_height_change: function(){
$('div[data-equalizer-watch]').height(function (index, height) {
return (height + 35);
});
}
}
});
CodePen example

animate width of rectangle from center in raphael.js

I have a question about the .animate() Api in Raphael.js
There is a rectangle which I would like animate the width and height.
r.animate({ width: 50, height: 50 }, 1000, "bounce");
But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?
FIDDLE

There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.
Here is the DEMO
r.click(function() { r.animate({ transform:'s2' }, 500); });
Note that transform:'s2' means scale it 2x. Hope this helped ;)
EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.

You can use x and y to move the retangle and simulate it growing from center.
r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });
Here is a FIDDLE

Re-sizing the webpage content

In my project I have a webpage which has 2 div areas right and left. The left div takes almost 60% of the whole page width and the right one takes around 36% of the page. I wanted to resize the both div areas in a proper ratio when I shrink the browser from the right side or left side. The UI is getting generated from Javascript. This is the code.
boardHolderPadding = $board.outerHeight() - $board.height();
$board.height(viewportHeight - siblingsHeight - boardHolderPadding);
this.$('#board .droptarget').setWidthAsRatioOfHeight(this.options.ratio);
$('#sidebar').width($(window).width() - $board.find('#board').width() - 50);
I tried with JQuery resize plugin but couldnt get the proper result I'm looking for. Anyone have suggestion?
Thanks

See jsfiddle example but I think you just need to set your widths as percentages rather than trying to calculate them - note display is set to inline-block
<div>
<div class="small-left-column">this is the left column</div>
<div class="large-right-column">this is the right column</div>
</div>
<style>
.small-left-column {
width: 30%;
background-color: #aeaeae;
display: inline-block;
}
.large-right-column {
width: 60%;
background-color: #aeaeae;
display: inline-block;
}
</style>
So I think for your example your would have something like this
$(document).ready(function () {
$('#sidebar').addClass('small-left-column');
$('#board').addClass('large-right-column');
});

Maybe you're looking for the pure-Javascript version of the above:
$(document).ready(function () {
$('#sidebar').css( {
width: '30%'
backgroundColor: '#aeaeae',
display: 'inline-block'
});
$('#board').css({
width: '60%',
backgroundColor: '#aeaeae',
display: 'inline-block'
});
});

I did it in a different way in Javascript and I hope this will help someone to fix if they come across an issue like that
relativeSize : function(width, height){
var boardWidth = this.$("#board").width(),
boardHeight = this.$("#board").height(),
newcard = this.$("#newCard").width(),
space = width - boardWidth - newcard;
ratio = space / width * 3; //used to increment the ratio with 3 as the ratio is very tiny value, this will help to increase minimizing size
bheight = boardHeight - 25; // used to reduce the height by 25px, u can use any amount to match ur ratio
var relHeight = (space < ratio) ? bheight : height;
return relHeight;
}
Thanks