Resize div's height when the page i zoomed - javascript

I have a div and i want that It has always 80% of body's height.I have thought a function that catch body's height when site is loading and calculate 80% of It giving the result at div's height.The problem is that when the user do the zoom of the page div's height doesn't resize.How can i solve this problem?

use this style for your div :
height: 80vw;

Just set the height to be 80% in css given the div is direct child of body
div {
border: 1px solid red;
height: 80%;
}
body, html {
height: 100%;
}
<html>
<head>
</head>
<body>
<div>yo</div>
</body>
</html>
alternatively use height: 80vh; if your body is 100% viewport height.
div {
border: 1px solid red;
height: 80vh;
}
<html>
<head>
</head>
<body>
<div>yo</div>
</body>
</html>

Related

How to fix div aspect ratio?

I need to keep div aspect ration as 4:3 in both case when browser mostly horizontal or vertical. And need div size to increase as browser window increase.
I found this solution to set padding-bottom: 75%; width: 100%;. It works when browser window is dominantly vertical, but when browser window is dominantly horizontal, I don't get the result as desired.
Do you have any idea? Would you recommend using Javascript? If so, then how?
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
border: 1px solid red;
padding-bottom: 75%;
width: 100%;
}
</style>
</head>
<body>
<div class="ex1"/>
</body>
</html>
Using padding hack to get element ratio does not work with borders -- border makes it square. Below are 2 cases, one without max width container, and one with it.
body {
padding: 0;
margin: 0;
}
.r-4by3-wrap {
max-width: calc(100vmin * 4 / 3);
margin: auto;
}
.r-4by3 {
height: 0;
padding-top: 75%;
}
<div class="r-4by3-wrap">
<div style="border: 10px solid red">
<div class="r-4by3" style="background: pink">
</div>
</div>
</div>
If we consider the fact that you need to consider the screen as a reference then you can do this by adding a max-width using vh unit to avoid having the element bigger than the sreen height. The ratio is 4:3 so when the element is 100vh the width need to be 133.33vh so the element should never exceed this width.
You need to also apply the padding trick to a child element since the parent will not have full with in all the cases and the padding is related to the upper container. Applying it to the div will give wrong result.
div.ex1 {
border: 1px solid red;
box-sizing:border-box; /* Don't forget this to include the border in the height/width*/
width: 100%;
max-width:133vh; /* 4/3 * 100vh */
margin:auto;
}
div.ex1:before {
content:"";
display:block;
padding-top:75%;
}
body {
margin:0;
}
<div class="ex1"></div>
You can also use media queries to check the aspect ratio and change the height and width for the div accordingly.
Just to clarify:
vmin - Equal to the smaller of vw and vh.
Quoted from developer.mozilla.org
With that in mind we can do something like this:
<!DOCTYPE html>
<html>
<head>
<style>
body { padding:0; margin:0; text-align: center;}
div.ex1 {
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
}
#media (min-aspect-ratio: 4/3) {
div.ex1 {
width: 133.33vmin;
height: 100vmin;
}
}
#media (max-aspect-ratio: 4/3) {
div.ex1 {
width: 100%;
height: 75vw;
}
}
</style>
</head>
<body>
<div class="ex1"/>
</body>
</html>
I think the percent of height doesn't work, try to use vh instead of percent.
Use javascript window.onresize event
window.onresize = function(event) {
// Here get the height of page and give them multiplied bu 4/3 to the width of div
};

Make a div fill the rest of the page (cross-browser)

I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much work such a nature task requires.
I tried this code, which adjusts the height by jQuery. It works well in Chrome, but it does not work perfectly in Chrome: if we scroll down, we could see it does not automatically restore to the initial position.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0
}
.rb .myME {
background: grey
}
</style>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
<script>
$(".myME").css({
height: (($(document).height()) - $(".top").height()) + 'px'
})
</script>
</body>
</html>
Does anyone have a perfect solution (CSS or jQuery) cross-browser?
for older and newer browsers , the display:table properties could match your requirement.
html,
body,
.rb {
margin: 0;
height: 100%;
}
.rb {
display: table;
width: 100%;
border-collapse: collapse;
}
.top, .myME {
display: table-row;
}
.buffer {
display: table-cell;
}
.top .buffer {
background: lightblue;
}
.myME .buffer {
background: tomato;
height:100%;
}
<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer">
abc
</div>
</div>
</div>
the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.
If you want to make that div under that text you need to do some css there you can find many tutorials because it is in basics:
Use position relative to parent div and position absolute to div that u want to move under text.
If you want to use full height you don't need jquery use VH - viewport height as height: 100vh; to have full height of any devices.
I am not sure does VH works everywhere but it does for me in chrome, fox, edge
By W3schools it works here: https://www.w3schools.com/cssref/css_units.asp
If top div is a fixed size ( just change size in both heights in top div and calc function ) you can try this :
body {
margin: 0
}
.rb {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
}
.myME {
width: 100%;
height: calc( 100% - 100px);
background: grey;
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
</body>
</html>
I hope this helps you

Why doesn't the animate function of jquery work?

This code doesn't work. I followed exactly the syntax for animate() but not working.
<!DOCTYPE html>
<html>
<head>
<style>
#testing {
background-color: skyblue;
Position: absolute;
height: 100%;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#testing").animate({
width: 100%,
height: 100%
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<div id="testing">Testing</div>
</body>
</html>
It throws no error at all and doesn't perform the intended functionality.
https://jsfiddle.net/hafx8uaf/
$(document).ready(function() {
$("button").click(function() {
$("#testing").animate({
width: "0%",
height: "0%"
});
});
});
Here you have a working JsFiddle.
You need to set the width and height to "0%" in your JS if you want to hide the div when the button is clicked. if you animate to 100% there will be no effect as it is already at 100% in the CSS.
Looking at your CSS style, #testing already has a width of 100% and a height of 100%, so the code might well be working, it's just already at the end point of the animation.
Try updating your CSS to
<style>
#testing
{
background-color: skyblue;
Position: absolute;
height: 10%;
width: 10%;
}
</style>
And it will probably work.
EDIT: You would also need to add double quotes around your width/height conditions on .animate, so
width: "100%",
height: "100%"
Otherwise it will return a syntax error.

JQuery background video does not cover whole the page

I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units

CSS preferred height with maximum height

I have a div that should have a maximum height and a preferred height. In the sample posted below, I have #test with a black background and a maximum height of 800px. When the browser view-port has sufficient available space, it should take 800px. If less space is available (i.e. mobile devices), the maximum amount of available space should be used. How can this be achieved with preferably just CSS?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prototype</title>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
#test {
background-color: black;
background-position: center;
background-repeat: no-repeat;
max-height: 600px;
max-width: 800px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
Also include the following attributes to #test:
height: 100%;
width: 100%;
Fiddle link here: http://jsfiddle.net/Nx5Zb/
With embedded full-page result: http://jsfiddle.net/Nx5Zb/embedded/result/

Categories