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>
Related
I'm new in redirecting page with progress-bar. When the timer is not reached in 5 seconds the progress-bar repeatedly to continue unless the timer reached 5 seconds it will redirect to another page. Sample when the progress bar reached the 100% but the timer is in 4 seconds it will loop back to 1% and so on, So when the timer reached 5 seconds it will stop in 38% or something. What code should i put to be able work properly?
Any advice and suggestions will be greatly appreciated.Sorry for my poor English.
var worker = null;
var loaded = 0;
function increment() {
$('#counter').html(loaded+'%');
$('#drink').css('top', (100-loaded*.9)+'%');
if(loaded==25) $('#cubes div:nth-child(1)').fadeIn(100);
if(loaded==50) $('#cubes div:nth-child(2)').fadeIn(100);
if(loaded==75) $('#cubes div:nth-child(3)').fadeIn(100);
if(loaded==100) {
$('#lemon').fadeIn(100);
$('#straw').fadeIn(300);
loaded = 0;
stopLoading();
setTimeout(startLoading, 1000);
}
else loaded++;
}
function startLoading() {
$('#lemon').hide();
$('#straw').hide();
$('#cubes div').hide();
worker = setInterval(increment, 30);
}
function stopLoading() {
clearInterval(worker);
}
startLoading();
* { box-sizing: border-box; }
html { height: 100%; }
body {
position: relative;
margin: 0;
height: 100%;
background: linear-gradient(steelblue, beige);
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
}
#loader {
position: absolute;
top:50%; left:50%;
height:200px; width:100px;
margin-top:-100px; margin-left:-50px;
}
#glass {
position: relative;
height: 100%;
background: rgba(255,255,255,.1);
border-radius: 0% 0% 15% 15%;
border: 3px solid;
border-top: 0;
border-bottom: 20px solid;
border-color: rgba(255,255,255,.7);
overflow: hidden;
}
#drink {
position: absolute;
top:100%; right:0; bottom:0; left:0;
background: linear-gradient(to bottom, orange, orangered);
box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
opacity: .7;
}
#counter {
position: relative;
line-height: 200px;
font-size: 22px;
color: rgba(255,255,255,1);
}
#lemon {
display: none;
position: absolute;
top:0; right:0;
height:79px; width:79px;
margin-top:-38px; margin-right:-38px;
background: radial-gradient(#f7f3b6 10%, #d7d26c);
border-radius: 50%;
border: 4px solid #47582e;
box-shadow: inset 0 0 0 2px #f7f3b6;
}
#straw {
display: none;
position: absolute;
bottom:20px; right:30%;
height:220px; width:6px;
background: steelblue;
border-radius: 0 6px 0 0;
transform: rotate(-18.5deg);
transform-origin: left bottom;
-webkit-transform: rotate(-18.5deg);
-webkit-transform-origin: left bottom;
}
#straw:after {
content: '';
position: absolute;
top:0; right:0;
height:6px; width:80px;
background: inherit;
border-radius: 0 6px 0 0;
}
#cubes {
position: absolute;
top:0; right:0; bottom:0; left:0;
}
#cubes div {
/*display: none;*/
position: absolute;
width:50px; height:50px;
background: rgba(255,255,255,.3);
border-radius: 10px;
box-shadow: inset 0 0 10px rgba(255,255,255,.6);
}
#cubes div:nth-child(1) {
bottom:0;
}
#cubes div:nth-child(2) {
bottom:45px; left:25px;
transform: rotate(32deg);
transform-origin: center bottom;
-webkit-transform: rotate(32deg);
-webkit-transform-origin: center bottom;
}
#cubes div:nth-child(3) {
bottom:90px; left:20px;
transform: rotate(-34deg);
transform-origin: center bottom;
-webkit-transform: rotate(-34deg);
-webkit-transform-origin: center bottom;
}
#coaster {
width: 130%; height: 4px;
margin-left: -15%;
background: steelblue;
border-radius: 2px;
}
footer {
position: absolute;
left:0; top:50%; right:0;
margin-top: 120px;
color: steelblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/animation.css">
</head>
<body>
<?php
header("refresh:5; url=https://stackoverflow.com/");
?>
<div id="loader">
<div id="lemon"></div>
<div id="straw"></div>
<div id="glass">
<div id="cubes"></div>
<div id="drink"></div>
<span id="counter"></span>
</div>
<div id="coaster"></div>
</div>
<footer>Please wait while<br>we fill up your glass...</footer>
</body>
</html>
If all you want is to redirect the page when the loader hits 100%, then add a window.location assignment to your final check on the value of 'loaded':
if(loaded==100) {
$('#lemon').fadeIn(100);
$('#straw').fadeIn(300);
loaded = 0;
stopLoading();
// VVV you don't really need to do this
// setTimeout(startLoading, 1000);
window.location.href = 'http://stackoverflow.com';
}
For redirection,
Use HttpResponse object as
if(document.getElementById(progress).value=100)
response.redirect(url)
Hope it works!
Please find the modified code for your desired output:
(Here after 5 sec the page will be redirected and the progress bar will be moved to 100% even if it is less than 100.)
var worker = null;
var loaded = 0;
function increment() {
$('#counter').html(loaded+'%');
$('#drink').css('top', (100-loaded*.9)+'%');
if(loaded==25) $('#cubes div:nth-child(1)').fadeIn(100);
if(loaded==50) $('#cubes div:nth-child(2)').fadeIn(100);
if(loaded==75) $('#cubes div:nth-child(3)').fadeIn(100);
if(loaded==100) {
$('#lemon').fadeIn(100);
$('#straw').fadeIn(300);
loaded = 0;
stopLoading();
setTimeout(startLoading, 1000);
}
else loaded++;
}
function startLoading() {
$('#lemon').hide();
$('#straw').hide();
$('#cubes div').hide();
worker = setInterval(increment, 30);
}
function stopLoading() {
clearInterval(worker);
}
function redirectAfter5Sec(){
setTimeout(redirectMe, 5000);
}
function redirectMe(){
$('#counter').html('100%');
$('#drink').css('top', (100-100*.9)+'%');
clearInterval(worker);
window.location.href="http://stackoverflow.com";
}
startLoading();
redirectAfter5Sec();
* { box-sizing: border-box; }
html { height: 100%; }
body {
position: relative;
margin: 0;
height: 100%;
background: linear-gradient(steelblue, beige);
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
}
#loader {
position: absolute;
top:50%; left:50%;
height:200px; width:100px;
margin-top:-100px; margin-left:-50px;
}
#glass {
position: relative;
height: 100%;
background: rgba(255,255,255,.1);
border-radius: 0% 0% 15% 15%;
border: 3px solid;
border-top: 0;
border-bottom: 20px solid;
border-color: rgba(255,255,255,.7);
overflow: hidden;
}
#drink {
position: absolute;
top:100%; right:0; bottom:0; left:0;
background: linear-gradient(to bottom, orange, orangered);
box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
opacity: .7;
}
#counter {
position: relative;
line-height: 200px;
font-size: 22px;
color: rgba(255,255,255,1);
}
#lemon {
display: none;
position: absolute;
top:0; right:0;
height:79px; width:79px;
margin-top:-38px; margin-right:-38px;
background: radial-gradient(#f7f3b6 10%, #d7d26c);
border-radius: 50%;
border: 4px solid #47582e;
box-shadow: inset 0 0 0 2px #f7f3b6;
}
#straw {
display: none;
position: absolute;
bottom:20px; right:30%;
height:220px; width:6px;
background: steelblue;
border-radius: 0 6px 0 0;
transform: rotate(-18.5deg);
transform-origin: left bottom;
-webkit-transform: rotate(-18.5deg);
-webkit-transform-origin: left bottom;
}
#straw:after {
content: '';
position: absolute;
top:0; right:0;
height:6px; width:80px;
background: inherit;
border-radius: 0 6px 0 0;
}
#cubes {
position: absolute;
top:0; right:0; bottom:0; left:0;
}
#cubes div {
/*display: none;*/
position: absolute;
width:50px; height:50px;
background: rgba(255,255,255,.3);
border-radius: 10px;
box-shadow: inset 0 0 10px rgba(255,255,255,.6);
}
#cubes div:nth-child(1) {
bottom:0;
}
#cubes div:nth-child(2) {
bottom:45px; left:25px;
transform: rotate(32deg);
transform-origin: center bottom;
-webkit-transform: rotate(32deg);
-webkit-transform-origin: center bottom;
}
#cubes div:nth-child(3) {
bottom:90px; left:20px;
transform: rotate(-34deg);
transform-origin: center bottom;
-webkit-transform: rotate(-34deg);
-webkit-transform-origin: center bottom;
}
#coaster {
width: 130%; height: 4px;
margin-left: -15%;
background: steelblue;
border-radius: 2px;
}
footer {
position: absolute;
left:0; top:50%; right:0;
margin-top: 120px;
color: steelblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/animation.css">
</head>
<body>
<?php
header("refresh:5; url=https://stackoverflow.com/");
?>
<div id="loader">
<div id="lemon"></div>
<div id="straw"></div>
<div id="glass">
<div id="cubes"></div>
<div id="drink"></div>
<span id="counter"></span>
</div>
<div id="coaster"></div>
</div>
<footer>Please wait while<br>we fill up your glass...</footer>
</body>
</html>
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>
I have one problem with my menu.
This is the problem DEMO from codepen.io
In this demo you can see there is a left sidebar menu area. When you change the browser size width < 1050px then the menu opacity:0; and the button will showing on top left side (blue button).
The problem is left sidebar not opening when i click the button. The working example is here without css media screen.
Working DEMO without css media screen
Here is a code:
HTML
<div class="header-left">
Change browser size width < 1050px
<div class="menu-area">
<div class="icon-header-home-menu menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
CSS
.header-left{
float: left;
width: 50%;
background-color:black;
color:#ffffff;
padding:10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color:blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color:red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color:green;
}
.menu-area-wrap.active {
opacity:1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide{
display:none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display:block;
}
.menu-area-wrap{
position: absolute;
top: 42px;
left:0; /*changed here*/
width:100%; /*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display:none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity:0;
}
}
JS
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".icon-header-home-menu").click (function(e){
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click (function(e){
e.stopPropagation();
});
Try this inside your media screen:
.menu-area-wrap.active {
display: block;
}
Your media screen has display: none while your active class doesn't have display:block.
So, in desktop you were changing opacity but in mobile you are changing displays, therefore, your active class won't do anything because it still has display:none overwriting your opacity: 0.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap.active {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display: none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
With animation:
Removed the display: none in mobile.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
Hello I want to ask about jQuery
How to add jQuery hover (show) function to my jQuery? ( I want to show #menuwrap when hover that area)
2.I want to add jQuery function, when I click MENU, it will hide #menuwrap again and show another menu content
my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tes - Web Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/tes.js"></script>
<link rel="stylesheet" type="text/css" href="css/tes.css">
</head>
<body>
<div id="titletext">
<h1>... Test ...</h1>
</div>
<div id="menuwrap">
<div id="menu">
<div id="menu1">
</div>
</div>
<div id="menutext">
<h1 id="menucontent" a href="xxx">MENU</h1>
</div>
</div>
</body>
</html>
my CSS
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
margin: 0px !important;
padding: 0px !important;
height: 100%;
width: 100%;
overflow: hidden;
}
html {
min-width: 10%;
min-height: 10%;
}
body {
z-index: -1;
background-attachment: fixed;
background-color: #17807a;
}
#titletext {
position: fixed;
z-index: 1;
margin-top: 0px !important;
padding-top: 0px !important;
height: 70px;
background-color: #ffffff;
}
#titletext h1 {
margin: 0px auto;
text-align: center;
color: #0e4e4b;
font: 40px 'Montserrat';
}
#menuwrap {
position: fixed;
top: 550px;
left: 640px;
}
#menu {
display: block;
position: fixed;
height: 100px;
width: 100px;
border-radius: 70px;
border-width: 5px;
border-style: solid;
border-top-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: transparent;
border-right-color: transparent;
-moz-animation: cw;
-moz-animation: cw 5s infinite;
}
#menu1 {
position: absolute;
height: 70px;
width: 70px;
border-radius: 60px;
border-width: 5px;
border-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #ffffff;
border-right-color: #ffffff;
top: 10px;
left: 10px;
-moz-animation: ccw;
-moz-animation: ccw 3s infinite;
}
#menutext {
position: absolute;
top: 27px;
left: 27px;
}
#menutext h1 {
position: absolute;
font-size: 12px;
color: #ffffff;
letter-spacing: 3px;
top: 19px;
left: 4px;
}
#-moz-keyframes cw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(360deg); }
}
#-moz-keyframes ccw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(-540deg); }
}
my jQuery
jQuery(function() {
setTimeout("jQuery('#menuwrap').fadeOut('2000');", 3000);
});
thanks in advance :)
You can use fadeTo() function for this task:
setTimeout(function () {
$('#menuwrap').fadeTo('slow', 0);
}, 3000);
$('#menuwrap').hover(function () {
$(this).fadeTo('slow', 1);
}, function () {
$(this).fadeTo('slow', 0);
});
Demo: https://jsfiddle.net/sruLsr37/2/
So I'm trying to do this typography transformation. I have the letter in all white. When I hover the mouse on top, the top half of the letter should flip down exposing a different color. The problem is that it's flipping down the wrong div.
tback is the lower part of letter A.
tfront is the upper part of letter A.
HTML code:
<div id="letter-container" class="letter-container">
<h2><a href="#">
<div class="twrap">
<div class="tup">
<div class="tback"><span>A</span></div>
<div class="tfront"><span>A</span></div>
</div>
<div class="tbg"><span>A</span></div>
<div class="tdown"><span>A</span></div>
</div></a></h2>
</div>
HERE IS THE CSS:
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
box-shadow: 1px 1px 4px #000;
}
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
z-index: -10;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
}
/*Drop down part*/
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
color: #f2c200;
}
.letter-container h2 .tup .tdown{
background: red;
color: red;
}
.letter-container h2 .tup .tback{
-webkit-transform: rotateX(180deg);
}
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(180deg);
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/g4zja/
Not sure what exactly is the desired effect. Maybe this?
fiddle
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(90deg);
}