I have a pop up modal when the page loads. There are two ways: changing in CSS the opacity to 1 or with jQuery.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Both ways make the modal appear when the document loads. However, I can not interact with the inputs inside it. When I click on the button, all the modal and its content become like static.
I started learning JS and jQuery recently, so I would like to know if the solution needs some code of these.
The pointer-events:none setting in your CSS is doing exactly what it's supposed to do - - make it so the mouse pointer does not interact with anything. So, remove that.
Also, the vendor prefixed CSS is not needed as CSS transitions have been standard for almost a decade now.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
transition: opacity 400ms ease-in;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Remove pointer-events: none; from .popupmodal{}
Add some javascript code to do some stuff when you click the button. Also add id="" to each button.
const acceptBtn = document.getElementById("acceptBtn");
const doNotAcceptBtn = document.getElementById("doNotAcceptBtn");
acceptBtn.addEventListener('click', () => {
/*
when accept button is clicked, do some stuff
*/
});
doNotAcceptBtn.addEventListener('click', () => {
/*
when doNotAcceptBtn is clicked, do some stuff
*/
});
Related
I pieced together some code I found for a FAQ accordion on my site.
I am not sure how to make the title expand with 1 click, as it currently takes 2.
I would also like the icon to rotate upon expanding/collapsing.
It is currently only rotating on/off hover.
I am including a short example of what I currently have.
Any help would be much appreciated, thank you.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active',
isActive = $answer.hasClass(actveClass);
$('.answer').slideUp().addClass(actveClass);
if (isActive) {
$answer.toggleClass(actveClass);
$answer.slideToggle();
}
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
You're sending contradicting orders to your function. Here $('.answer').slideUp().addClass(actveClass); you're sliding up all of the answers and adding the active class to all of them (I believe you wanted to remove it).
Then, you ask if the target answer has the active class (the answer is obviously yes, no matter what, because you have added it to all of the elements right before).
This conditional if (isActive) {, even if your previous code was correct, would be completely unnecessary. What you can do remove the active class from all of answers except the target one, and then toggle the clicked answer only, which you have already targeted here $answer = $(this).next().
So the working code would be:
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.answer').not($answer).slideUp().removeClass(actveClass); /* remove instead of add and apply in every answer except the clicked one*/
/* remove unnecessary conditional */
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
Update to have the icon working properly
Same method as for the .answer. You remove the active class from all the buttons except the clicked one, and then toggle the clicked button class.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.bracket-button').not($(this)).removeClass(actveClass);
$('.answer').not($answer).slideUp().removeClass(actveClass);
$(this).toggleClass(actveClass);
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br
/>Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br
/>your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
I want to show a popup message when i click on select button like "you have selected this event"
how to do in angular 2?
<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
SELECT
</button>
You can use a structural directive *ngIf to create popup, my example:
<button type="button"(click)="popup = true">
SELECT
</button>
<div class="overlay" *ngIf="popup">
<div class="popup">
<h2>Here i am</h2>
<a class="close" (click)="popup = false">×</a>
<div class="content">
you have selected this event
</div>
</div>
</div>
some styles:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
cursor: pointer;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
https://stackblitz.com/edit/angular-g4rdha?file=src%2Fapp%2Fapp.component.ts
Hope it helps!
Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.
let test= this.modalCtrl.create('popuppage',
{
message: 'message',
(Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
test.present();
Now you can create your pop up page named 'popuppage'as you require
May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.
Please look it here.
https://primefaces.org/primeng/#/toast
I have the following code that triggers a certain effect when the mouse pointer is found on the image:
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 0;
}
.card-container {
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back {
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
<div class="card-container">
<div class="card">
<div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
<div class="side back">Jimmy Eat World</div>
</div>
</div>
How do I make an effect start when you press a button and not when you move the mouse over the image?
Thanks in advance!
Here's a CodePen example using JQuery to change the css upon clicking. Might help.
CodePen Example
HTML:
<div id="divTester">Click me to change color</div>
JavaScript (with JQuery):
$("body").on("click", "#divTester", function()
{
$("#divTester").css("color", "blue");
});
On mousedown will work in combination with a class change.
Remove the .card:hover from the css and replace it with
.card.flip {
transform: rotateY(180deg);
}
Add the button to the html like:
<button id="trigger">Press</button>
Than add JS to change the classes. Here's a jQuery sample instead:
$('#trigger').mousedown(function() {
$('.card').addClass('flip');
}).mouseup(function(){
$('.card').removeClass('flip');
});
This will flip all the images within .card div's with one button press
The will flip back when button is released.
You can use the following to keep the flip with button click:
$('#trigger').click(function() {
$('.card').toggleClass('flip');
});
I have a simple leaflet map with a GeoJSON point layer.
I want an infobox instead of the regular pop-up, so, in HTML, I have created the following:
<div id="panoutitlu" class="info-container" style="z-index: 601">
<div class="info-title">
<h1>Selectați ceva</h1>
</div>
<div class="info-body" id="corp">
<div class="info-content-container">
<div class="info-content" id="panoutext"></div>
</div>
</div>
</div>
When clicking on one of the points in the layer, the div named info-title gets populated with an attribute from the GeoJSON, as follows:
function onEachFeature(feature, layer) {
layer.on({
click: function populate() {
document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
});
The thing I can't get to work is how to expand the div when the info-title is clicked, similar to this map. I want to recreate the exact behaviour, including the smooth transition. That's why I took the CSS from it and changed a few sizes and fonts:
.info-title {
height: 80px;
font-family: 'Fira Sans Condensed';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.info-content {
padding: 0 8% 24px 8%;
margin: 0 auto;
background: #385c54;
overflow-y: scroll;
font-family: 'Fira Sans Condensed';
font-size: 1rem;
line-height: 1.25em;
font-weight: 300;
}
.info-container {
position: absolute;
overflow-y: hidden;
bottom: 0;
right: 250px;
z-index: 1000;
background: #385c54;
cursor: pointer;
width: 300px;
height: 60vh;
color: #FFF;
font-family: 'Fira Sans Condensed';
font-size: 18px;
transition: all 0.4s ease-in-out;
transform: translateY(calc(100% - 80px));
}
.info-container.info-active {
transform: translateY(0);
}
.info-body {
margin-top: 80px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
height: 80%;
}
In JavaScript, I tried adding an event listener:
document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );
but it didn't work.
Hopefully, somebody can help.
The solution was indeed an Event Listener:
document.getElementById('panoutitlu').addEventListener("click", function slide() {this.classList.toggle('info-active');}
I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container while changing its position to a relative for the opened state.
I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to a relative in this case)
Currently, when I switch the positioning from fixed to a relative as expected - there is a gap being produced, which is the .sub-header's height.
NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.
NOTE: This should be achieved by adding a custom class, not using jQuery's nested effects like .slideToggle etc.
Here is the Fiddle.
And the simple jQuery function needed for the Fiddle share:
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
Make position: relative; and do margin top for animating
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-150px;
left: 0;
right: 0;
z-index: 10;
position: relative;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>
Update:-
As to get -100% you have make it float and set all width to 100%
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
width:100%;
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
width:100%;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-100%;
left: 0;
right: 0;
z-index: 10;
float:left;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
width:100%;
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>
Correct me if I misunderstood your question, but I guess there's much simpler approach to what you're trying to achieve. Try changing corresponding classes in your CSS code:
.sub-header {
background: gainsboro;
height: 0;
-webkit-transition: height .3s linear;
transition: height .3s linear;
}
.opened {
height: 150px;
}
Here's the fiddle. My approach does not cover all bases, as you can see there is still text visible in the hidden container, which is going to need some additional workaround in your js or css, but I guess it is simpler than yours, considering that your .sub-container has fixed height.
EDIT
For non fixed height, there is workaround in my approach:
.sub-header {
background: gainsboro;
height: auto;
max-height: 0px;
-webkit-transition: max-height .3s linear;
transition: max-height .3s linear;
}
.opened {
max-height: 400px;
}
but it still needs to be adjusted - when you set .opened's max-height to the lower value, transition is going to be slower. It is not perfect, thought it covers cases, where .sub-containers' heights are relatively similar.
please check this out. we can use margin for styling and keep position the same relative
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;
transform: translateY(-200%);
left: 0;
right: 0;
z-index: 10;
/*play with position and margin*/
position: relative;
margin-bottom:-200px;
}
.opened {
transform: translateY(0%);
margin-bottom:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">
<p>Sub Header content</p>
</div>
<main>Main Content</main>