Here is what I have so far...
http://codepen.io/john84/pen/FctgH
<div class="container">
<div class="outer">
<p>BOTTOM CONTENT</p>
<div class="box">
<p>TOP CONTENT</p>
</div>
</div>
</div>
.container {
position:relative;
overflow:hidden;
}
.outer {
width: 300px;
height: 300px;
background: lightblue;
overflow:hidden;
}
.box {
position:absolute;
bottom:0;
left:0;
width: 300px;
height: 300px;
margin-bottom: -300px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all: 0.8s ease;
transitions: all 0.8s ease;
background: rgba(151, 251, 152, 1);
}
.outer:hover > .box {
margin: 0;
}
.box p {
margin: 0;
padding: 5px 0 5px 0;
}
...can I make that transition happen using a button toggle as opposed to the hover? There will be multiple instances of this on the page if that makes a difference.
FYI - there is currently no JS used but I am not opposed to using it.
Here is a easy and fast solution:
Jquery:
$('.outer').click(function(e) {
$('.box').toggleClass('show');
});
CSS:
.show {
margin: 0;
}
and exlcude this part of your css:
.outer:active > .box {
margin: 0;
}
See JSFiddle HERE
Hope it helps...
Sorry if my english is bad...
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%);
}
}
I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.
The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', '-205px');
$('.content-wrapper').css('margin-right', "0");
$('.full-page-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', '0');
$('.content-wrapper').css('margin-right', "205px");
$('.full-page-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
transition: left 1s ease;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
<ul class="sidebarList">
<li>
</li>
</ul>
</div>
<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>
add overflow-x:hidden to your outer container
You need to transition the right CSS property on the sidebar, because that's the one you're changing.
#sidebar-right {
transition: right 1s ease;
}
Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
background: red;
transition: all 0.7s ease;
}
#sidebar-right {
transition: all 1s ease;
}
'all' enable to use transition on all property
I'm currently working on my website footer and would like it if the user clicks Contact Us that a yellow div appears from behind the footer.
Here is what I'm working on so far right now, but I can't seem to position the yellow box hidden behind the footer. The yellow area will be roughly 300px in height when visible.
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "40px"});
}
});
footer {
width:100%;
display:block;
background:#ccc;
position:fixed;
bottom:0;
left:0
}
.container {
overflow:hidden;
height: 60px;
float:left;
}
.one {
position: relative;
bottom: 0;
background-color: lightblue;
z-index: 1;
cursor:pointer;
overflow: hidden;
height: 40px;
}
.two {
position: relative;
bottom: 40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
<div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>
<footer>
<ul>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</footer>
Thank you.
Here's work slide:
.container {
overflow: hidden;
height: 60px;
float: left;
position: absolute; /*add this, and */
bottom: 20px; /* this*//*pixel based on what you wish*/
}
UPDATED DEMO:
Check Update Fiddle Here
Try this one. It uses jQuery animate to slide.
http://jsfiddle.net/armqc25a/
JS
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".container").animate({"bottom": "0px"});
}
else
{
clicked=true;
$(".container").animate({"bottom": "40px"});
}
});
CSS
footer {
width:100%;
background:#ccc;
position: fixed;
bottom:0;
height: 40px;
left:0;
z-index: 1000;
}
.container {
overflow:hidden;
height: 40px;
position: absolute;
bottom:0;
width: 100%;
z-index: 1;
}
.one {
position: relative;
background-color: lightblue;
cursor:pointer;
}
.two {
position: relative;
background-color: yellow;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
So I want this div to fade another div that has a black background at 0.5 opacity over it. But when i hover it ignores the image already in the div and fills a black then fades the other div. so it goes Image --> Solid black div --> then fades my second div.
https://jsfiddle.net/70e890e6/
HTML:
<div class="box1">
<div class="img_hover_effect"></div>
<img src="images/portfolio/charity.png" class="box1_img">
<img src="images/portfolio/charity/2.png" class="box1_img2">
</div>
CSS:
.img.img_hover_effect {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JQuery:
$(document).ready(function(){
$('.box1').on('mouseenter', function() {
$('.img_hover_effect').fadeIn(1000);
});
});
You can use jQuery hover like this :
$('.box1').hover(function() {
$('.hover').fadeIn(1000);
}, function(){
$('.hover').fadeOut(1000);
});
and some css changes :
.box1 {
position:relative;
height: 400px;
width: 350px;
margin: 0 auto;
margin-top: 100px;
float: left;
overflow: hidden;
}
.tree {
height: 100%;
width: auto;
display: block;
position: relative;
}
.hover {
position:absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
JSFIDDLE : https://jsfiddle.net/70e890e6/4/
You could use a CSS pseudo-class for the desired hover effect. I'd recommend applying the class directly to the images you wish to have the hover effect rather than overlaying with another div.
.hover-effect:hover{
background-color: #000000; //or whatever colour fade you are looking for
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
My Problem is that i cant get the twitter bootstrap to work in my website
whereas it works perfectly fine in the fiddle: http://jsfiddle.net/Mns8q/32/
Can anyone tell me what is the problem.?
Thanks in advance.
This code is present in the view that is called when you reach the url in my website, which is same as the fiddle :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>
<style>
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.menu {
height:100%;
/* background-color: #3D6AA2; */
&.collapse {
float:left;
height: 100% !important;
width: auto;
}
&.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
&.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
&.collapse.in.width {
width: auto;
}
&.collapse.in.height {
height: auto;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
}
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
html = textHash[key];
$('#contentm').html(html);
}
$("#menu a").click(function(e) {
$('#menu').collapse('hide');
changeContent(e.target.innerText);
});
textHash = {
"Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil. And by \"devil\", I mean Robot Devil. And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
"Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
"Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>
</head>
<body>
<div class="frame">
<div id="menu" class="menu nav-collapse collapse width">
<div class="collapse-inner">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
Menu
</div>
</div>
<ul class="nav nav-tabs nav-stacked">
<li><a>Futurama</a></li>
<li><a>Star Wars</a></li>
<li><a>Doctor Who</a></li>
</ul>
</div>
</div>
<div class="view">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="contentm">
Integer eu quam et lacus luctus molestie.
</div>
</div>
</div>
</body>
</html>
It appears that you are not using SCSS on your site, while you are on the jsfiddle.
You could re-write your CSS as follows:
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
}
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
.menu {
height:100%;
}
.collapse {
float:left;
height: 100% !important;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}