css transition height to hide content in container - javascript

I have a div absolute positioned located on the bottom side of the screen. I want to hide its content with an animation (not only setting display none) when a sibling div is clicked by transitioning max-height to 0.
The problem is that the content has at the same time child tags which keep height setted, causing to overflow the current body height.
What is the best solution to solve it?
I have reproduced the behaviour: https://codepen.io/javheroli/pen/QWbyZEr?editors=0110
.hide-container{
opacity: 1;
max-height: 4em;
transition: opacity .8s, max-height .5s;
}
.hide {
opacity: 0;
max-height: 0;
transition: opacity .3s, max-height .5s;
}

I think the easiest way would be to transition only the height property and add an overflow: hidden definition.
That way when you reduce the height the content just gets hidden. If you also want to animate the content you could animate the opacity of the child elements. It would be easier to check if you'd provided your HTML structure.

This can be fixed by adding overflow: hidden; to your .hide-container .hide element.

Related

Is there a way to get a fade in effect from hidden visibility (CSS, JS)?

In my webpage, I used CSS to set opacity=0 and transition:opacity linear 0.5s in the body, then used JS to set opacity=1 when the page loads. However, there is a <div> that I want to remain invisible, so I used CSS to set visibility="hidden". If I used opacity, my <div> would appear with the rest of the page.
Is there either
1. A way to set the body's opacity to 1, but not a <div> element inside it (I considered applying opacity to sections around it but I would like the entire page to appear at once)?
2. A way to fade in the text other than opacity (I tried the fadeIn() from jQuery, but I don't think it worked when my visibility was still hidden)?
Apply the visibility:visible for the div:
#main{
visibility: hidden;
}
#child{
visibility: visible;
}
<div id="main">main is not visible
<div id="child">child still visible</div>
</div>
Do opposite if you want child to be invisible and main visible. (But I don't think this is what you want.)
#main{visibility:visible;}#child{visibility:hidden;}
#main visibility is not necessary if this is the case.
The div with opacity set to 0 should still remain invisible, even though the body is now visible.
Refer to my example here:
http://codepen.io/partypete25/pen/rePXag
CSS
body {
opacity:0;
background:red;
transition:opacity linear 2s;
}
div {
width:100px;
height:100px;
background:blue;
opacity:0;
}
JAVASCRIPT
var x = document.getElementsByTagName("BODY")[0];
x.style.opacity = "1";

Javascript / CSS - fading in an image which doesn't appear?

When my webpage loads, I want there to be links. Once all the links are clicked, I want an image to fade in on the bottom of the page (the image says 'complete' which basically means the user has completed clicking all the links). I first hide the image when the webpage loads, like so;
<html>
<body>
<!-- links which need to be clicked go here -->
<img id='complete' src='../images/complete.png' alt='' />
</body>
</html>
<style>
#complete {
visibility: hidden;
}
</style>
<script>
// once all links are clicked
$('#complete').fadeIn();
</script>
With this code, #complete does not fade in (probably because visiblity is set to hidden). I tried making visiblity set to visible right before the fade in command but that still didn't make it fade in. I also tried making the css
#complete {
filter: alpha(opacity = 0);
}
and the script
$('#complete').fadeTo('slow', '100');
and that doesn't work, #complete just appears really fast rather than fading in slowly.
I am using IE8 with CSS, any idea on how to fix this?
on css
#complete {
display: none;
}
and on javascript
$('#complete').fadeIn();
And try to use latest jquery
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
See it on action: http://jsfiddle.net/KUqJL/ your problem is what I said about css
#complete {
visibility: hidden;
} replace with: display:none
Change your css to:
#complete {
display:none;
}
and if you'd like to use .fadeTo(), the second parameter must be an integer between 0 and 1.
$('#complete').fadeTo("slow", 1);
"slow" could also be replaced with a millisecond value such as 3000 (3 seconds), for an even slower fade.
$('#complete').fadeTo(3000, 1);
Here is a fiddle that may help.
visibility cannot be animated. Something is either visible or hidden, there are no middle stages.
But you can achieve this effect by using opacity instead of visibility, since visible elements have an opacity between 0 and 1.
#complete {
visibility: visible; /* this is the default so this line is not required */
opacity: 0;
}
And use the .animate() method.
$('#complete').animate({
opacity: 1.0
}, 'slow');
jQuery has methods like .fadeIn() .fadeTo() and .fadeOut() which animates opacity with the addition of setting the display property to none on 0 opacity and vica-versa when animating.
Since display: none not only makes elements invisible, but collapses them (width and height are 0 and the element is not part of the layout), I think the opacity property is more suitable for you.
This can also be done with CSS transitions:
#complete {
opacity: 0;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-webkit-transition: opacity 0.8s linear;
transition: opacity 0.8s linear;
}
#complete.fadedIn {
opacity: 1;
}
And the JavaScript than changes to:
$('#complete').addClass('fadedIn');

Transitioning Affixed Navigation bar - CSS

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.
Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.
When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.
Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.
Here's the FIDDLE.
Please help me in animating it when the user scrolls down.
To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.
What properties do you have available to change?
You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.
After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.
.navigation {
background: #fff;
/* position: relative; */
width: 100%;
top: -250px;
}
Then we can transition it to 0:
#nav.affix {
position: fixed;
top: 0;
z-index: 1030;
width: 100%;
-webkit-transition: all 2s ease-in;
transition: all 1s ease-in;
}
RESULT:
http://jsfiddle.net/ShL4T/8/
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
I could not get this to work until I implicitly added position:static to .navigation.

How get dimension of HTML shadow element via JavaScript

I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/
This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.

Slide + fade effect using CSS transitions

I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...
You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.
I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.

Categories