I'm trying to make a canvas JavaScript game, so i added this in code
window.addEventListener("resize", () => {
console.log("resi2ze");
canvasElement.width = window.innerWidth;
canvasElement.height = window.innerHeight;
});
But when I resize browser window, canvas height is bigger than body height
(for example, body height is 465px, and canvas height is 462px). How can I prevent it, so canvas height would be same as window height?
Seems like the scrollbar itself is an issue, because it adds few pixels.
I always add overflow: hidden to body so scrollbar doesn't show up.
Related
So I have been trying to make an image fit to the window size. Is there any way to resize a div to window width while keeping the right ratios using an event listener? I have looked through the internet but nothing has worked. I think that it will be using stuff like this. when resize expand to window width, hight = 5/3 width. It will most likely use an EventListener. i have tried making width 100% but that just cuts off the bottom of the image not letting me scroll down to see the rest.
Set image width to 100%, don't set a height and the image will maintain aspect ratio.
<body>
<img src="..." style="width: 100%" />
</body>
See example:
http://codepen.io/jessegavin/pen/QNzeaX
CSS is the way you should go. width: 100%;is one thing you can go. But if your viewport is scaleable, you should use width: 100vw;.
Try this code
window.onresize = function(){
div.style.width = window.innerWidth + 'px';
div.style.height = window.innerHeight + 'px';
}
I have an iframe that I want to maintain the aspect ratio at 16:9 (height/width) right now there is an box below the iframe that I don't want the iframe to ever overlap. So I can't use the padding bottom trick because it causes the video to overlap the box. How can I get the maximum width and height that the iframe can attain in the remaining space?
So for example let's say I have a window that is 1200px by 600px, 50px is used for a box. I want the iframe to take the maximum width and height on the remaining 1200px by 550px and still keep its aspect ratio and not ever go below the box at the bottom of the page. How can I do that using jquery? Also as the window resizes the iframe should keep its aspect ratio
I'm asking for the formula that embedded videos use to maintain their aspect ratio in an iframe. When I embed an iframe that has a video in it the video always maintains its aspect ratio by adding black boxes around it.
Here's the HTML:
<div class="iframe-container">
<iframe></iframe>
</div>
<div class="box"></div>
This is pretty straightforward and can be done with CSS, if you know the expected aspect ratio. For video embeds at 16:9 (56.5%), it's done like this.
You can add max-height and max-width properties to the container just as you would any other element. The height is 0 and the padding is simply set according to the aspect ratio you want. The iframe is set to fill the container width and height so it will conform to the aspect ratio based on the padding.
.iframe-container {
position: relative;
padding-bottom: 56.5%;
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Update: You can do this much better with vw units.
This will work if your iframe is intended to be the full width of the browser. Otherwise you can do some calculations on it. But, for a full width iframe that you want to preserve aspect ratio on, it goes as follows (for 16:9 aspect ratio):
iframe {
width: 100vw;
height: 56.5vw;
}
Maintaining an aspect ratio is pretty straightforward with some conditional math, over time.
Generally, we have a container, a thing contained, and a known ratio (16/9). The height or the width can be determined by trapping the thing in the container (checking for out of bounds) and computing the other value from the ratio.
Update : once you have the new values, check for out of bounds. In this case, a min height and a max width.
A bit like so:
// if the iframe height (container width / ratio) is greater than the container height
if ( (cW / RATIO) > cH){
h = cH; // set the height equal to the container
w = cH * RATIO; // set the width equal to the container height * ratio
} else {
w = cW; // set the width equal to the container
h = cW / RATIO; // set the height equal to the container width / ratio
}
// Ok so, now that the iframe is scaled up, check for out of bounds
if ( iH < MIN_HEIGHT ){
iH = MIN_HEIGHT; // set the height to the const
iW = iH * RATIO; // use the same basic formula, but use the new value
}
if (iW > MAX_WIDTH){
iW = MAX_WIDTH; // set the width to the const
iH = iW / RATIO; // same formula, new value
}
- Working fiddle with some discussion.
- Updated fiddle with some out of bounds checks.
You can, obviously, work some extra math into the computation to make space for a control bar, or whatever. This is just the basic principle, in a very simple state. I almost always have some additional checks against max width, or do some positioning or whatever. But this should be a good start.
Cheers -
function maximize(){
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var body = document.body;
var div = document.getElementById(main-window);
<-- Need here some code for assignind div-s height to browser height
make_draggable();
};
This is the code, I need to full screen the window to size of my window.
There is a problem, because my div is draggable, and resizable to and when I am writing code for full screen, drag and resize stop working.
How do I resolve this?
If you are using jQuery in your site, you could try this:
function maximize(){
$('#main-window').width($(window).width()).height($(window).height());
make_draggable();
};
Here's the working fiddle
I'm using some script I found on Git that generates a snow effect. Somewhere in the code I have to set the width and the height of the canvas in which the snow is generated. I'm setting the canvas to the window full width / height :
canvas.width = $(window).width();
canvas.height = $(window).height();
But when rendered in the browser there are on both height and width some extra pixels adding scrollbars to the window. You can see the behavior here : Canvas ; I'm not quite sure why the width / height is calculated wrong or if there's something else interfering with those calculations that it makes it bigger than the actual window width / height. Maybe someone has a different view of the behavior or encountered it before ?
The canvas element is displayed inline by default, you can read here about similar problem.
The solution is quite simple :) Add following css code to the canvas element:
display: block;
and scrollbars should disappear.
old answer:
$(window).width() works properly but i don't know why $(window).height() returns too large value. It cause also showing vertical scrollbar because earlier computed width don't include the size of horizontal scrollbar.
I'm working on a mobile web app, and in my page I have a div element with its width set to 100%.
I need to set the height of this div so that the height is correct for a set aspect ratio. So for example, if the screen was sized to 300 pixels wide and the ratio was 3:2, my script should grab the width of the div (which at this point should be 300px) and set the height to 200px.
On first load, this works perfectly. However, if I rotate the screen of my phone to landscape, the width of the div obviously changes, so I need to reset its height in order to keep the correct ratio.
My problem is that I can't find an event which fires after the elements are resized. There is an orientationchange event built into jQuery Mobile, which helpfully fires when the screen is rotated from portrait to landscape and vice-versa:
$(window).bind('orientationchange', function (e) {
// Correctly alerts 'landscape' or 'portrait' when orientation is changed
alert(e.orientation);
// Set height of div
var div = $('#div');
var width = div.width();
// Shows the *old* width, i.e the div's width before the rotation
alert(width);
// Set the height of the div (wrongly, because width is incorrect at this stage)
div.css({ height: Math.ceil(width / ratio) });
});
But this event seems to fire before any of the elements in the page have resized to fit the new layout, which means (as mentioned in the comments) I can only get the pre-rotation width of the div, which is not what I need.
Does anyone know how I can get the div's new width, after things have resized themselves?
A few methods for you to try:
(1) Set a timeout inside your orientationchange event handler so the DOM can update itself and the browser can draw all the changes before you poll for the new dimension:
$(window).bind('orientationchange', function (e) {
setTimeout(function () {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
}, 500);
});
It won't make too big of a difference but note that Math.ceil takes a lot longer to complete (relatively) than Math.floor since the latter only has to drop everything after the decimal point. I generally just pass the browser the un-touched float number and let it round where it wants to.
(2) Use the window.resize event instead to see if that updated fast enough for you:
$(window).bind('resize', function (e) {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
});
On a mobile device this will fire when the orientation changes since the size of the browser view-port will also change.
(3) If you are updating the size of this <div> element because it holds an image, just apply some CSS to the image to make it always be full-width and the correct aspect ratio:
.my-image-class {
width : 100%;
height : auto;
}