I've made a sort of accordion with three expanding divs (#a, #b, #c) in fiddle, but when I save it locally and open it in a browser the transitions are no longer smooth. I noticed specifically after clicking #b with #a expanded. I've included the HTML that references the CSS and JavaScript code. What's the cause and what is the best way to solve it?
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
<script src="accordion.js"></script>
</body>
Here is a link to the fiddle: http://jsfiddle.net/tJugd/3794/
It seems like it only happens when either #a is expanded and #b or #c are clicked or #b is expanded and #c is clicked.
Try using single click event handler for animations with .animate() easings property set to "linear", css transition for effects, set width of .middle div elements to 33%
$(".middle div").click(function() {
$(this).siblings().animate({
width: "10%",
opacity: 0.6
}, 0, "linear");
$(this).animate({
width: "80%",
opacity: 1
}, 0, "linear");
});
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
width: 33%;
height: 100%;
background-color: red;
}
#b {
width: 33%;
height: 100%;
background-color: blue;
}
#c {
width: 33%;
height: 100%;
background-color: green;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
#a,
#b,
#c {
transition: width 500ms, opacity 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/tJugd/3798/
Try this
window.onload = function() {
[].forEach.call(document.querySelectorAll('.inner'), function(el) {
el.addEventListener('click', function(e) {
this.parentElement.className = 'middle ' + this.id;
});
});
} //]]>
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
height: 100%;
background-color: red;
}
#b {
height: 100%;
background-color: blue;
}
#c {
height: 100%;
background-color: green;
}
#a,
#b,
#c {
width: 10%;
opacity: 0.6;
transition: all 3000ms;
}
.middle.a #a,
.middle.b #b,
.middle.c #c {
width: 80%;
opacity: 1;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle c">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
<div class="wrapper">
</div>
</div>
</body>
</html>
Related
I have a horizontal scrollable div with different element inside. I have a js function for move inside the div with a mouse wheel; I need to remove the event when i arrive at the end of the div for continue scroll down.
This is my example fiddle code:
<div class="wrapper">
<div class="container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
</div>
</div>
<div class="element-5"></div>
.wrapper {
width:100vw;
overflow-x: scroll;
}
.container {
height: 100vh;
width: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
.element-1,
.element-2,
.element-3,
.element-4{
width: 300px;
height: 90vh;
border: 1px solid green;
display: inline-block;
float: left;
}
.element-5{
width: 300px;
height: 100px;
background-color: red;
}
$('.wrapper').on("wheel", function(evt) {
evt.preventDefault();
$(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
});
I hope this is what you are looking for.
I just added a condition in your code to check if the container reached its right end.
$('.wrapper').on("wheel", function(evt) {
if($('.wrapper').width() + $('.wrapper').scrollLeft() < $('.container').width()) {
evt.preventDefault();
$(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
}
});
.wrapper {
width: 500px;
overflow-x: scroll;
}
.container {
height: 200px;
width: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
.element-1,
.element-2,
.element-3,
.element-4{
width: 300px;
height: 150px;
border: 1px solid green;
display: inline-block;
float: left;
}
.element-5{
width: 300px;
height: 200px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
</div>
</div>
<div class="element-5"></div>
I am trying to make a horizontal transition when scrolling down and up to show and resize (shrink) div of the first element. I used inline-block to put them in the same position so that when one has been shrunk the other element will slide through but I am a bit confused to achieve this.
I tried to calculate the height and the offset position of the first inline element. This obviously will work for the first inline element but it won't work on the second inline element because it's in the same offset position.
Can you guys give me a bit of direction or tips to achieve this?
var topofDiv = $(".one").offset().top;
var heightDiv = $(".one").outerHeight();
$(window).scroll(function() {
if ($(window).scrollTop() > (topofDiv + heightDiv)) {
$(".one").show();
} else {
$(".one").hide();
}
});
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
width: 100vw;
height: 100vh;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section div {
font-size: 100px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
<div class="container">
<div class="content-wrapper">
<div class="section one">
<div>one</div>
</div>
<div class="section two">
<div>two</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
The show() and hide() calls need to be swapped over, they're in the wrong sides of your if condition. Also, the page height needs to be greater than the height of one of the .section elements for the transition to work properly, and the .container needs to be in fixed position for the scroll to have no effect on it. Try this:
var topofDiv = $(".one").offset().top;
var heightDiv = $(".one").outerHeight();
$(window).scroll(function() {
if ($(window).scrollTop() > (topofDiv + heightDiv)) {
$(".one").hide();
} else {
$(".one").show();
}
});
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section div {
font-size: 100px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
<div class="container">
<div class="content-wrapper">
<div class="section one">
<div>one</div>
</div>
<div class="section two">
<div>two</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
I have 2 div both are 50% width and float left what I want if the right div doesn't have content then left div width should be 100%.
if ($('.wrap .box2').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1>Hello 2</h1>
</div>
</div>
So what I want if .box2 dont have text inside h1 then left div width should be 100%
if ($('.wrap .box2 h1').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1></h1>
</div>
</div>
I just ran this code and the left div took the whole space
Try this:
.wrap {
width: 100%;
display: flex;
}
.wrap .box1 {
width: 50%;
background: red;
flex-grow:1;
}
.wrap .box2 {
width: 50%;
background: green;
}
.wrap .box2:empty {
width: 0;
}
it works without using javascript/jquery and uses flex-boxes and the :empty selector.
I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle
I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.
I'm trying this way, but didnt work. Is it possible scroll to target if its inside div
$(document).ready(function(){
$('button').click(function(){
$('.box').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:
$(document).ready(function() {
$('button').click(function() {
$('.left').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box {
clear: both;
}
.left {
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find {
margin-top: 400px;
}
#find p {
background-color: green
}
.right {
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.
$(document).ready(function(){
$('button').click(function(){
var bt = $("#find").offset().top;
$('.left').animate({
scrollTop: bt
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>