Focus problem on input form only on device with touchscreen

Focus problem on input form only on device with touchscreen - javascript

I have a form that shows up when I click on a search button like so :
See above that the mouse doesn't find the input and isn't clickable. If I try to click on it, it closes the window (same as if I pressed Esc button).
We found that the issue occurs on Surface Pro and on mobile phone (I guess it's because of touchable screen).
If I take a computer without touchable screen, it's working fine - see screenshot :
Here is my HTML form :
<form method="get" action="//revendeur-sport.kettler-france.com/recherche" class="dropdown-menu" id="search_form" style="display: block;">
<input name="controller" value="search" type="hidden">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Chercher dans notre catalogue" class="ui-autocomplete-input" autocomplete="off" type="text">
<button type="submit">
<i class="icon icon-search2"></i>
</button>
</form>
And Here is my CSS :
élément {
display: block;
}
#header .search-widget.open .dropdown-menu {
z-index: 99;
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
#header .search-widget .dropdown-menu {
position: absolute;
top: 100%;
margin: 0;
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
.popup-over .dropdown-menu {
right: 0;
left: auto;
}
.search-widget .dropdown-menu {
background: none;
border: none;
min-width: inherit;
padding: 0;
display: block;
float: none;
}
.open > .dropdown-menu {
display: block;
}
.search-widget form {
-moz-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-webkit-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-o-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-ms-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
}
.search-widget form {
position: relative;
}
.dropdown-menu, .popup-content {
animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: animationmenus ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: none;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: animationmenus ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: animationmenus ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 8px 0;
margin: 0.125rem 0 0;
font-size: 14px;
color: #666666;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
font-family: "Poppins", sans-serif;
font-size: 14px;
line-height: 1.5;
color: #666666;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
You can find the website in question at : https://revendeur-sport.kettler-france.com/
EDIT : It works fine on Internet Explorer & Edge. But doesn't on Firefox (last update) & Chrome (last update)
Thanks for your help.

Related

Show/hide multiple popup when clicked

I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw
As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.
My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.
Could someone point me exactly what went wrong for 2017?
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1,
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>

Transform .slider_Y2.opened_Y2 to -100%
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.slider_Y2.opened_Y2 {
background: white;
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>

.slider_Y1 height = 100% ===> distance from top = 100%
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height === > distance from top = 200%
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
background: #fff;
}

Add link in preloader text

I have a preloader in which there are four text animations, I want to add a link on last text animation i.e. on 'View More' text in last text animation and when i click on that link it will redirect me to another page. OR when the loader of four text animations ends, it will redirect me to any other pages or any other index page.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Opening Sequence</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Opening Sequence with CSS Animations</title>
<meta name="description" content="Text Opening Sequence with CSS Animations" />
<style type="text/css">
/* General Demo Style */
#import url(https://fonts.googleapis.com/css?family=Dosis:200,600);
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Dosis', Calibri, Arial, sans-serif;
color: #fff;
background: #000;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #fff;
}
/* Header Style */
.codrops-top {
text-transform: uppercase;
position: relative;
z-index: 1000;
font-size: 0.68em;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
line-height: 2.2;
}
.codrops-top a {
padding: 0 1em;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.2);
display: inline-block;
}
.codrops-top a:hover {
color: rgba(255, 255, 255, 0.9);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
opacity: 0;
}
.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centering with flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.os-phrases h2 > span {
margin: 0 15px;
}
.os-phrases h2 > span > span {
display: inline-block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {
display: inline-block;
color: rgba(0, 0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: OpeningSequence 5.2s linear forwards;
-moz-animation: OpeningSequence 5.2s linear forwards;
animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}
#-webkit-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0;
-webkit-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-webkit-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-webkit-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-webkit-transform: translateZ(130px);
pointer-events: none;
}
}
#-moz-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
-moz-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-moz-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-moz-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-moz-transform: translateZ(130px);
pointer-events: none;
}
}
#keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}
.os-phrases h2:nth-child(4) > span > span > span {
font-size: 30px;
-webkit-animation: FadeIn 4s linear 14s forwards;
-moz-animation: FadeIn 4s linear 14s forwards;
animation: FadeIn 4s linear 14s forwards;
}
#-webkit-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#-moz-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
font-weight: 600;
}
</style>
</head>
<body>
<div class="os-phrases" id="os-phrases">
<h2>Sometimes it's better</h2>
<h2>to hide</h2>
<h2>in order to </h2>
<h2>kill evils.View More </h2>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
$("#os-phrases > h2")
.css('opacity', 1).lettering( 'words' )
.children( "span" ).lettering()
.children( "span" ).lettering();
</script>
</body>
</html>

