Button activated div slide goes under instead of over - javascript

I was trying to build an interface where when you click a button a full sized div with all it's content fills up the whole screen. There are two sliding divs, it works one way, but the other way the div slides under the first div.
I was attempting to use toggle - and switch to a css that increases the DIVS width property to take over the screen.
Is there a way to accomplish this? Here is my code and a fiddle at the bottom:
HTML:
<div class="container">
<div class="left">
<div class="one">
<a href="#"><div class="openone">
<div class="vertical-text-one">OPEN ONE</div>
</div></a>
ONE</div></div>
<div class="right">
<div class="two">
<a href="#"><div class="opentwo">
<div class="vertical-text-two">OPEN TWO</div>
</div></a>TWO
</div></div>
<div class="header" >
TOP
</div>
</div>
Javascript:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
});
});
CSS snippet:
.left{
background-color: #06C;
width:50%;
height: 100%;
overflow:hidden;
float:left;
z-index: 1;
transition: width 1s;
}
.left.clicked {
width: 98%;
background-color: #06C;
z-index: 100;
}
.right{
background-color: #3AD;
float:right;
width:50%;
height: 100%;
z-index: 1;
transition: width 1s;
}
.right.clicked {
width: 98%;
background-color: #3AD;
z-index: 100;
overflow: hidden;
}
.two{
position:absolute;
top: 110px;
}
.one{
position:absolute;
top: 110px;
}
.openone {
position: relative;
height: 50%;
width:200px;
background-color: #06C;
left: 101%;
}
.opentwo {
position: relative;
height: 50%;
width:200px;
background-color: #3AD;
left: 0px;
}
http://jsfiddle.net/hmyLrzta/19/

Just expand your coding with this:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
$('.right').toggleClass('hidden');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
$('.left').toggleClass('hidden');
});
});
CSS:
.hidden {
display: none;
}
This will render the not active panel invisible using display: none;
http://jsfiddle.net/hmyLrzta/21/

Related

Reveal a div with dynamic height underneath another div inside a container?

So, I have a box of content that has a title and a description, which are positioned at the bottom of the div. Initially, the description is hidden. What I'm trying to do is when you hover over the div, the title should move up and reveal the description, which has a dynamic height.
Here's what I have now: https://codepen.io/tayanderson/pen/qJrmXE
The problem is that it wouldn't display correctly if the description was 1 line or 3 lines. The title div should move up depending on the size of the description div.
Here's an example of what I'm trying to do
HTML
<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur</div>
</div>
CSS
.grid-item {
height:300px;
background-size: cover;
width:300px;
position: relative;
overflow: hidden;
color: #fff;
.title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 20px;
}
.desc {
position: absolute;
bottom: 0;
transform: translateY(100%);
padding: 5px 20px;
}
&:hover .title {
bottom: 30%;
}
&:hover .desc {
transform: translateY(0%);
}
}
It this what you meant?
.inner, .inner:hover .grid-item.inner {
-webkit-transition:all linear 0.2s;
transition:all linear 0.2s;
}
.inner {
background: #afa;
width: 300px;
overflow: hidden;
position: absolute;
}
.grid-item:hover .inner{
margin-top: -100px;
}
<a class="grid-item" href="{{ .Permalink }}" style="background-image: url(images/recipes/{{.Params.image}})">
<div class="inner"><h3 class="title is-3">{{.Title}}</h3></div>
<div class="content"><p class="grid-item-blurb">{{.Description}}</p></div>
</a>
Note that I reversed the order of the inner elements.
.body {
background: #aaf;
height: 100px;
width: 300px;
overflow: hidden;
}
.inner, .content {
transition: all linear 0.2s;
}
.content {
height: 100%;
}
.inner {
background: #afa;
transform: translateY(100%);
top: 100%;
}
.body:hover .inner,
.body:hover .content {
transform: translateY(-100%);
}
<div class="body">
<div class="content">
Blue is a viewport (<body>, visible part of a page), which content should be compressed upon green slide-in
</div>
<div class="inner">Green is variable-height text which slides in on viewport hover</div>
</div>

