Is that how professionals do it? All the content in one file, I need to do a school project; I can use javascript to hide and show the content. For ex. I am having an about and contact page so using javascript I'll switch through it (display block and none) but I want the transition to have an animation specifically slide, so how will I do it?
Here an example everything that has values can be animatet
.animation {
position: relative;
display: initial;
padding: 20px;
float: left;
clear: both;
}
.animation:after {
content: "";
width: 10px;
height: 10px;
background: blue;
transition: 0.4s;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
.fail:after {
display: none;
}
.fail:hover:after {
display: block;
}
.success:after {
height: 0;
width: 0;
opacity: 0;
transform: translateY(-50%) rotate(0deg);
display: block;
}
.success:hover:after {
width: 10px;
height: 10px;
opacity: 1;
transform: translateY(-50%) rotate(360deg);
display: block;
}
<div class="animation fail">Failing to animate</div>
<div class="animation success">Animatet</div>
Related
I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show
I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>
I am trying to change the navigation arrows and dots of "react-owl-carousel"(npm package) using CSS or JS for the past 2 days but unfortunately, I'm not successfully doing it. I don't want to use jQuery in that project.
I want to change these in this shape/style.👇
"Select the arrows ( id - class name) whatever is provided to you by the library, you can see it from the dom inspector and then over right it with your custom CSS."
So, I did this. It works perfectly! Thanks, -Aly Abd El Rahman
::scss::
#root {
.App {
.owl-carousel {
.owl-nav {
.owl-prev {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
left: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%);
span {
visibility: hidden;
}
}
.owl-next {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
right: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%) rotate(180deg);
span {
visibility: hidden;
}
}
}
.owl-dots {
position: absolute;
top: 89%;
left: 25vw;
.active {
background-color: white !important;
height: 10px !important;
width: 10px !important;
transition: all 0.3s linear !important;
}
.owl-dot {
background: hsla(0, 0%, 100%, 0.3);
display: inline-block;
height: 8px;
width: 8px;
margin-right: 30px;
vertical-align: middle;
border: none;
transition: all 0.3s linear;
span {
visibility: hidden;
}
}
}
}
}
}
The menu expands and contracts when I click on a button.
The button toggles the "active" class when I click it as expected with only the code required for that action.
However, when I add the code to make the the menu contract when clicking elsewhere on the page, it only contracts when clicking everything EXCEPT for the button.
The button is no longer clickable and the menu remains expanded until I click on a link or on the body of the page.
EDIT: As I was typing this out on a jsfiddle, I got an error on that console that I don't see in my dev tools:
Uncaught ReferenceError: jQuery is not defined
The reason why I am not using the "$"symbol that I see everyone using, and I am writting out "jQuery" in front of everything is because that's the only way I could make DIVI (the wordpress builder) compile the code
jQuery(document).ready(function(){
jQuery('.nav__button').click(function(){
jQuery(this).toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
});
});
jQuery(document).mouseup(e => {
if (!jQuery('nav__container').is(e.target)
&& jQuery('nav__container').has(e.target).length === 0) {
jQuery('.nav__row').removeClass('nav__row--active');
jQuery('.nav__button').removeClass('button--active');
}
});
And If I add this line of code, I break the code all together.
jQuery('.nav__button').is(e.target) ||
This line is added to the second function, to say that "If I click on the button OR elsewhere" [contract the menu]
jQuery(document).ready(function(){
jQuery('.nav__button').click(function(){
jQuery(this).toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
});
});
jQuery(document).mouseup(e => {
if (!jQuery('nav__container').is(e.target)
&& jQuery('nav__container').has(e.target).length === 0) {
jQuery('.nav__row').removeClass('nav__row--active');
jQuery('.nav__button').removeClass('button--active');
}
});
.nav__row {
transition: .3s;
overflow: visible !important;
}
.nav__container {
display: flex;
justify-content: space-around;
height: 30px;
}
.nav__container img {
height: 14px;
margin-top: auto;
}
.nav__link-panel {
position: absolute;
width: 175px;
height: 220px;
top: 0;
left: 0;
text-align: right;
transform: translatex(-100%);
background-color: #dcf5ee;
padding-top: 75px !important;
padding-right: 25px !important;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav__row.nav__row--active {
transition: .3s;
transform: translatex(70%);
}
/*Hamburger animation*/
.nav__button {
width: 24px;
height: 6px;
position: relative;
background: transparent;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
border: none;
}
.nav__button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.nav__button span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.nav__button span:nth-child(2) {
top: 8px;
width: 80%;
transform-origin: left center;
}
.nav__button span:nth-child(3) {
top: 16px;
transform-origin: left center;
}
.nav__button.button--active span:nth-child(1) {
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.nav__button.button--active span:nth-child(2) {
width: 0%;
opacity: 0;
}
.nav__button.button--active span:nth-child(3) {
transform: rotate(-45deg);
top: 17px;
left: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav__container">
<div class="nav__menu">
<button class="nav__button">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__link-panel" >
<li><a> Contact </a></li>
</ul>
</div>
</div>
The toggles in each of your handlers are competing with each other: events from one will bubble up to the other causing them to both fire simultaneously, toggling the nav right back to its initial state. Here I changed the 'body' handler to only remove the 'active' classes; and added a stopPropagation to the nav click handler so it doesn't bubble up and also trigger the body handler.
(I also added a bit of CSS to cause body to fill the viewport.)
jQuery(document).ready(function(){
jQuery('.nav__button, .nav__container').click(function(e){
jQuery('.nav__button').toggleClass('button--active');
jQuery('.nav__row').toggleClass('nav__row--active');
e.stopPropagation() // prevents the event from also triggering the 'body' handler below
});
// Remove (don't toggle) 'active' when clicking outside the nav:
jQuery('body').click(function(e){
jQuery('.nav__button').removeClass('button--active');
jQuery('.nav__row').removeClass('nav__row--active');
e.stopPropagation()
});
});
body {height: 100vh}
.nav__row {
transition: .3s;
overflow: visible !important;
}
.nav__container {
display: flex;
justify-content: space-around;
height: 30px;
}
.nav__container img {
height: 14px;
margin-top: auto;
}
.nav__link-panel {
position: absolute;
width: 175px;
height: 220px;
top: 0;
left: 0;
text-align: right;
transform: translatex(-100%);
background-color: #dcf5ee;
padding-top: 75px !important;
padding-right: 25px !important;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav__row.nav__row--active {
transition: .3s;
transform: translatex(70%);
}
/*Hamburger animation*/
.nav__button {
width: 24px;
height: 6px;
position: relative;
background: transparent;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
border: none;
}
.nav__button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: red;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.nav__button span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.nav__button span:nth-child(2) {
top: 8px;
width: 80%;
transform-origin: left center;
}
.nav__button span:nth-child(3) {
top: 16px;
transform-origin: left center;
}
.nav__button.button--active span:nth-child(1) {
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.nav__button.button--active span:nth-child(2) {
width: 0%;
opacity: 0;
}
.nav__button.button--active span:nth-child(3) {
transform: rotate(-45deg);
top: 17px;
left: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav__container">
<div class="nav__menu">
<button class="nav__button">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__link-panel" >
<li><a> Contact </a></li>
</ul>
</div>
</div>
I have made a toggle switch and I would like to integrate it into my site but I am unsure how to do this. I am using the plugin bbPress on my WordPress site and would like for the user of the website to be able to click the toggle switch when leaving a comment and then for their input to be displayed on their comment.
Here is the HTML for the toggle switch:
`
<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">
<!-- ____[OUTER BOX WITH BORDER LINE]____ -->
<div class="toggle__box">
<!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
<input type="checkbox" id="toggle-check">
<!-- ____[TOGGLE LABEL FOR INPUT]____ -->
<label for="toggle-check" class="toggle__label">
<!-- ____[TOGGLE THUMB ICON]____ -->
<div class="toggle__thumb">
<img src= <?php get_image_for_slider(); ?> >
</div>
<!-- ____[TEXT OF TOGGLE]____ -->
<div class="toggle__text--green">BULLISH</div>
<div class="toggle__text--red">BEARISH</div>
</label>
</div>
</div>
`
and then here is the CSS for this button:
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}`
Is there some way to link a variable to this switch/checkbox and so when the user clicks it I can use that to display something to the screen - as mentioned above? I have tried using isset($_POST["name"] but that didn't seem to work. I have also seen that maybe adding an event listener in JavaScript could work but I am not sure how to code in Java so any help would be great!
Many Thanks
You should be able to solve this using JS. Just insert this JS and then put what every you want in the function.
document.getElementById("toggle-check").addEventListener("click", funct1);
function funct1() {
/* you can put what ever function or thing you want to happen when you click the box here!*/
document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}
`
<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>
When I'm using flexbox to align the items inside the overlay div, everything is working fine how it's supposed to except the anchor tags that are being triggered without even having to open the menu and the tags are invisible but clickable just beside the menu, how do I fix it without having to change the style of the menu or overlay? Any help is appreciated. Cheers!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:block;
}
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
transition: opacity 1.5s ease-in-out;
}
.no-scroll{
overflow: hidden;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 35px;
color: white;
}
.contents a:hover {
transform: scale(1.2);
transition: opacity 5s ease-in-out;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
Log in
Sign up
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Look into using pointer-events to stop mouse events
https://jsfiddle.net/vghszb1n/
.contents a {
cursor: default;
pointer-events: none;
text-decoration: none;
font-family: Circular Std Book;
font-size: 35px;
color: white;
}
.open .contents a {
cursor: pointer !important;
pointer-events: all !important;
}