A solution could be to add in "animationend" event when the animation of last h2 finish a click event => See this page if you need more information about "animationend" event https://www.w3schools.com/jsref/event_animationend.asp.
To do so, I add an ID to the last h2 and put an on() event when its animation finish (I used one(), 'cause the last animation is triggered 18 times (one for letter=> jquery.lettering plugin add a span on every letter), and knowing when the animation of one letter ends is enough, since the animation is the same for all the letters of the last h2.
This is the code:
$("#link").one("animationend", function(e){
$(this).css({"cursor":"pointer"}).on("click", function(){
window.location.href = "http://stackoverflow.com";
})
});
...and this is your beautiful animation! ;)
$("#link").one("animationend", function(e){
$(this).css({"cursor":"pointer"}).on("click", function(){
window.location.href = "http://stackoverflow.com";
})
});
$("#os-phrases > h2")
.css('opacity', 1).lettering( 'words' )
.children( "span" ).lettering()
.children( "span" ).lettering();
/* General Demo Style */
#import url(https://fonts.googleapis.com/css?family=Dosis:200,600);
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Dosis', Calibri, Arial, sans-serif;
color: #fff;
background: #000;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #fff;
}
/* Header Style */
.codrops-top {
text-transform: uppercase;
position: relative;
z-index: 1000;
font-size: 0.68em;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
line-height: 2.2;
}
.codrops-top a {
padding: 0 1em;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.2);
display: inline-block;
}
.codrops-top a:hover {
color: rgba(255, 255, 255, 0.9);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
opacity: 0;
}
.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centering with flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.os-phrases h2 > span {
margin: 0 15px;
}
.os-phrases h2 > span > span {
display: inline-block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {
display: inline-block;
color: rgba(0, 0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: OpeningSequence 5.2s linear forwards;
-moz-animation: OpeningSequence 5.2s linear forwards;
animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}
#-webkit-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0;
-webkit-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-webkit-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-webkit-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-webkit-transform: translateZ(130px);
pointer-events: none;
}
}
#-moz-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
-moz-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-moz-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-moz-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-moz-transform: translateZ(130px);
pointer-events: none;
}
}
#keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}
.os-phrases h2:nth-child(4) > span > span > span {
font-size: 30px;
-webkit-animation: FadeIn 4s linear 14s forwards;
-moz-animation: FadeIn 4s linear 14s forwards;
animation: FadeIn 4s linear 14s forwards;
}
#-webkit-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#-moz-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<div class="os-phrases" id="os-phrases">
<h2>Sometimes it's better</h2>
<h2>to hide</h2>
<h2>in order to </h2>
<h2 id="link">kill evils.View More </h2>
</div>

How to Show Tooltip by default without hovering in pure css

I have the below tooltip which will work when we hover the div element,
I need to show the tooltip by default when refresh the page.
How can I achieve it in pure css? I don't need any javascript stuff here. Any idea to make it work with only css?
I tried removing display: block; from tooltip:before but none of them worked.
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>

You just need to change your opacity from 0 to 1 on the tooltip class itself, as setting it to 0 is what is making it invisible.
.toolwrapper .tooltip {
opacity: 1;
}

Add opacity: 1 in tooltip
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 1 !important;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>

CSS inline Tooltip

I previously was using this code:
My questions is how to set the tooltip to show up inline (to the right) with the parent div instead of above.
Thanks for looking it over
easier to read jsfiddle http://jsfiddle.net/SAYnZ/1/
HTML:
<div id="wrapper">START.
<div id="tooltip">GOOD LUCK !</div>
</div>
CSS:
#wrapper {
cursor: pointer;
position: fixed;
text-transform: uppercase;
background: #39AC9B;
color: #FFFFFF;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 30px;
top: -webkit-calc(50% - 50px);
left: -webkit-calc(50% - 137px);
padding: 16px 25px;
text-align: center;
width: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
#wrapper #tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
#wrapper #tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
#wrapper #tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
#wrapper:hover #tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}

I've updated your fiddle, just set
#wrapper #tooltip {
...
top: -3px;
left: 100%;
color: #fff;
margin-left: 15px;
...
and make triangle point to right direction

Make the bottom=20% in your #wrapper #tooltip.
Check your Fiddle. Have Updated it.
Sorry if its not what you want

Pop up doesn't feel responsive enough

I've been following this guide to make a fold out pop-up and added the following script to make it close when clicking anywhere else.
jsfiddle example without javascript
jsfiddle example with javascript
$(document).ready( function(){
$('#linkie').click( function(event){
event.stopPropagation();
$('.box').toggle();
});
$(document).click( function(){
$('.box').hide();
});
});
But it doesn't feel as responsive as the original without the script when triggering the pop-up. Sometimes it takes two to three clicks to trigger, so I wonder if there's something that needs to be tweaked in the Css to make it a bit more responsive. Any help is much appreciated.
CSS:
label {
position: relative;
cursor: pointer;
}
.box {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
/* Prevent some white flashing in Safari 5.1 */
-webkit-backface-visibility: hidden;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 260px;
padding: 20px;
margin: 24px 0;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.box:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.popUpControl:checked ~ label > .box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
.popUpControl {
display: none;
}
.button {
background: blue;
color: white;
padding: 5px;
border-radius: 5px;
}
/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: black; text-decoration: none; }

Why don;t you just use the first one and add some JavaScript to do the toggling. Something like
$(document).on("click", function(e) {
var elem = $(e.target);
if(elem.hasClass("link")) {
return;
}
$(".popUpControl:checked").next("label").click();
});
Example: http://jsfiddle.net/wP3vD/
Now the code above will not close the other element if there are multiple. That can be fixed, instead of exiting, you can excluded the label from the matched set.
$(document).on("mousedown", function (e) {
var elem = $(e.target);
labelsToClick = $(".popUpControl:checked").next("label").filter(function (i) {
return !$(this).find(elem).length;
}).click();
});
Example: http://jsfiddle.net/wP3vD/1/

Did you tried to set some timer for your toggle and hide method (i.e .toggle(300) OR .hide(300))

We Keep Coding

JavaScript is the programming language of the Web.

Focus problem on input form only on device with touchscreen - javascript

Related

Show/hide multiple popup when clicked

Add link in preloader text

How to Show Tooltip by default without hovering in pure css

CSS inline Tooltip

Pop up doesn't feel responsive enough

Categories

Resources