i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's
Related
In the keyframes part, my PC doesn't recognize the from part. If it would, it would be blue and the opacity command would be grey. But as you see none of them is correct and I don't know why. Because of this little error, my HTML website is not working the way it should. Can anyone please help me? I would like to finish my HTML website.
body {
margin: 0;
padding: 0;
animation: bgcolor infinite 20s;
}
h1 {
font-family: 'Yeseva One', cursive;
font-size: 4em;
margin: 0;
color: #fff;
}
#keyframes bgcolor {
0% {
background: #f1c40f;
}
10% {
background: #f39c12;
}
20% {
background: #e67e22;
}
30% {
background: #d35400;
}
40% {
background: #e74c3c;
}
50% {
background: #c0392b;
}
60% {
background: #e74c3c;
}
70% {
background: #d35400;
}
80% {
background: #e67e22;
}
90% {
background: #f39c12;
}
100% {
background: #f1c40f;
}
}
h2 {
font-family: 'IM Fell DW Pica', serif;
font-size: 3em;
margin: 0;
color: #fff;
}
p {
font-family: 'Clicker Script', cursive;
font-size: 2em;
margin: 0;
color: #fff;
}
button {
font-family: 'Playfair Display SC', serif;
font-size: 1em;
}
button {
margin: 0;
border: none;
background: #ea1538;
padding: 12px 30px;
border-radius: 30px;
color: white;
font-weight: bold;
box-sizing: border-box;
transition: .3s
}
button:hover {
transform: scale(1.3);
cursor: pointer;
}
.hero {
height: 100vh;
width: 100%;
}
nav {
display: flex;
align-items: center;
min-height: 8vh;
justify-content: space-between;
padding-left: 25%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-links a {
text-decoration: none;
letter-spacing: 1px;
}
.line {
width: 100%;
height: 3px;
background-color: white;
margin: 5px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
}
span {
color: #000000;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 19px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #000000;
transition: .2s;
}
#media screen and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-between;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
background-color: #ffeaa7;
/*just to see if the slider works*/
right: 0px;
height: 100vh;
top: 18vh;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
padding-left: 100%;
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
I'm not sure I fully understand your question, it might be helpful to reframe it, with a minimal reproducible example. See StackOverflows MRE
I don't see you calling the animation anywhere in your code. You need to target the nav links, and tell it to use the animation navLinkFade.
Here is an example of a super simple animation.
ul {
animation: fade 3s forwards;
}
#keyframes fade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<ul>
<li>Test</li>
<li>Test</li>
</ul>
I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)
You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>
Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>
The code I wrote now has a title with 1 attached, a title with 2 attached, and a comment with 2 attached at any time I press the button.
I don't know how to correct it because I'm writing it after looking at an example.
Among the codes written, there is data-id. The reason why I used this is because I asked another question and tried to graft the code that someone else gave me, but I couldn't do it and couldn't delete it when I posted it on the stackoverflow.
I want to keep as few code as possible.
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
dialogBox.toggleClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog .dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger" data-id="#dialog1">OPEN1</button>
<div class="dialog" id="dialog1" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger" data-id="#dialog2">OPEN2</button>
<div class="dialog" id="dialog2" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
The first reason your code wasn't working because of a problem in a CSS rule: .dialog .dialog--active {} won't match the element you want it to, because both classnames are on the same DOM element; instead this should be .dialog.dialog--active {} (no space).
But this triggers both dialogs from both buttons; so you also need a javascript change to identify the specific elements for each button. You could use specific IDs and a different function for each button, or you could use the elements' relative position in the document:
$(this).next('.dialog').addClass('dialog--active');
Both fixes are shown below:
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
$(this).next('.dialog').addClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
But I would suggest a lot of other changes. Your code includes some obsolete CSS rules, follows some bad practices (it's not a great idea to handle every event from the document node for example) and is just generally very overcomplicated.
Here's a cleaner example:
$('.dialog__trigger').on('click', function() {
// Add the 'active' class to the next dialog element.
// (You could also just use .show() here)
$(this).next('.dialog').addClass('dialog--active');
});
$('body, .dialog__close').on('click', function() {
// remove the 'active' class from any element, when either the
// body or a close button is clicked.
$('.dialog--active').removeClass('dialog--active');
});
$('#container').on('click', function(e) {
// prevent click events bubbling up to the body
e.stopPropagation();
});
$(document).keyup(function(e) {
// handle the escape key
if (e.keyCode === 27) {
$('.dialog--active').removeClass('dialog--active');
}
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
transition: all 150ms ease-out;
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
transform: translateY(-5px);
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
</div>
I'm working on this web page at http://helpir-staging.herokuapp.com. It isn't perfect but it scrolls fine on Safari. In Firefox it only scrolls using the arrow keys (no mouse scroll), and in Chrome I don't get any scroll at all.
There must be something horrifically wrong in my CSS. Any help would be really appreciated.
I'm using bootstrap, bootcards, angularjs and angular-dynamic-layout.
app.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
$hero-image: "../assets/images/slider.jpg";
#import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
#import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome';
// App-wide Styles
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// KAREL CSS
$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);
html, body {
height: 100%;
width: 100%;
// background-color: blue;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.85em;
}
hr {
display: none;
}
body {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.alert {
margin: 10px 0px;
}
.margined {
margin: 5px;
}
.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
color: #eeeeee;
background-color: transparent;
}
.footer > p,
.footer > p > a,
{
color: #888888;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
border-radius: 3px;
color: #111111;
background-color: $helpir-gray;
}
#profile-button {
margin: 0px;
padding: 12px 5px;
height: 50px;
}
#profile-button:hover,
#profile-button.active {
border-radius: 3px;
color: white;
background-color: $heynay-peach;
}
.navbar-default .navbar-nav>li>a>p {
color: white;
background: none;
margin: 0px;
padding: 0px;
}
.navbar-default .navbar-nav>li>a>p>img {
height: 30px;
width: 30px;
padding: 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.btn-default {
color: #000;
background-color: $heynay-peach;
}
.btn-default {
color: #f00;
background-color: $heynay-peach;
}
.btn-default[disabled] {
background-color: #9B9B9B;
}
.btn-default:hover {
background-color: $heynay-background;
color: white;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0px solid transparent;
border-radius: 4px;
}
.icon-brand {
color: $heynay-background;
}
.heynay-legal {
text-align: left;
}
.panel-default > .panel-heading {
background: $heynay-background;
}
.panel-title > a,
.panel-title > a {
text-decoration: none;
color: white;
}
.panel-title > a:hover,
.panel-title > a.active {
text-decoration: none;
color: black;
}
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
// GLOBAL STYLES
footer {
height: 60px;
text-align: center;
background-color: $heynay-background;
padding-top:20px;
padding-bottom:20px;
font-size: 0.8em;
}
#heynay-logo {
font-size: 25px;
color: #000000;
}
.navbar-toggle {
background-color: $heynay-peach;
border-color: transparent;
}
.desktop-footer {
display : none;
}
.mobile-footer {
display : inline;
}
// not sure if tyhis is used.
.general-section {
text-align: left;
padding: 50px 10px;
min-height: 75%;
font-size: 0.9em;
}
.floating-pane-holder {
display: none;
z-index:1000;
color: white;
background-color: $heynay-peach;
position: fixed;
height: 50px;
width: 90px;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.floating-pane-content {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
position: absolute;
}
#media(min-width: 450px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 0.95em;
border-color: transparent;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
hr {
display: block;
}
}
#media(min-width:1000px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 1em;
border-color: transparent;
}
#heynay-logo {
font-size: 35px;
}
}
// TABLES
.desktop-table {
display : none;
}
.mobile-table {
display : inline;
}
// TABLES END
// MODAL BEGIN
.ngdialog.ngdialog-theme-default
.ngdialog-content {
width: 700px;
}
// MODAL END
#media(min-width:750px) {
.navbar {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background .35s ease-in-out,padding .5s ease-in;
-moz-transition: background .35s ease-in-out,padding .5s ease-in;
transition: background .35s ease-in-out,padding .5s ease-in;
border-color: transparent;
}
.desktop-footer {
display : inline;
}
.mobile-footer {
display : none;
}
.top-nav-collapse {
padding: 0;
background-color: $heynay-background;
}
footer {
height: 60px;
font-size: 1em;
bottom:0;
height:2em;
}
.general-section {
padding: 100px 10px;
font-size: 1em;
}
.navbar-default .navbar-nav>li>p {
padding: 15px;
margin: 0px;
border-color: transparent;
}
}
#media(min-width: 900px) {
.desktop-table {
display : inline;
}
.floating-pane-holder {
top: 150px;
left: 10px;
transform: none;
-webkit-transform: none;
}
.mobile-table {
display : none;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
// SPINNER
.spinner {
margin: 100px auto 0;
margin-bottom: 100px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: $heynay-background;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
// Prevent first frame from flickering when animation starts
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Component styles are injected through grunt
// injector
#import 'admin/admin.scss';
#import 'main/main.scss';
#import '../components/category-tile/category-tile.scss';
#import '../components/footer/footer.scss';
#import '../components/modal/modal.scss';
#import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector
category-tile.css
// dynamic layout bits...
#media (min-width: 1000px) {
[dynamic-layout] {
width: 1000px;
margin-top: 25px;
}
.dynanamic-layout-col-4 {
width: 250px;
margin-top: 20px;
}
.dynamic-layout-col-8 {
width: 500px;
}
}
#media (min-width: 900px) {
[dynamic-layout]{
width: 900px;
margin-top: 20px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (min-width: 600px) and (max-width: 900px){
[dynamic-layout]{
width: 600px;
margin-top: 8px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (max-width: 600px){
[dynamic-layout]{
width: 300px;
margin-top: 6px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 300px;
}
}
.dynamic-layout-item {
padding: 10px;
width: auto;
}
.move-items-animation{
transition-property: left, top;
transition-duration: .25s;
transition-timing-function: ease-in-out;
}
.dynamic-layout-item-parent.ng-enter{
transition: .25s ease-in-out;
opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
opacity:1;
}
.dynamic-layout-item-parent.ng-leave{
transition: .5s ease-in-out;
opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
opacity:0;
}
[dynamic-layout]{
// float: left;
position: absolute;
// overflow: hidden;
// height: 1000px;
}
.container-fluid{
position: absolute;
left: 50%;
transform: translate(-50%);
height:auto;
}
.title {
// margin-bottom: 50px;
}
main.css
.thing-form {
margin: 20px 0;
}
#banner {
border-bottom: none;
margin-top: -45px;
}
#banner h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit {
background-image: url("#{$hero-image}");
position: relative;
# padding: 30px 15px;
color: #F5F5F5;
# background: #4393B9;
background-size:cover;
background-repeat: no-repeat;
color: #fff;
cursor: default;
padding: 1em 0 0 0;
}
.header-text {
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
cursor: default;
position: relative;
}
.navbar-text {
margin-left: 15px;
}
.privacy-terms {
margin-top: 75px;
}
.support-section {
padding-top: 150px;
text-align: center;
min-height: 85%;
}
#media(min-width: 400px) {
.intro-section {
// background: url("#{$hero-image}") no-repeat 98% 30%;
}
}
#media(min-width: 750px) {
.intro-section {
padding-top: 150px;
}
}
Your script vendor (idk what it is) is breaking it, in chrome under inspect I see this:
body, html {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
change hidden to visible and it works, at least in chrome. initialize your custom css file after the vendor script and the css property should be fixed.