I was wondering if it is possible to make #text-1 to appear with an animation of opacity:0; to opacity:1; when #screamer is hovered over?
I want #text-1 to appear under #screamer in a transition when div b is hovered over, div b is CSS circle (box with border-radius of 50% to width of 60px and height 60px) with a background image. the box color has an opacity of 0.
Here is the relevant code:
/* ABOUT */
#aboutus {
text-align: center;
margin: 0px;
margin-top: -35px;
font-weight: 500;
}
/* MANAGERS */
#managers-head {
font-weight: 500;
}
#importantpeople {
text-align: center;
}
#importantpeopletxt {
text-align: center;
}
#manager-1 {
font-weight: 500;
float: left;
margin-left: -2px;
display: inline-block;
text-align: left;
margin-left: 1px;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
margin-right: 6px;
}
#manager-3 {
font-weight: 500;
float: right;
margin-right: 10px;
display: inline-block;
text-align: left;
padding-right: 6px;
}
#important {
width: 100%;
height: 300px;
background-color: #ff9900;
position: absolute;
z-index: -1;
top: 430px;
}
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
margin-left: 3%;
display: inline-block;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
display: inline-block;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: right;
margin-right: 3%;
display: inline-block;
}
#text-1 {
text-align: left;
padding-right: 150px;
float: left;
}
#text-2 {
text-align: center;
padding-right: 150px;
}
#text-3 {
text-align: right;
padding-right: 150px;
float: right;
}
<div class="container">
<div class="row" id="importantpeople">
<div class="twelve columns">
<h4 id="managers-head">Our Managers</h4>
</div>
<div class="row" id="importantpeople">
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</div>
<div class="row" id="importantpeopletxt">
<h6 id="manager-1">Screamer</h6>
<h6 id="manager-2">KINZU</h6>
<h6 id="manager-3">Swezii</h6>
<p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
<p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
I was wondering if it is possible to make #text-1 to appear with an
animation of opacity:0; to opacity:1; when #screamer is hovered over?
Since #screamer and #manager-1 aren't siblings or parent-child, you'll need JavaScript for this.
You've tagged jQuery, so here's a quick-and-dirty:
$('#screamer').hover(
function() {
$('#text-1').animate({opacity: 1});
},
function() {
$('#text-1').animate({opacity: 0});
}
);
CSS
#text-1 {
opacity: 0;
}
Snippet
$('#screamer').hover(
function() {
$('#text-1').animate({opacity: 1});
},
function() {
$('#text-1').animate({opacity: 0});
}
);
/* ABOUT */
#aboutus {
text-align: center;
margin: 0px;
margin-top: -35px;
font-weight: 500;
}
/* MANAGERS */
#managers-head {
font-weight: 500;
}
#importantpeople {
text-align: center;
}
#importantpeopletxt {
text-align: center;
}
#manager-1 {
font-weight: 500;
float: left;
margin-left: -2px;
display: inline-block;
text-align: left;
margin-left: 1px;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
margin-right: 6px;
}
#manager-3 {
font-weight: 500;
float: right;
margin-right: 10px;
display: inline-block;
text-align: left;
padding-right: 6px;
}
#important {
width: 100%;
height: 300px;
background-color: #ff9900;
position: absolute;
z-index: -1;
top: 430px;
}
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
float: left;
margin-left: 3%;
display: inline-block;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
display: inline-block;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
float: right;
margin-right: 3%;
display: inline-block;
}
#text-1 {
text-align: left;
padding-right: 150px;
float: left;
}
#text-2 {
text-align: center;
padding-right: 150px;
}
#text-3 {
text-align: right;
padding-right: 150px;
float: right;
}
#text-1 {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row" id="importantpeople">
<div class="twelve columns">
<h4 id="managers-head">Our Managers</h4>
</div>
<div class="row" id="importantpeople">
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</div>
<div class="row" id="importantpeopletxt">
<h6 id="manager-1">Screamer</h6>
<h6 id="manager-2">KINZU</h6>
<h6 id="manager-3">Swezii</h6>
<p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
<p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
The vanilla solution for future viewers. No jQuery required.
(Demo)
CSS
#text-1 {
opacity: 0;
transition: opacity 1s linear;
}
Javascript
(function () {
"use strict";
var screamer = document.getElementById('screamer');
screamer.addEventListener('mouseover', function () {
var text1 = document.getElementById('text-1');
text1.style.opacity = '1';
}, false);
screamer.addEventListener('mouseout', function () {
var text1 = document.getElementById('text-1');
text1.style.opacity = '0';
}, false);
})();
EDIT:
If you would like to be able to hover toggle a section of text for each "manager" you can do something like this. Note I've modified the HTML and CSS quite a bit here so you would have to use the HTML and CSS as well as the Javascript
(Demo)
Related
I'd like the secondary label to be right under "Image Label". Currently it is all the way at the bottom.
I am forcing the secondary label to be under using a line break and then moving it to the right using margin-left. I don't think this is the way to go at all and I tried using margin bottom which will not move the element up.
What is the best way to achieve this using CSS? My code for current result is here: https://codepen.io/codeAligned/pen/gOOByOa
Current:
Desired:
.post-container {
width: 75%;
padding-right: 16px;
padding-left: 16px;
margin-right: 200px;
margin-left: 200px;
padding-bottom: 64px;
padding-top: 64px;
article {
header {
text-align: center;
margin: 0 auto 32px;
a {
text-decoration: none;
transition: color 0.3s ease;
&:focus {
text-decoration: none;
text-decoration-skip-ink: auto;
}
&:active {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
}
.avatar {
margin: 16px auto;
text-align: center;
border-radius: 50%;
}
}
}
.bg-img-hero {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
margin-right: 25px;
height: 400px;
border-radius: 15px;
}
.transition-3d-hover {
transition: all 0.2s ease-in-out;
}
.transition-3d-hover:hover,
.transition-3d-hover:focus {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.story-image {
margin-bottom: 32px;
align-self: center;
img {
display: block;
border-radius: 10px;
width: 80%;
height: 60%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
}
.post-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.article-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-right: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.tag-text {
font-size: 12px;
}
.avatar-container {
padding-left: 30px;
padding-bottom: 16px;
}
.subtitle {
font-size: 16px;
text-align: left;
}
.subtitle-container {
border-top: solid 1px;
border-bottom: solid 1px;
border-spacing: 5px;
border-color: lightgray;
min-height: 100px;
}
.subtitle-date {
padding-left: 80px;
}
.subtitle-body {
-ms-flex: 1;
flex: 1;
}
.label-position {
margin-left: 80px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
I recommend using flexbox for these things. You can go through https://www.w3schools.com/css/css3_flexbox.asp
Here your code with quick fix
.subtitle-container{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.subtitle-container >div{
padding:10px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
</div>
With flex you do
<div class="container">
<div>
// your image here
</div>
<div class="label">
<div><span>Image label</span></div>
<div><small>Secondary label</small></div>
</div>
</div>
And add your css
.container {
display: flex;
}
The default direction is row so divs inside .container will stand next to each other while the divs inside .label will stack on each other because div is a block element
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)
I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you
So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>
Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.
As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}
I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}
It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.
Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});