On hover: Move div up, on top of sibling

I have the following setup:
<div class="" style="height: 400px !important;
width: 100% !important;
overflow: hidden;">
<div class="" style="height: 400px !important;
width: 100% !important;
background-color: red;">
</div>
<div class="" style="height: 400px !important;
width: 100% !important;
background-color: blue;">
</div>
</div>
So there's a div, which has a certain height. There are two divs inside it which have the same height, which means that their height together is twice as much as their container div. Overflow is hidden, so only the first div is showing.
I now want to wait for the user to hover, then animate and move the second div up, so that the second div is hiding the first div now. On unhover, I want to revert the whole thing.
How would I do something like this, am I on the right track?
You can use CSS transforms for this. When hovering the container div a transform is applied to the inner divs.
The transition rule is used to show the change in position when a hover starts and stops.
.container {
height: 400px;
overflow: hidden;
}
.container:hover .inner-2 {
transform: translateY(-100%);
}
.inner {
height: 100%;
transition: transform .6s ease-in-out;
}
.inner-1 {
background-color: rgba(255,0,0,.5);
}
.inner-2 {
background-color: rgba(0,0,255,.5);
}
<div class="container">
<div class="inner inner-1"></div>
<div class="inner inner-2"></div>
</div>
JSFiddle
It's worth noting that this method is much less processor intensive than the answers suggesting absolute positioning the element or changing its margin and will also result in a much smoother transition.
Sources: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ and https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Yes, you are on the right track. I would advise to not use inline styles though, but instead use classes and CSS markup.
You can use for example the margin for offsetting. This can be animated using CSS transitions.
I show this below.
.parent {
height: 100px;
overflow: hidden;
}
.parent:hover .child:first-child {
margin-top: -100px;
}
.child {
height: 100px;
transition: margin-top 1s;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="parent">
<div class="child red">
</div>
<div class="child blue">
</div>
</div>
To achieve this you can use CSS alone. If you wrap the child divs in another div which has it's margin-top animated when the container div is hovered, something like this:
.container {
height: 400px;
width: 100%;
overflow: hidden;
position: relative;
}
.child {
height: 400px;
width: 100%;
}
.slide {
margin-top: 0;
transition: margin 0.3s;
}
.container:hover .slide { margin-top: -400px; }
.child.red { background-color: red; }
.child.blue { background-color: blue; }
<div class="container">
<div class="slide">
<div class="child red"></div>
<div class="child blue"></div>
</div>
</div>
Alternatively you can just shrink the height of the first div, but this can cause overflow issues, depending on what the content of that element is:
.container {
height: 400px;
width: 100%;
overflow: hidden;
position: relative;
}
.child {
height: 400px;
width: 100%;
transition: height 0.3s;
}
.container:hover :first-child { height: 0; }
.child.red { background-color: red; }
.child.blue { background-color: blue; }
<div class="container">
<div class="child red"></div>
<div class="child blue"></div>
</div>
Its hard to reach nice animation when you overflow container, code below just swap them on hover:
CSS
Default state
div>div:first-child {
display: block;
}
div>div:last-child {
display: none;
}
Hover state
div:hover>div:first-child {
display: none;
}
div:hover>div:last-child {
display: block;
}
Alternative height rising
div {
position: relative;
}
div>div:first-child {
position: absolute;
left: 0;
top: 0;
}
div>div:last-child {
left: 0;
bottom: 0;
position: absolute;
height: 0 !important;
z-index: 1;
transition: height .5s linear;
}
div:hover>div:last-child {
height: 400px !important;
}
<div class="" style="height:400px !important; width:100% !important; overflow:hidden;">
<div class="" style="height:400px; width:100% !important; background-color: red;">
</div>
<div class="" style="height:400px; width:100% !important; background-color: blue;">
</div>
</div>
Here's a working
Fiddle
HTML
<div class="container" style="height:400px !important; width:100% !important; overflow:hidden;">
<div class="top" style="height:400px !important; width:100% !important; background-color: red;">
</div>
<div class="bottom" style="height:400px !important; width:100% !important; background-color: blue;">
</div>
</div>
CSS
.container:hover .bottom{
top: -400px;
}
.bottom{
position: relative;
top: 0px;
transition-property: top;
transition-duration: 1s;
}
The bottom div inside the container is relatively positioned and moves to the top when the container has the hover state.

Detect click inside/outside div

.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
Hello,
I have one question, is possible to detect focus and blur into div (class="box"). I would like to click in div class="box" (when div is active) and the red box (class="window") fadeOut and then when click outside "box" "window" fadeIn ?
Thank you for your time :)
You could do that using jQuery focus and blur event handler, .box on focus it hides .window and on blur it shows .window.
$(document).ready(function(){
$('.box').on('focus',function(){
$('.window').hide(200);
});
$('.box').on('blur',function(){
$('.window').show(200);
});
});
.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
You can detect focus/blur events on the .box and in those event handlers you can take the appropriate actions.
var boxEl = document.querySelector('.box');
boxEl.addEventListener('focus', function(e) {
console.log('focused');
});
boxEl.addEventListener('blur', function(e) {
console.log('blurred');
});
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
This can be done w/o using script, here in combination with the :focus pseudo class and the immediate sibling selector +
Note, for an element other than form elements to get focus, it need the tab-index set.
Stack snippet
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
transition: opacity 1s;
}
.box:focus + .window {
opacity: 0;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div tab-index="1" class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>

How to keep an image at 50% of the page and containing its height

I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.

CSS horizontal scroller, how to position "below" before "right"?

QUESTION
I've been searching a while and can't figure out how I should go about implementing a horizontal scroller.
This is my scroll area
_____________
| |
|___________|
Scroll area with two cards
_____________
|__| |
|__|________|
Scroll area with four cards, etc
_____________
|__|__| |
|__|__|_____|
Is there any way to implement this with position:relative; on the cards? I figure the container should have width:auto; but how can I get the next card to fall below, rather than to the right?
ANSWER
CSS horizontal scroller, how to position "below" before "right"?
I know its a little bit messy but, I think you could do something like this...
html:
<div class="container">
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<button id="ad">add div</button>
css:
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png);
}
div.wrap{
position: relative;
width:100%;
height:100%;
max-width:100%;
max-height: 100%;
overflow-y:hidden;
overflow-x: scroll;
}
div.top{
position: absolute;
height: 50%;
max-height:50%;
top: 0; left:0;
background-color: rgba(0,0,0,0.5);
}
div.top > div{
position:relative;
width:40px;
height: 100%;
background-color: rgba(255,255,255,0.5);
display: inline-block;
}
div.bottom{
position: absolute;
height: 50%;
max-height:50%;
bottom: 0; left:0;
background-color: rgba(0,0,0,0.5);
}
div.bottom > div{
position:relative;
width:40px;
height: 100%;
background-color: rgba(255,255,255,0.5);
display: inline-block;
}
button {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999999999999;
}
js:
var cCount = true;
$('#ad').click(function () {
if (cCount) {
$('.top').append('<div></div>');
$('.top').animate({width: $('.top').find('div').length * 40 + 'px'}, 1);
cCount = !cCount;
} else {
$('.bottom').append('<div></div>');
$('.bottom').animate({width: $('.bottom').find('div').length * 40 + 'px'}, 1);
cCount = !cCount;
}
});
You can also check it out Here
Figured it out, requires flex-flow: column wrap with display: flex and align-content: left
#deck {
flex-flow:column wrap;
display:flex;
align-content:left;
height:204px;
width:250px;
overflow:auto;
background-color:grey;
}
.card {
background-color:white;
margin:1px;
width:100px;
height:100px;
}
<div id="deck">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
Margin doesn't seem to be affecting right side, but the layout looks good
http://jsfiddle.net/kcxnany7/1/

Categories