I have a fixed red button which shows some info on click.On hovering the button, a small info shows up.Click and hover both are working on a same button.I have 2 problem scenario doing this thing -
Problem 1 - When I mouse hover on the red button DummyText div comes up and hides in 2-3 second ,that is working fine as I want .But when I remove the mouse from button i.e mouse out the DummyText hides quickly but I want it to hide out in 2-3 seconds only.
Problem 2- When I click the red button the divs on right open up, Now I want hover event to stop working in all cases.
Below is the code of what I have tried. Hope Someone has a better solution on this.
Thanks in Advance!
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
}
.ConservativeLikely:hover>.hoverLikely {
animation-name: ShowHideNew;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-duration: 2s;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-webkit-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-moz-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>
Problem 1 can be solved with just CSS. Here is a working demo.
HTML
<div class="box show-pop-up">
<div class="pop-up">this is popup</div>
</div>
CSS
.box {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.pop-up {
outline: 1px solid yellow;
background: white;
position: absolute;
right: -20px;
bottom: 10px;
opacity: 0;
transition: opacity 1s step-end;
}
.show-pop-up:hover > .pop-up {
transition-duration: 0s;
opacity: 1;
}
The basic idea is to have nonzero transition-duration on our pop up element and set transition-duration to 0s on hover, so the pop up shows up immediately. But when we remove the mouse, the 'original' duration kicks in so the pop up stays for the animation duration. And since transition-timing-function is specified as step-end, the pop up opacity goes from 1 to 0 at the end of animation.
Now the problem 2 is trivial. Since we can just toggle the show-pop-up class with javascript.
EDIT:
As suggested by Adam K. transition-delay can be added, which enables us to add pop up fading animation. demo
Transition and transition delay can be used
.elem{
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.elem:hover{
opacity: 1;
visibility: visible;
transition: opacity 0, visibility 0;
transition-delay: 0;
}
This makes exiting hover delayed.
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.ConservativeLikely:hover>.hoverLikely {
animation: hide 1s forwards;
animation-delay:1s;
animation-iteration-count: 1;
animation-timing-function: linear;
transition: opacity 0s;
transition-delay: 0;
opacity: 1;
visibility: visible;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes hide {
0% {opacity:1;visibility: visible;}
100% {opacity:0;visibility: hidden;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>
Related
I'm doing a simple dice game with HTML, CSS, and JS.
So whenever I reload the page the dice will change OR press the shuffle button the dice will change i.e; it refreshes the whole page but I want to refresh only one div("context div") Because I added animated background So whenever the page reloads the background also starting from the beginning so I don't want to reload the whole page, So please can anyone help me
This is my code
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomDiceImage = "dice" + randomNumber1 + ".png";
var randomImageSource = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/" + randomDiceImage;
var image1 = document.querySelectorAll("img")[0];
image1.setAttribute("src", randomImageSource);
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomImageSource2 = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);
if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "Player 1 Wins!";
} else if (randomNumber2 > randomNumber1) {
document.querySelector("h1").innerHTML = "Player 2 Wins!";
} else {
document.querySelector("h1").innerHTML = "Draw!";
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
body {
background-color: #393E46;
}
h1 {
margin: 30px;
font-family: 'Lobster', cursive;
text-shadow: 5px 0 #232931;
font-size: 8rem;
color: #4ECCA3;
}
p {
font-size: 2rem;
color: #4ECCA3;
font-family: 'Indie Flower', cursive;
}
img {
width: 80%;
}
footer {
margin-top: 5%;
color: #EEEEEE;
text-align: center;
font-family: 'Indie Flower', cursive;
}
.button {
color: #fff;
margin-top: 5%;
padding: 15px 35px;
background-color: #38D2D2;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
border-radius: 14px;
font-weight: bold;
font-size: 16px;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
cursor: pointer;
}
#import url('https://fonts.googleapis.com/css?family=Exo:400,700');
* {
margin: 0px;
padding: 0px;
}
body {
font-family: 'Exo', sans-serif;
}
.context {
width: 100%;
position: absolute;
top: 5vh;
}
.context-2 {
font-size: larger;
font-weight: bolder;
width: 100%;
position: absolute;
top: 60vh;
}
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Let's Play Dice</title>
</head>
<body>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="context">
<div class="container">
<h1>Refresh Me</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="images/dice6.png">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="images/dice6.png">
</div>
</div>
<div class="container">
<main>
<button class="button" onClick="window.location.reload();"><span>Suffle</span></button>
</main>
</div>
</div>
</body>
</html>
so please suggest to me how to reload only specific div(Only dice should change) rather than the whole page
Thanks In Advance.😊
To reload a section of the page, you could use jquerys load In your case it could be like this:
function updateDiv()
{
$( "#divId" ).load(window.location.href + " #divId" );
}
Note: divId is the id of the div you want to reload
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
I'd like to activate all of this animations whenever I scroll to a certain section, in this case the second one.So basically it starts with the section one and whenever i reach the second one i want all of this to be activated. I've tried many things, but couldn't really figure out a way to solve this. Thanks in advance.
.skills {
padding: 4.8rem;
border-bottom: solid 1px #ececec;
max-width: 1440px;
max-height: auto;
}
.skills-bar {
width: 90%;
display: flex;
flex-direction: column;
gap: 3.2rem;
margin-top: 2.8rem;
border-radius: 1rem;
padding: 3rem 3.5rem;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
font-family: "Montserrat", Sans-serif;
}
.skills-bar .bar {
margin: 2rem 0;
}
.skills-bar .bar:first-child {
margin-top: 4.8rem;
}
.skills-bar .bar .info {
margin-bottom: 5px;
}
.skills-bar .bar .info span {
font-size: 2rem;
font-weight: 500;
opacity: 0;
animation: showText 0.5s 1.5s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skills-bar .bar .progress-line {
position: relative;
height: 1rem;
width: 100%;
background: #ececec;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
box-shadow: inset 0xp 1px 1px rgba(0, 0, 0, 0.05),
0xp 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line span {
height: 100%;
width: 80%;
background: #9013fe;
position: absolute;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-line.html span {
width: 90%;
}
.progress-line.css span {
width: 85%;
}
.progress-line.js span {
width: 70%;
}
.progress-line.react span {
width: 20%;
}
.bar .progress-line span::before {
position: absolute;
content: "";
right: 0;
top: -12px;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.bar .progress-line span::after {
position: absolute;
right: 0;
top: -28px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
background: #000;
padding: 1px 8px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line.html span::after {
content: "90%";
}
.progress-line.css span::after {
content: "85%";
}
.progress-line.js span::after {
content: "70%";
}
.progress-line.react span::after {
content: "20%";
}
.skills-header {
font-family: "Montserrat", Sans-serif;
}
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 2.4rem;
margin-top: 9.2rem;
max-width: 100%;
}
.skills-heading-secondary {
color: #000;
font-weight: 600;
font-size: 1.8rem;
}
.skills-text {
color: #495057;
font-size: 1.4rem;
line-height: 1.5;
}
<section class="section skills bar--hidden" id="section--2">
<h2 class="skills-header heading-tertiary">Sklills</h2>
<div class="skills-bar">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line bar--hidden html"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>JAVASCRIPT</span>
</div>
<div class="progress-line js"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>REACT</span>
</div>
<div class="progress-line react"><span></span></div>
</div>
</div>
</section>
I'm calling a tooltip and trying to hide it after 9 seconds, but it does not work for me.
What is happening here that the "tooltip" is only hidden after loading, but it does not respond the second time I click on "Touch Me" button.
The "Touch Me" button is #pop-regalo
What am I doing wrong in my script?
You can find a demo below:
$(function() {
$('#pop-regalo').hide();
setTimeout(function() {
$('#pop-regalo').fadeIn('slow');
}, 1000);
});
//--------------------
$(document).ready(function() {
$("#pop-regalo").click(function() {
$("#hola,.layer-2,.tooltip").show();
});
$("#hola").click(function() {
$("#hola,.layer-2").hide();
});
});
// --------------------
$(function() {
$('.tooltip');
setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
});
html,
body {
left: 0;
top: 0;
margin: 0;
padding: 0;
font-family: Arial, sans-serif
}
.note {
width: 50%;
margin: 70px auto 0
}
#pop-regalo {
position: fixed;
left: 15px;
top: 15px;
padding: 10px 15px;
color: white;
background: red;
cursor: pointer
}
#hola {
display: none;
position: absolute;
width: 200px;
height: 200px;
padding: 15px 15px 8px;
text-align: center;
font-size: 2em;
line-height: 200px;
background: #999;
-webkit-animation: fadein 1s;
animation: fadein .75s;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
z-index: 9999
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0
}
75% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0
}
75% {
opacity: 0
}
100% {
opacity: 1
}
}
.layer-2 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
-webkit-animation: fadein .2s;
animation: fadein .2s;
z-index: 999
}
.tooltip {
display: none;
position: fixed;
top: 140px;
left: 100%;
margin-left: -80px
}
.tooltip .tooltiptext {
width: 120px;
background: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 30%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pop-regalo">Touch Me
<!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">-->
</div>
<div class="note">What is happening here that the "tooltip" is only hidden after loading, but it does not respond the second time we click on the red button named Touch Me...?</div>
<div id="hola">Close</div>
<div class="tooltip">
<span class="tooltiptext">A gift for you</span>
</div>
<div class="layer-2"></div>
You have to trigger the timeout at the moment you show the tooltip. In your original code, you're only triggering the timeout upon page load, so when if you click the red button for the first time after 9 seconds have already passed, the tooltip would not hide even on the first iteration.
You might also want to save a reference to the timeout instance to a variable and cancel this instance before triggering a new one, so that the tooltip will not be hidden too early when you close the overlay and click the button again while the tooltip is still showing.
var tooltipTimeout;
$(function(){
$('#pop-regalo').hide();
setTimeout(function(){
$('#pop-regalo').fadeIn('slow');
},1000);
});
//--------------------
$(document).ready(function(){
$("#pop-regalo").click(function(){
$("#hola,.layer-2,.tooltip").show();
// clear any old timeout
window.clearTimeout(tooltipTimeout);
// you have to start the timeout after showing the tooltip
tooltipTimeout = setTimeout(function(){
$('.tooltip').fadeOut('slow');
},9000);
});
$("#hola").click(function(){
$("#hola,.layer-2").hide();
});
});
// --------------------
$(function(){
// the code in here is only called once at page load
// $('.tooltip'); // <= this doesn't do anything
// setTimeout(function(){
// $('.tooltip').fadeOut('slow');
// },9000);
});
html,body {left:0;top:0;margin:0;padding:0;font-family:Arial,sans-serif}
.note {width:50%;margin:70px auto 0}
#pop-regalo {
position:fixed;
left:15px;
top:15px;
padding:10px 15px;
color:white;
background:red;
cursor:pointer
}
#hola {
display:none;
position:absolute;
width:200px;
height:200px;
padding:15px 15px 8px;
text-align:center;
font-size:2em;
line-height:200px;
background:#999;
-webkit-animation:fadein 1s;
animation:fadein .75s;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
text-align:center;
border-radius:5px;
-webkit-box-shadow:0 3px 8px rgba(0,0,0,0.7);
box-shadow:0 3px 8px rgba(0,0,0,0.7);
z-index:9999
}
#keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}}
#-webkit-keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}}
.layer-2 {
display:none;
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.5);
-webkit-animation:fadein .2s;
animation:fadein .2s;
z-index:999
}
.tooltip {
display:none;
position: fixed;
top:140px;
left:100%;
margin-left:-80px
}
.tooltip .tooltiptext {
width: 120px;
background:#000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 30%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pop-regalo">Touch Me
<!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">-->
</div>
<div class="note">The tooltip will show upon button click and then hide after 9 seconds.</div>
<div id="hola">Close</div>
<div class="tooltip">
<span class="tooltiptext">A gift for you</span>
</div>
<div class="layer-2"></div>
I am trying to create a list of notes on my website.
I currently have a problem where I have a gradient background color when you hover over the different note titles. This for some reason requires a height.
If I do not have this height attribute (the height attribute for .blur-container), the background won't switch colors when I hover. However, the note text is shown as expected:
Before clicking the title:
https://gyazo.com/4619429746b1de039987be48a7480917
After clicking the title:
https://gyazo.com/999277ba3939bfd875ca4562c935ac3c
If I DO have the height attribute, The background goes a little white as expected, however when I click on the title, the note text does not show.
When hovering over title:
https://gyazo.com/b70eddd96e45836296e20a21c329754a
What is the issue here and how can I fix it? I pasted my html and CSS below:
HTML:
<div class="task-notes-container">
<input type="text" value="" class="form-control task-notes" placeholder="Title" (keyup)="addNotesItem($event)" [(ngModel)]="newNotesTitle"/>
<i (click)="addNotesItem($event)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="notes-list">
<li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
(mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
<div class="blur-container" [ngClass]="{'changeHeight': item.expand}"><div class="blur-box"></div></div>
<div class="note-title" (click)="expandItem(item);">
<i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
<label>
<span class="cut-with-dots"><b>{{ item.title }}</b></span>
</label>
<i class="remove-notes ion-ios-close-empty" (click)="item.deleted = true"></i>
</div>
<div [hidden]="!item.expand">
<p [hidden]="item.hide || item.text == ''" (click)="noteTextClick(item, focusable);" [innerHTML]="item.text"></p>
<div [hidden]="!item.hide && item.text != ''">
<textarea placeholder="haha" [(ngModel)]="item.text" (blur)="onTextBlur(item);" (focus)="onTextFocus(item);" placeholder="Default Input" class="form-control" id="textarea01" #focusable></textarea>
</div>
</div>
</li>
</ul>
</div>
CSS:
#import '../../../theme/sass/conf/conf';
input.task-notes {
margin-bottom: 8px;
}
ul.notes-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
div.note-title {
height: 42px;
}
i.remove-notes {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
&:hover {
i.remove-notes {
visibility: visible;
}
}
&.checked {
.notes-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.notes-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
}
}
label.notes-checkbox > input:checked + span:before {
content: '\f00c';
}
}
}
}
label.notes-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}
.add-item-icon {
display: none;
}
.ng2, .blur {
.task-notes-container {
.notes-panel.panel {
color: white;
opacity: 0.9;
}
input.task-notes {
color: white;
width: calc(100% - 25px);
border-radius: 0;
border: none;
background: transparent;
&:focus {
outline: none;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
}
.add-item-icon {
display: block;
float: right;
margin-top: -45px;
margin-right: 5px;
font-size: 25px;
cursor: pointer;
}
ul.notes-list {
li {
margin: 0;
border: none;
font-weight: $font-light;
.blur-container {
height: 40px;
position: absolute;
width: calc(100% + 40px);;
top: 0;
left: -25px;
overflow-y: hidden;
}
.changeHeight {
height: auto;
}
&:hover {
.blur-container {
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.blur-box {
cursor: pointer;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-filter: blur(3px);
}
}
i.remove-notes {
color: white;
opacity: 0.4;
&:hover {
color: white;
opacity: 0.95;
}
}
i.mark {
min-width: 40px;
display: none;
}
label.notes-checkbox > span {
&:before {
position: absolute;
color: $content-text;
content: '\f10c';
float: none;
margin-right: 6px;
transition: none;
}
}
&.checked {
label.notes-checkbox > span {
&:before {
content: '\f00c';
}
}
}
}
}
.box-shadow-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
width: calc(100% + 44px);
margin-left: -22px;
}
}
}
so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.