$(".div3Btn").click(function() {
$(".div2").show("slide", {
direction: "up"
}, 5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
I have a question about using the show()/hide() function with time and direction. As the above snippet shows, if the button was clicked, it will immediately jump to the bottom, but not following the div1 to slide down. Then how can I fix it if I want to use that function?
$(".div3Btn").click(function() {
$(".div2").slideToggle(5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
(The problem is quite similar to using Firefox to run the link function)
Another question about slide down and up is when I use flex: 1 for some divs, and then use the slideToggle() function, it does not have any slide down or up animation of the div. How to fix it if I must use flex: 1 for divs?
I think you've formatted the .show() function wrong. Try .show( duration [, easing ] [, complete ] )
$(".div3Btn").click(function() {
$(".div2").show(5000, "swing", function() {
// Animation complete.
});
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div id="div2" class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button id="div3Btn" class="div3Btn">Click me!</button>
</div>
</div>
Related
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 1 year ago.
I have 2 divs both with the same class and when I add content to one the height of the other also changes.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
How can I change/update it in a way that only the height of the div with content being added changes?
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
align-self: flex-start;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
It is because you haven't specified height on the first column and it's continuing to adapt the height of its parent div aka bansContainer. So here are two approaches. One is you add align-self: flex-start; or you specify a height on the column.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
/*align-self: flex-start;*/
}
.n-h {
height: fit-content;
}
<div class="container">
<div class="bansContainer">
<div class="list n-h">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
I have two div components let us say that is, div1 & div2 and each div has an overlay div let us call them overlayDiv1 & overlayDiv2.
Now I have to animate it like that when I hover over div1, overlayDiv1 should zoom and when I hover over div2 OverlayDiv2 should zoom.
Please help me to achieve this in React.js
You can use map and create the elements dynamically like this:
var numbers = [...Array(100).keys()];
var App = () => {
return(
<div className="container">
{numbers.map( el => (
<div className="inner">
<div id={'d'+el} className="d">
Div{el}
</div>
<div id={'od1'+el} className="od">
overlayDiv{el}
</div>
</div>
))}
</div>)
}
ReactDOM.render(<App/>, document.getElementById('app'))
.container {
width: 100vw;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.inner {
position: relative;
margin:20px 0px;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
.od {
display: none;
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
}
.d:hover+.od,
.od:hover {
display: block;
transform: scale(1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
I have made a simple horizontal carousel and would like to add a button to 'jump to' each image/card. I'm pretty close with some jquery.
HTML:
<div class="wrap">
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
</div>
<button class="next">NEXT</button>
CSS:
.wrap {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
position: relative;
width: 100%;
}
.p {
flex: 0 0 auto;
width: 100%;
height: 80px;
}
Jquery:
$(".next").click(function() {
var $target = $('.p.active').next('.p');
if ($target.length == 0)
$target = $('.p:first');
$('.wrap').animate({
scrollLeft: $target.offset().left
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
https://codepen.io/drewbots/pen/eYJzQQX
I would prefer vanilla Javascript for simplicity but working jquery would be fine. Thanks in advance for your help!
Use the offset method to obtain the position of the element in relation to the document and to scroll to the element use animate together with scrollLeft and scrollTop
$(".next").click(function() {
let offset
let active = $('.active')
let target = active.next()
if(active.next()[0] == undefined)
target = $('.p').first()
offset = target.offset()
$('.wrap').animate({
scrollLeft: $('.wrap').scrollLeft() + offset.left,
scrollTop: $('.wrap').scrollTop() + offset.top
})
target.addClass('active')
active.removeClass('active')
})
body {
margin:0;
}
.wrap {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
position: relative;
width: 100%;
}
.p {
flex: 0 0 auto;
width: 100%;
height: 80px;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
</div>
<button class="next">NEXT</button>
I have come across a problem whereby if I add rows to an overflow container some of the rows at the top are obscured. My real application is a bit more complicated than this in that it also adds things inside of the row, and if you pick a "wrong" option, then the top row gets hidden completely.
Is it possible to fit all of the rows inside of the container, so that when you scroll all the way to the top, you can always see the topmost row? Currently, depending on how many rows you have, a portion, or whole top row is hidden.
JsFiddle link.
And also code here:
window.onload = function() {
let addBtn = document.getElementById("addRow");
addBtn.addEventListener('click', function() {
let wrapper = document.getElementById("wrapper");
let newRow = "<div class='row'></div>"
wrapper.innerHTML += newRow;
})
};
body {
display: flex;
justify-content: center;
}
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
.row {
display: block;
background-color: aliceblue;
min-height: 50px;
margin-top: 10px;
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>
<button id="addRow">Add</button>
</div>
</body>
</html>
Remove align-item: center from #wrapper.
The problem is this property align all children rows in the middle of parent #wrapper.
So if you count the rows it's just the half of rows that should be appeared.
Try to inspect it, half of rows are above #wrapper which can't be viewed.
you can also have some padding to #wrapper to have some color below the last row.
check this Fiddle
Updated fiddle with the solution - https://jsfiddle.net/zL61c84x/
#wrapper {
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
#wrapperInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
I have built a demo that shows button 2 appearing after 1 second of the page loading. However, the problem is that it moves the position of button 1 up, but I'd rather it not move at all.
I know this could be fixed by using position absolutes, not using space-between, etc, but I want to be able to fix this with the current CSS staying put.
How can this be fixed? I've tried to set the visibility from hidden to visible, but the problem with that is that it does not fade in nicely. Any ideas about the best tricks or tips to do this would be very helpful, thank you.
Codepen: https://codepen.io/anon/pen/KEWjNm
setTimeout(() => $('#btn-2').fadeIn('slow'), 1000);
div {
background: pink;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100vh;
}
#btn-2 { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id='btn-1'>button 1</button>
<button id='btn-2'>button 2</button>
</div>
To achieve expected result, use animate option with opacity: 0 for btn2 initially
setTimeout(() => $('#btn-2').animate({opacity:1}, 1000), 1000);
div {
background: pink;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100vh;
}
#btn-2 { opacity: 0 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id='btn-1'>button 1</button>
<button id='btn-2'>button 2</button>
</div>
codepen - https://codepen.io/nagasai/pen/oVZrMK
You can use container, then one div per button:
Where the container has styles:
div.container {
background: pink;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100vh;
}
<div class='container'>
<div>
<button id='btn-1'>button 1</button>
</div>
<div>
<button id='btn-2'>button 2</button>
</div>
</div>