I have the following flex elements that can take different widths depending on their content, I want to increase their width and height depending on their previous width or height. For example, I want to add 10px to the the element with the id of id_1 regardless of its current of width.
note: I can just add a width to styles and make it like 300px to increase it, but I don't want that I want to increase the width depending on the the current width,( width = previous_width+10 )
note: I didn't provide the element styles with the previous width value.
note: I added a background color just to make it easier to understand.
note: I am using reactjs and this is just a simplification, so answers with react or javascript will be ok.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='id_1'>this should have longer width</div>
<div id='id_2'>second</div>
<script>
console.log(document.getElementById('1'))
</script>
<style>
body {
display: flex;
}
div {
background-color: orange;
display: block;
}
#id_1 {
background-color: red;
}
</style>
</body>
</html>
For doing this you need to get the width of the current element and add the value you want. For the width of the element we have to see their "real" width.For more about the width of an element here's the doc.
console.log(document.getElementById('id_2'))
let seconddiv = document.getElementById('id_2')
function increment(value){
seconddiv.style.width = `${(seconddiv.offsetWidth + value*1)}px`
}
body {
display: flex;
}
div {
background-color: orange;
display: block;
}
#id_1 {
background-color: red;
}
<div id='id_1'>this should have longer width</div>
<div id='id_2'>second</div>
<button onclick="increment(10)">Increase width</button>
Related
I'm trying (and failing) to use "onScroll" on a div. All others commands are working properly. I already tried use only the onScroll and gave me nothing too. Why it isn't working?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<div onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()" style="height: 5000px">
</div>
</body>
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
</script>
</html>
I added a second code to show the "onClick" working properly on "body", but I neet it in a "div".
Code 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<body onScroll="printSR()">
<div style="height: 5000px" ></div>
<script>
function printSR() {
console.log("scroll");
}
</script>
</body>
</html>
If the <div> height is not 100%, you can use the wheel event instead of the scroll event. Currently, the onScroll event is not fired because the height style of the <div> element is not set. The height style is not applied when the <div> element's display property is inline. There are two ways to solve this problem.
Method-1
Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%:
function printSR() {
console.log("scroll");
}
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);
#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}
<div id="onwheelContainer"></div>
Method-2
Applying a height style after applying the block style to the <div> element's display property:
.container {
display: block;
height: 5000px;
}
Method-3
Applying the height style to the <div> element using !important:
.container {
height: 5000px !important;
}
Additionally, the <script></script> element must be written before the closing </body> tag. In the following application, the class style .container has been applied to the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
/* [METHOD-1] The class style applied to the <div> element. */
.container{
display: block;
height: 5000px;
border: 1px solid blue;
}
/* [METHOD-2] Class style that can be applied to the <div> element. */
.container2{
height: 5000px !important;
}
#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- The class style ".container" has been applied to the <div> element. -->
<div class="container" onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()"></div>
<div id="onwheelContainer"></div>
<!-- The <script></script> element is positioned before the closing tag </body>. -->
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
/* Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%. */
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);
</script>
</body>
</html>
How can I have a parent container meets the following conditions:
has a max-height of 80vh
has a height that is the maximum between: a) 400px (or any fixed height) b) height of child contents
child contents cannot extend past parent container
when the child contents grow, they keep growing until it hits the parent's max height of 80% (and then it scrolls)
I already have logic for 1, 3 and 4. but im not sure about how to implement the second condition. Here is some sample code i wrote:
.parent {
height: 400px;
width: 80%;
margin: 100px auto;
max-height: 80vh;
border: solid 5px black;
overflow: scroll;
}
.child {
border: solid 5px red;
width: auto;
height: 550px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
I think I am looking for something like height: max(400px, max-content). But is this possible/how would I implement this? Any ideas would be greatly appreciated!
From MDN:
max-height overrides height, but min-height overrides max-height.
So to make sure your condition 1 is always definitely met (maximum height of 80vh) you not only have to set max-height to that but you have to make sure that if 400px is greater than 80vh that the height does not go above 80vh, otherwise it will go to 400px and overrule the max height of 80vh.
max-height: 80vh;
min-height: min(400px, 80vh);
If you delete the height of parent, the parent going to take the height from child but no more for 80vh that is the max height for parent, so if the child height is more than 80vh the parent get scroll for the rest height child.
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
here is jsFiddle: http://jsfiddle.net/arJEx/
Here's what I got so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Waiting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<style>
* { margin:0;padding:0; }
#wait {
background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function() {
$(".act").live("click",function() {
$("#wait").slideDown("slow");
});
});
</script>
</head>
<body>
<button class="act">Activate effect</button>
<div id="wait">Please wait...</div>
</body>
</html>
I want it so the blue div when I press that button slides down to the middle of the page... but I juts can't seem to find out how to do it. Please help?
edit: ok, it doesn't HAVE to be middle of screen but near the top of part. like.. anywhere near middle to top of page.
Everything is just fine with Your JS. You need to change CSS. First of all div's container must fill all window:
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
Than change div's css. First approach (not sure about IE):
#wait {
/* remove padding and append those */
position: absolute;
top: 5%; /* change it */
bottom: 50%;
width: 100%
}
Second one:
#wait {
/* remove padding and append those */
height: 50%;
}
There is one problem You will need to solve. You will need to verticall align Your text without using padding and this is another question (just search for it in stackoverflow or goole).
Is this what you want?
$("#wait").height(0).animate({height: $(window).height() / 2});
Is this what you're looking for?
$(function() {
$(".act").click(function() {
var h = $("#wait").height()/2;
var t = $(window).height()/2;
var pos = t - h - 50;
$("#wait").slideDown("slow").css('top', pos);
});
});
You'd have to add position:relative; and width: 100% to your css though.
This will show the div and push it down the page by extending the top margin 200px. It uses Jquery's animate, which lets you change a numeric property over time (read: move stuff). SlideDown is basically shorthand for calling an animate function that increases the height of an element to move it down the page. Instead of increasing the height, this keeps the same height and just moves the element to a lower part of the page.
Is this anything close to what you wanted? :D
$(function() {
$(".act").live("click",function() {
$("#wait").show().animate({ marginTop: "+=200" }, 600);
});
});
I have two elements "src" and "dest"
"src" and "dest" are in different DOM-nodes, that can not have the same parent.
I need to place "src" element in the same visible position, as "dest".
"src" element must also have the same sizes, as "dest".
I have following code for case, when "src" and "dest" having the same parent:
src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());
// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();
Unfortunately, it does not works. "src" element has displacement to bottom and left, for that i cannot find the reason.
Maybe, i do something wrong ...
How to do it right for two cases ?
"src" and "dest" having the same grand-parent
"src" and "dest" does't having the same parent. Maybe grand-grand-grand-parent is the common for both.
Update:
I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div>
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
It does not work correctly. After "swapping", "src" element has a strange displacement to top-left direction on ~30 pixels.
I use latest version of Safari 5, if i makes sense.
Update 2:
Unfortunately, this also does not works. I updated my example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
div {
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div class="holder">
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
I tested it here:http://jsfiddle.net/YEzWj/1/
Using your second example make your CSS like this:
div {
position:relative;
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
position:absolute;
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
EDIT: After playing around with it some, it did not work in all circumstances. I decided to change the javascript. Note: My example toggles the display of src and dest within the holder, making holder the same size as dest so the border shows outside the dest and src.
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
var holder=$(".holder");
holder.width(dest.width());
holder.height(dest.height());
// Setup
src.hide();
// Interaction
dest.click(function(){
src.show();
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
});
src.click(function(){
dest.show();
src.hide();
});
});
EDIT2: Remove the src.click() event if you wish it to NOT go back to the dest on src click.
You need to make the dest element absolute, otherwise the top and left offsets will not apply.
src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());
Also, elements like p and body will have default stylesheets depending on browser. So try to supply a reset style to make things consistent:
p {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
You can call the offset function to set the offset and handle different parents correctly, like this:
dest.offset(src.offset());