When I click a div, I want a second div to expand/collapse. That is done using JS, HTML, and CSS. Now I want the CSS transition to animate.
Right now all I get is a jumping expansion and either a scroll (Edge) or a jump after a wait (Chrome, Opera, Firefox).
I've tried to set height to 1px instead of 0px, but that doesn't change anything.
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.height == '100%') {
ele.style.height = '0px';
} else {
ele.style.height = '100%';
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
overflow: hidden;
padding-left: 20px;
height: 0px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
Codepen behaves as I know the full site does, so for good measure; here's the codepen: http://codepen.io/anon/pen/ezJQjM
From http://css3.bradshawenterprises.com/animating_height/
Instead of using 100%, just "let it" get the auto value by not restraining it.
NOTE: 100px is just "any number bigger than the actual size"
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.maxHeight != '0vh') {
ele.style.maxHeight = '0vh';
} else {
ele.style.maxHeight = "100vh";
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
padding-left: 20px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
EDIT: Changed everything to VH (viewport height) so it will never grow bigger than 100% of the screen height and will adapt to the max height of any screen.
Also switched the "style="max-height: 0vh;" to the element itself instead of the class, so you could be unsetting it with ele.style if needed (otherwise you will need to set a new value to override the class.
Are you willing to use jQuery? It offers some cool animation possibilities, and may accomplish what you are trying to do. This is just a possible alternative to your approach.
Check out my fiddle here:
https://jsfiddle.net/3mo28z1t/11/
<div class="main" id="clicker">
Expand
</div>
<div class="secondary" id="expandable">
number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
$( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
function(){
$("#clicker").click(function () {
$(".secondary").toggle("slow");
});
});
});
</script>
The problem is caused by switching units of measure, so from pixels to percent. I would probable do it a little differently though.
growDiv = function(id) {
document.getElementById(id).classList.toggle('expanded');
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
transition: max-height .5s ease;
overflow: hidden;
padding-left: 20px;
max-height: 0;
cursor: pointer;
}
.secondary.expanded {
height: 100%;
max-height: 100px;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
You'll notice the JS is a bit simpler, and it relies more on the CSS.
Related
So I got this slideshow code working, where when you click an image, it fades into another image. However, if, for example, there was a vertical orientated image with empty space on its right, if you click that space the whole slideshow kind of glitches out.
Here's my website where you can test it out:
http://danielshultz.github.io
The code:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 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;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
If i understood, the problem here is when you click outside the image but inside the square of the previous image, then the slide does not change.
This approach, makes no changes in yout javascript but changes the html and some selectors.
In the example below, I wrapped each <img> into a '<div>' and changed the selectors to match with those divisions. Minor stylings too.
So, if you click outside the image but over the div, the slide changes as expected.
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 div.holder").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
body {
font-family: verdana;
font-size: 8pt;
color: #000;
}
#cf2 {
position: relative;
height: 600px;
width: 600px;
margin: 0 auto;
}
#cf2 div.holder {
position: absolute;
left: 0;
height: 600px;
width: 600px;
opacity: 0;
z-index: 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;
}
#cf2 div.holder img {
max-height: 600px;
max-width: 600px;
}
#cf2 div.holder.visible {
opacity: 1;
z-index: 1;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td valign="center">
<div id="cf2" class="shadow">
<div class="holder visible">
<img src="//danielshultz.github.io/Images/Cute-Door-1.jpg" alt="1"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-2.jpg" alt="2"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-3.jpg" alt="3"/></div>
</div>
</td>
</table>
I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...
This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>
It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}
I don't know if I am specific enough,
But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.
Here is the demo:
http://jsbin.com/limiyisi/1/
HTML
<body>
<div id="overlay"></div>
<a style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">
Button </a>
<div class="ex-height"></div>
CSS
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
.backdrop {
opacity: 0.4 !important;
}
.ex-height {
height: 1204px;
}
Jquery
$(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
Thanks for any helpful advice!
Set the height of the overlay to the document's height:
$('#overlay').toggleClass('backdrop').height($(document).height());
Change the #overlay to
#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
If that doesn't quite work - try changing the bottom and right values to 100%
demo
$(function() {
function toggle() {
var pageHeight = $('html, body').innerHeight();
$('#overlay').toggleClass('backdrop').height( pageHeight );
}
$('[data-toggle="active"]').click(toggle);
});
I've been trying to get my off-canvas menu working by scrolling particularly in landscape mode because the list itself runs longer than the size of the screen. This menu is shown below 768px for tablet and mobile.
To clarify, the menu items go longer then the screen space and I'm trying to get it to scroll by doing multiple methods, such as overflow-y: scroll, -webkit-overflow-scrolling: touch and more (all works in desktop browser at phone sizes when I was messing in the inspector).
I've been trying everything to inspect the elements and get the menu to scroll when needed and not the background (website/page behind menu). Here is some of my markup and styling, I'm also including a live link to inspect as its way easier than pasting everything in here. Any help is kindly appreciated!
LIVE LINK
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1">
<a class="m-storyLink mobile-nav-link" href="">1</a>
2
3
3
Contact Us
4
<ul class="mobile-social">
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<header id="header" class="header headroom headroom--pinned">
<!-- mobile header -->
<div class="mobile">
<button id="showLeftPush">MENU</button>
<img src="img/home/logo.png" alt="#"
</div>
And CSS
.cbp-spmenu-push-toright {
left: 240px!important;
}
.cbp-spmenu-push-toright.cbp-spmenu-push {
overflow: hidden;
position: fixed;
}
/* General styles push menu*/
.cbp-spmenu {
background-color: #000;
position: fixed;
font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
padding: 110px 0 0 0;
}
.mobile-nav-link {
background-position: 10px center;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
min-height: 300px;
height: 100%;
top: 0;
z-index: 1000;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch;
}
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-right {
right: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
position: relative;
left: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
LIVE LINK: http://bit.ly/1eGCShX
cbp-spmenu has a min-height of 550px. This is what is limiting your ability to scroll it in smaller resolutions.
Remove the min-height and you should be fine. Of course, do it as a media query, so it only is in effect on mobile devices.
-----------update----------------
not sure if you just changed it, but I took another look and now I don't see the min-height, but adding overflow:auto to the same cbp-spmenu element also makes it scroll.
I am looking to create a slide out DIV, like the one here when you press "Contact". Does anybody know of anything similar to this?
Making use jQuery's slideToggle() method could help you do this.
Example
HTML:
<div id="contact">
Contact me!
</div>
Contact
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
yet another sample, but without jquery, and with a class add/remove approach :)
Demo: http://jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
ohbtw, the html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>
Another sample
Sample
http://jsfiddle.net/9cdYR/
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
With jQuery, you make the div and add display:none with css. Then, something like:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.