So I have a tr within a table. onClick it appends some html. I'm trying to make the tr it appends transition nicely, so I'm trying to set the height to 0, then onClick set it to auto.
However, my div isn't taking height 0. I can add height: 0; but it still keeps the height.
My HTML:
<tr class="info_container">
<td colspan="7">Pick a time
<button id="time_btn">Button</button>
<span class="tickets_left_cont"> 7 tickets left</span>
</td>
</tr>
CSS:
.info_container {
background: #fff;
color: #000;
z-index: 999;
left: 0;
width: 100%;
padding: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 0;
text-align: left;
font-family: BreeSerifLt;
border-bottom: 3px solid #000;
}
#time_btn {
outline: 0;
padding: 10px;
background: #9A0FC7;
border: 0;
color: #fff;
display: block;
margin-top: 10px;
font-weight: 300;
font-family: BreeSerifLt;
}
What am I doing wrong? Why can't I make info_container class height 0 so it hides the div?
Thanks!
On tables, height and width behave as min-height and min-width
Related
How can I animate a height change after changing the height with javascript?
Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>
Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}
Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)
at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));
I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}
I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/
+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>
I want to create a HUD display on the bottom of my game. To the right of the HUD bar will be a nested minimap.
When I hover over the HUD, it will increase opacity of the
When I click on the minimap (child of HUD), it will expand a larger map. When I click on the HUD (parent element), it will apply the opacity rule with toggleClass().
I don't want this opacity rule to be applied when I click on the child minimap though, only when I click on the parent HUD. Right now it's being applied when I click on parent and child.
See DEMO
HTML
<div id="HUD">
<div id="map"></div>
</div>
JS
$("#HUD").click(function(){
$(this).toggleClass("HUDactive");
});
CSS
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float:right;
}
In Javascript a concept called "event bubbling" occurs. When you click on an element the events registered to that element occur first. Once they are completed, the event travels to the parent, and so on. You can use this to your advantage in this case, by stopping the event at the "#map" element.
Jquery has a handy way of doing this using stopPropagation.
Just add this code to your example:
$("#map").on('click', function(event){
event.stopPropagation();
});
You can check whether the click was happened in the #map element like
$("#HUD").click(function(e) {
//if #map don't have any descendants then
//if (!$(e.target).is('#map')) {
if (!$(e.target).closest('#map').length) {
$(this).toggleClass("HUDactive");
}
});
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HUD">
<div id="map"></div>
</div>
I am currently putting together a scrolling image gallery using the free unslider jquery code.
I have implemented scrolling arrows and would just like to add dots to show the number of slides and slide location. I have set dots: true in the script.
Here is the result on the site:
cjeffryes.comoj.com
As you can see my CSS is being applied to some degree, you can see that 2 of the slides have an outline with the third being solid, it just seems that the dots themselves are huge. The CSS decalres that the li dots should be 10x10px. Appreciate any help, here is my CSS:
.banner
{
position:absolute;
margin-top:100px;
}
.banner li
{
list-style: none;
min-height:256px;
min-width:960px;
overflow:auto;
float:left;
}
.banner ul
{
padding: 0;
margin: 0;
float:left;
}
.dots
{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active
{
background: #fff;
opacity: 1;
}
1] You have the .banner li set to min-height:256px; min-width:960px;.
2] Just add min-height:none; and min-width:none; to your .dots li CSS declaration.
Change this:
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
To this:
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
min-height:none;
min-width:none;
}