I have 3 divs positioned next to each other, and background div. We'll call the background div bg div. Whenever one of the 3 divs get selected, the bg div gets positioned on top of the selected div. (Basically, something like a segmented controller.)
When I try making the bg div transition to its new position. I did the following to transition:
transition: left linear .2s;
When you select a div for the first time, the animation doesn't happen, but the bg div does move over to its correct position (just without the animation). After the second click and on, it works.
How can I add a transition to the bg div?
JSFiddle
$('.inner').click(function() {
var pos = $(this).position();
$("#back").css('left', pos.left + "px");
});
#wrapper {
width: 600px;
height: 30px;
position: relative;
}
.inner {
display: block;
float: left;
width: calc(100% / 3);
height: 50px;
}
#back {
background-color: yellow;
height: 100%;
z-index: -1;
width: calc(100% / 3);
position: relative;
transition: left linear 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="inner">First Option</div>
<div class="inner">Second Option</div>
<div class="inner">Third Option</div>
<div id="back"></div>
</div>
For a transition to take effect, there should be an initial value defined from which the animation would start.
Here #back does not have an initial left value due to which on the first click, it would jump directly to the left position defined on click.
This will take be the initial value for the next transition and hence from then on you would see the animation in transition.
So all you need to do is add left:0px; in css for #back.
Hope this helped.
You should add left: 0; property for css #back
$('.inner').click(function() {
var pos = $(this).position();
$("#back").css('left', pos.left + "px");
});
#wrapper {
width: 600px;
height: 30px;
position: relative;
}
.inner {
display: block;
float: left;
width: calc(100% / 3);
height: 50px;
}
#back {
background-color: yellow;
height: 100%;
z-index: -1;
width: calc(100% / 3);
position: relative;
transition: left linear 1s;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="inner">First Option</div>
<div class="inner">Second Option</div>
<div class="inner">Third Option</div>
<div id="back"></div>
</div>
Related
$('#div-1').click(function() {
if ($('#div-2').hasClass('shown')) {
$(this).css('left', 0);
$('#div-2').removeClass('shown');
} else {
// $('#div-2').css('width', 'auto');
$('#div-2').addClass('shown');
$(this).css('left', $('#div-2').width());
}
})
#div-1 {
background-color: red;
position: absolute;
width: 25%;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
z-index: 1;
}
#div-2 {
background-color: blue;
position: absolute;
max-width: 0;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
overflow: hidden;
}
.shown {
min-width: 25% !important;
max-width: 500px !important;
transition: 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-1"></div>
<div id="div-2">
<p>I want all this text to show up and it could be any length...</p>
</div>
I have two divs and one starts out hidden (with 0 width, not hidden display). When you click on the other div, I need the hidden div to slide out and push the click div out of the way as far as it needs to be pushed. The hidden div contains text that could be of variable length. In essence, I want to change the hidden div's width from 0 to auto and shift the click div over to the right by this new amount. I know you can't animate auto so I have been using the max-width trick shown here.
My problem is that the click div seems to slide out to the hidden div's new min-width but not to its actual width. Here is a fiddle of the problem: https://jsfiddle.net/tjfhzvd9/1/. Click on the red box in that fiddle to see why this is not working. I want that div to slide as far as it needs to but no farther.
I also tried doing this with Jquery.animate() but that did not work either. Your help is appreciated.
Here is a pure css solution:
HTML:
<div id="container">
<div id="div-2">
<p>I want all this text to show up ...</p>
</div>
<div id="div-1"></div>
</div>
CSS:
#container {
display: flex;
flex-direction: row;
}
#div-1 {
background-color: red;
width: 25%;
min-height: 100vh;
}
#div-2 {
background-color: blue;
width: auto;
max-width: 0;
transition: max-width 1s ease;
overflow: hidden;
}
.shown {
max-width: 75% !important;
}
JS:
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})
CSS solution works fine but you may notice an undesirable text rendering effect. This happens because a paragraph constantly adapts it's width to the parent container's width during animation cycle. We should set a fixed width on the paragraph before running the main animation cycle:
var div2MaxWidth = 0;
// Get div2 max width
$('#div-2').css({
transitionDuration: '0s',
maxWidth: '75%', // <=== 100% - red.width
position: 'absolute',
visibility: 'hidden'
});
div2MaxWidth = $('#div-2').width();
$('#div-2').css({
maxWidth: '0',
position: 'static',
visibility: 'visible'
});
// Set fixed width to the paragraph inside div2 and restore transition's duration
$('#div-2 > p').width(div2MaxWidth + 'px');
$('#div-2').css('transitionDuration', '1s');
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})
I am a little new to using TweenLite. As you will see in the example, I have a div that I slide up which is all good, and I want to rotate the div itself so am using rotation 18deg however, can rotate this before the animation as appears it animated the rotation as it slides up. So I need to rotate out of view.
$(document).ready(function(){
TweenLite.to("#slide_one .background",
0.4, // set the speed
{rotation:"18deg", top:"0" // set the angel and end position
});
});
.container {
display: block;
width: 300px;
height: 250px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.background {
position: relative;
display: block;
width: 200%;
height: 200%;
left: -100%;
bottom: -300px;
}
.background.dark-blue {
background: #071D49;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="slide_one">
<div class="background dark-blue"></div>
</div>
</div>
For anyone wanting to know the solution you have to use set so does not animate
TweenLite.set(slide_one, { rotation: "18deg" });
I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:
The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Here is what you need to do (see width of both divs and text-align properties):
You can give them background color to see z-index works perfectly :)
#first {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 1;
}
#second {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 2;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;
The following will cause the absolute positioned children to stay within the containing div:
#container {
position: relative;
}
Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.
One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%.
Then the inner divs will take on the width of their parent.
See this working JSFiddle.
#container {
position: relative;
width: 100%;
height: 100px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
#first{
position: absolute;
}
#second{
position: absolute;
}
<div id="container" class="container">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Your main issue is that the divs will not have any relative width to the parent div.
Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.
However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).
You can remedy this one of two ways:
Force the divs to be centered
Give both divs the following (extra) CSS:
left: 50%;
width: 100%;
margin-left: -50%;
This will literally center them in their parent div.
or
Force the divs to be the same size as their parent
Give both the divs the following (extra) CSS:
top: 0;
bottom: 0;
left: 0;
right: 0;
This sets the divs to span their entire parent's height and width.
In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.
If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.
Hope one of these solutions helps you :)
Try this style:
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
I am trying to add transition to a growing div.
Here is a jsfiddle: http://jsfiddle.net/fL5rLr2y/
This jsfiddle represent my real world problem.
I have the following markup:
<div class="container">
<div class="inner">
</div>
</div>
And the following css:
html, body {
height: 100%; } .container {
position: relative;
height: 80%;
background-color: blue; }
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red; }
.inner.open {
height: initial;
bottom: 20px; }
Here is my js:
$('.inner').click(function() {
$(this).toggleClass('open');
});
I am trying to add the transition using pure css. How can I do it?
If pure css solution is not possible, how can I use js in order to solve it?
UPDATE
After a lot of investigations, it seems that using calc is the only option to do it in pure css.
Unfortunately I have bed experience with calc, especially with safari and mobile (browser crashes and other surprises). I prefer to avoid using calc for now and use javascript solution to simulate that.
Any idea how?
Edit your .inner and .inner.open classes as demonstrated below ... you need to set a predetermined height to .open
If you're going to use CSS3 transitions you can opt to use calc() to determine your .open height without compromising browser compatibility.
Check demo
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 1s;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
}
.inner.open {
height: calc(100%-50px);
bottom: 20px;
}
You can use the dynamic height by updating the style below. Demo at http://jsfiddle.net/fL5rLr2y/8/
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
-webkit-transition: height 1s;
transition:height 1s;
}
.inner.open {
height: calc(100% - 50px); /* top 30px + bottom 20px */
}
Or you can use jQuery animation. See the output at http://jsfiddle.net/8mn90ueb/3/ and code below
Remove the open class and the toggle type
$('.inner').click(function() {
var currentHeight = $(this).height();
if(currentHeight > 50){
currentHeight = 50;
}
else{
currentHeight = $('.container').height() - 50;
}
$(this).animate({
height:currentHeight
},1000,function(){});
});
The CSS transition property is what you need. The height calculation of .inner is now made with jQuery.
Demo with jQuery calculation
$('.inner').click(function() {
var parentHeight = $(this).parent().outerHeight() - 50; // Get parent height - 50px
var innerHeight = $(this).outerHeight(); // Get inner height
// if the inner height = 50px then change height to the parent height calculation
// otherwise return to 50 height
if (innerHeight === 50) {
$(this).height(parentHeight);
} else {
$(this).height(50);
}
});
html,
body {
height: 100%;
}
.container {
position: relative;
height: 80%;
background-color: blue;
}
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="inner"></div>
</div>
If you change your mind about calc()
The CSS transition property is what you need along with height: calc(100% - 50px) on the open class. The calc gets you a 30px gap at the top and 20px gap at the bottom when open. The bottom property has been removed.
Compatibility:
The transition property is unlikely to need browser prefixes. Have a look here for its browser support.
calc() enjoys widespread support including, importantly, IE9 + support. More information here. To provide a fallback height for IE 8 and below, provide a normal height percentage property before the calc height for older browsers to use. Something like height: 70%
Demo with CSS only
$('.inner').click(function() {
$(this).toggleClass('open');
});
html,
body {
height: 100%;
}
.container {
position: relative;
height: 80%;
background-color: blue;
}
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 0.5s;
}
.inner.open {
height: 70%; /* pick a percentage height for IE 8 and below */
height: calc(100% - 50px); /* 100% height minus 30px at the top + 20px at the bottom */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="inner"></div>
</div>
<body>
<div id="parent_scroll">
<div id="slider">
<div class="slides">Slide1</div>
<div class="slides">Slide2</div>
<div class="slides">Slide3</div>
</div>
</div>
</body>
<style>
#parent_scroll{
width: 800px;
height: 350px;
border: 1px solid grey;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
#slider{
width: 2430px;
border: 1px solid green;
height: 350px;
position: absolute;
}
.slides{
width: 800px;
height: 350px;
border: 1px dotted blue;
float: left;
background-color: grey;
font-size: 30px;
text-align: center;
}
I am trying to implement a slide show sort of a feature. But i am not sure what logic goes into the javascript over here, i know i need to use a setInterval() function. The only part is how i would work out the width of the element with the id:"slider". Pointers would be helpful
EDIT: trying to implement this without jQuery
I see in your CSS that your widths are static, but if you were to add slides you should
calculate the #slider width using the width of .slides times the amount of slides..
Then, save your .slides width (including margin) as your offset, and animate #slider's left position using the offset..
EDIT: Actually, there's another technique I've been fiddling with so you won't have to calculate the widths, and that's using display inline-block like this:
#slider { white-space:nowrap;}
.slides { display:inline-block;}
this will automatically have all your slides on the same line and then you can animate using margins.
Let me know if that clears it up for you.. do you need a code example?
EDIT: example (using css animations)
Javascript
var slider, slides, offset, amount, _timer, _curindex = 0;
function initSlider() {
slider = document.getElementById("slider");
slides = document.getElementsByClassName("slides");
offset = slides[0].offsetWidth+2;
amount = slides.length;
slider.style.width = offset*amount;
_timer = setInterval(moveSlide, 3000);
}
function moveSlide() {
_curindex = (_curindex == amount-1) ? 0 : _curindex+1;
slider.style.left = -_curindex*offset+"px";
}
initSlider();
FIDDLE
Like this? Pure HTML CSS:
<div id="parent_scroll">
<div id="slider">
<div class="slides"><img src="http://placehold.it/350x150/ff0000/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/00ff00/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/0000ff/000000" alt=""></div>
</div>
</div>
DIV#parent_scroll{
width: 350px;
height: 150px;
overflow: hidden;
}
DIV#slider{
position: relative;
width: 1050px;
animation: slideme 5s infinite;
-webkit-animation: slideme 5s infinite;
}
#keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
#-webkit-keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
DIV.slides{
float: left;
}
DIV#slider:before, DIV#slider:after{
display: table;
content: "";
}
DIV#slider:after{
clear: both;
}
DIV#slider{
zoom: 1
}
http://jsfiddle.net/yLTKe/3/
Add JS to make it dynamic
you should try this code
<div id="div1" class="slides" style="width:800px...">Slide1</div>`
and in js code
var slide1 = document.getElementById("div1");
//if you want to add width
slide1.style.width= parseInt(slide1.style.width) + 100 + "px";`