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>
Related
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I have a problem...In the following example i don't want that the div who is fixed get over the div with the background red.
Here is the example:
http://jsfiddle.net/HFjU6/3645/
#fixedContainer
{
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
Alright, I think I get what the OP wants. He wanted a container that stays fixed on the top of the viewport, but remains confined by a parent. This behaviour is known as a conditional sticky behaviour, and is actually implemented in both Firefox (without vendor prefix) and macOS/iOS Safari (with -webkit- prefix): see position: sticky.
Therefore the easiest (but also the least cross-browser compatible) way is simply to modify your markup, such that the sticky element stays within a parent, and you declare position: sticky on it:
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: -webkit-sticky;
position: sticky;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
transform: translate(-50%, 0); /* Negative left margins do not work with sticky */
}
#div1 {
height: 200px;
background-color: #bbb;
}
#div1 .content {
position: relative;
top: -100px; /* Top offset must be manually calculated */
}
#div2 {
height: 500px;
background-color: red;
}
<div id="div1">
<div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
<div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>
An alternative would be to use a JS-based solution. In this case, you do not actually have to modify your markup. I have changed the IDs for easier identification of the elements, however.
The gist of the logic is this:
When the scroll position does not exceed the bottom of the parent minus the outer height of the sticky content, then we do not do anything.
When the scroll position exceeds the bottom of the parent minus the outer height of the sticky content, we dynamically calculate the top position of the sticky content so that it remains visually in the parent.
$(function() {
$(window).scroll(function() {
var $c = $('#sticky-container'),
$s = $('#sticky-content'),
$t = $(this); // Short reference to window object
if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
$s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
} else {
$s.css('top', 0);
}
});
});
* {
margin: 0;
padding: 0;
}
div {
height: 500px;
background-color: red;
}
#sticky-container {
background-color: #bbb;
height: 200px;
}
#sticky-content {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
margin-left: -100px;
left: 50%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>
Old answer before OP clarified the question appropriately:
Just give them the appropriate z-index values. In this case, you want to:
Do not use static positioning. This can be done by using position: relative for the large elements, in conjunction with the originally position: fixed element.
Assign the appropriate stacking order. The grey <div> element to have the lowest z-index, followed by the position fixed element, and then by the red element.
There are some catchalls to stacking though: the stacking context is reset when you traverse up or down the node tree. For example, the example will not work if the elements are not siblings.
Here is a proof-of-concept example, modified from your fiddle so that inline CSS is removed.
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px;
z-index: 2;
}
#div1 {
height: 200px;
background-color: #bbb;
position: relative;
z-index: 1;
}
#div2 {
height: 500px;
background-color: red;
position: relative;
z-index: 3;
}
<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>
Just give the z-index.
Hope it helps...
http://jsfiddle.net/HFjU6/1/#run
#fixedContainer {
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
z-index: 2;
}
.div-red {
position: relative;
z-index: 5;
}
<div id="fixedContainer"></div>
<div style="height:200px;background-color:#bbb;"></div>
<div style="height:500px;background-color:red;" class="div-red"></div>
I am struggling all afternoon to resolve a problem. Maybe this is a common question but I could not find anything similar in here or on Google. I hope you guys can help.
I have a fixed positioned element on the left of the page and I want that the distance between that element and another on the page be always the same when the browser window is larger. How can I do it?
Now, the other element has to be set in percentage while the fixed element can be or not with pixels.
Is there any css calc(), javaScript, jQuery, something you can think of to resolve this?
HTML
<div class="fixed"></div>
<div class="left-element"></div>
CSS
body {
margin: 0;
padding: 0;
border: 1px solid black;
min-height: 2000px;
min-width: 100%;
}
.fixed
{
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
Here is the Fiddle
I have the same solution as #Calvin Claus but with just a minor css modifcation, no javascript needed
.right-element {
width: calc(100% - 400px);
height: 200px;
background-color: yellow;
margin-left: 400px;
}
fiddle
Update: Similar, but as you asked, the calc on the fixed element.
.fixed {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: calc(75% - 200px);
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
new fiddle
I came up with a simple jquery solution:
var distanceBetwennElems = 100;
function calcRightElemWidth() {
var rightElemWidth = $(window).width() - ($('.fixed').width() + distanceBetwennElems);
$('.right-element').css("width", rightElemWidth);
}
Just call this when the document is ready and the window is resized.
Also I removed margin and width form the .right-element css, because this is done by js now:
.right-element {
height: 200px;
background-color: yellow;
float: right;
}
https://jsfiddle.net/bjrno78p/2/
You can adjust the width of the left, fixed element, using calc. Here's an example using 500px as the desired distance between the elements, and 25% as the width for the right-element.
.fixed
{
// disired distance = 500px
// right-element width = 25%
width: calc(100vw - 500px - 25%);
}
Your updated fiddle
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>
I am planning a two-tier fixed position navigation at the top of my design.
As the user scrolls down the page, I would like the navigation to slide up until the first tier is mostly hidden.
If the user then hovers over the navigation, the container should slide down revealing the first tier again.
This hover effect should not fire if the user is at the very top of the browser window.
Additionally, when the user scrolls back to the very top of the page, the full two-tier navigation should again be fully visible as it is on the initial load.
I'm having trouble chaining these events together using javascript and have had to resort to a combination of CSS3 transitions and jQuery addClass/removeClass calls.
Additionally, I can only get the whole mish-mash to fire once. So once the user has scrolled down and back up there is no more animation.
My current code is viewable at this fiddle
Hopefully this gives an idea of what I'm trying to do.
Can anyone help me bring this monstrosity to life?
Code is as follows:
HTML
<div id="nav_wrap">
<div id="nav_one">
<h2>Nav One</h2>
</div>
<div id="nav_two">
<h3>Nav Two</h3>
</div>
</div>
<p>blah blah blah etc...</p>
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
float: left;
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap.fixed {
margin-top: -42px;
-webkit-transition: margin-top .5s ease-in-out;
box-shadow: 0 0 24px #111;
}
#nav_wrap.down {
margin-top: 0px;
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.drop {
top: 42px;
-webkit-transition: top .5s ease-in-out;
}
#nav_wrap.up {
top: 0;
-webkit-transition: top .5s ease-in-out;
}
Javascript
var top = $('#nav_wrap').offset()
.top - parseFloat($('#nav_wrap')
.css('marginTop')
.replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > top) {
$('#nav_wrap').addClass('fixed');
$("#nav_wrap").hover(
function () {
$(this).addClass('drop');
},
function () {
$(this).addClass('up');
}
);
} else if (y == 0) {
$('#nav_wrap').addClass('down');
}
});
You're overcomplicating your approach. All you actually need to do is toggle one class on scroll in your JavaScript. This CSS will do the rest.
Note: The code will need prefixes added for other browsers (-moz, -o, -ms) and I would look at improving the performance of the addClass part of the call in scroll as the event will be getting called a lot.
An example fiddle can be found here.
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap{
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.scroll {
margin-top: -42px;
box-shadow: 0 0 24px #111;
}
#nav_wrap.scroll:hover{
margin-top: 0px;
}
JS
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#nav_wrap').addClass('scroll');
}
else{
$('#nav_wrap').removeClass('scroll');
}
});