Develop Reference

JS hover animation

First of all i checked all duplicates below. But i still couldnt figure out how to.
make animation hover like transition hover
JS hover-like animation Hover animation with js not working
My problem is
I have
<a class="tooltip animated fadeIn" href="#" style="margin-left: 30px; font-size: 1.6em; font-family: 'Open Sans Condensed'; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; ">
<i class="fa fa-info helper" ></i>
<span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner"> If you require access to programs, <br /> please contact to your system administrator </span></span></span>
</a>
And i can use hoover functionality with css like below
#import url(http://fonts.googleapis.com/css?family=Satisfy);
.tooltip {
display: inline;
position: relative;
z-index: 999;
font-size: 1.2em;
color: #D93742;
}
/* Gap filler */
.tooltip::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover::after {
pointer-events: auto;
}
/* Tooltip */
.tooltip-content {
position: absolute;
z-index: 9999;
width: 400px;
left: 50%;
bottom: 100%;
font-size: 18px;
line-height: 1.4;
text-align: center;
font-weight: 400;
color: #D93742; /* #fffaf0; */
background: transparent;
opacity: 0;
margin: 0 0 5px -200px;
cursor: default;
pointer-events: none;
font-family: inherit; /* 'Satisfy', cursive; */
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tooltip-content span {
display: block;
}
.tooltip-text {
border-bottom: 10px solid #D93742; /* #fffaf0; */
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.tooltip-inner {
background: rgba(85,61,61,0.95);
padding: 5px;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
color: white;
}
.tooltip:hover .tooltip-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Arrow */
.tooltip-content::after {
content: '';
bottom: -20px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #D93742; /* #fffaf0; */
border-width: 10px;
margin-left: -10px;
}
I would like to do same thing with javascript mouseover(hover) and mouseout.
First my div mustn't show. I have table which has headers like 'th'. If a user hoover on that header i want to show tooltip with my javascript closure like how css way does. Css codes only opening in certain positions. But my js tooltip one must open for specific table headers. I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
<div id="toolTipContainer"
style="z-index:100; font-size: 1.2em; color: #D93742; border-style: solid; border-width: 2px; width: 200px; height: 80px; position:absolute; display:none;">
<span class="tooltiptable-content"><span class="tooltiptable-text"><span class="tooltiptable-inner"> If you require access to modules, <br/> please contact to your system administrator </span></span></span>
</div>
my script :
<script>
$(document).ready(function () {
$('th').mouseover(function () {
if ($(this).index() === 0) {
return;
} else {
const top = $(this).offset().top - 82;
// var left = $(this).offset().left;
const left = $(this).offset().left;
$('#toolTipContainer').css({'top': top, 'left': left, 'width': $(this).width()});
$('.tooltiptable-content').css({'width': $(this).width()});
//show tool tips
$('#toolTipContainer').show();
}
});
$('th').mouseout(function () {
$("#toolTipContainer").hide();
});
$('#toolTipContainer').mouseover(function () {
$('#toolTipContainer').show();
});
$('#toolTipContainer').mouseout(function () {
$('#toolTipContainer').hide();
});
});
</script>

I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
You can use the jQuery fadeIn() method instead of show() and fadeOut() instead of hide() to add transitions. If you need more control over the animation there's animate().
Docs:
http://api.jquery.com/fadein/
http://api.jquery.com/animate/

How to make a pop up text show underneath a text on click instead of above the text

I learn about website design and development on the w3schools website. I stumbled on a code and I have been playing around with it. I want the pop-up to show underneath the text instead of above the text but I have no idea how to do it. w3schools also did not explain how to do that.
I think the pop-up text should be able to pop up beneath the text, above the text, behind the text, and also in front of the text. but right now, can anyone please show me how to make the pop-up appear beneath the text, please? Thanks.
Below is a sample of the code.
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 130%; /* changed bottom to top */
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
bottom: 100%; /* changed top to bottom */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent; /* changed border botom color instead of top*/
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Unable to make a smooth transition in background color when scroll event is triggered

I am trying to to create a fixed header for one of my projects using react. The background color of the Header should be transparent when the web page is opened but on scrolling it down, it should change its color to black. I have managed to make the transition smooth while changing the background color from transparent to black (when I scroll down) however, I am unable to make the transition smooth when the background color changes from black to transparent (when I scroll back up).
Here is my Code :
import React from 'react';
import Navbar from '../Navbar/Navbar.js';
import logo from '../images/nsut_logo.png';
class Header extends React.Component {
constructor() {
super();
this.state = {
header: false
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount(){
window.addEventListener("scroll", this.handleScroll);
}
handleScroll(event) {
if (window.pageYOffset > 0) {
this.setState({ header: true });
}
else{
this.setState({ header: false });
}
}
render() {
return (
<header onScroll={this.handleScroll}>
<div className={this.state.header ? "Header-Site-Title-Active" : "Header-Site-Title"}>
<img className = "Header-logo" src={logo} />
<div className="Department-Name">
<h1 >
<b>Department Of Computer Science And Engineering</b>
<br/>
</h1>
<h3>
Netaji Subhas University of Technology
</h3>
</div>
<Navbar />
</div>
</header>
);
}
}
export default Header;
Here is my CSS File:
header{
top: 0;
padding-bottom: 1%;
position: fixed;
z-index: 5;
height: 17vh;
}
#keyframes bgChangeDown {
0% {background-color: none;}
100% {background-color: black;}
}
#keyframes bgChangeUp {
0% {background-color: inherit;}
100% {background-color: none;}
}
.Handle-Site-Title {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeUp;
animation-duration: 2s;
animation-iteration-count: 1;
transition: ease-in 1.5s;
animation-fill-mode: forwards;
}
.Header-Site-Title-Active {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeDown;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition: ease-in 1.5s;
}
.Header-logo{
height:100px;
padding: 5px 10px 0 5px;
margin: 0;
display: inline;
float: left;
}
.Department-Name{
margin: 0;
margin-bottom: 5px;
height: 100px;
float: left;
display: inline;
color: white;
}
.Department-Name h3{
margin-bottom: 15px;
margin-top: -17px
}
.hamburger{
position: fixed;
cursor: pointer;
margin: 5px;
right: 5%;
top: 5%;
}
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav-active {
height: 100%; /* 100% Full-height */
width: 250px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a, .sidenav-active a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
I am still learning React so feel free to suggest a new approach as well.

The classes that you're applying in your React component are Header-Site-Title-Active and Header-Site-Title but in your CSS your bgChangeUp animation is assigned to the Handle-Site-Title class, not Header-Site-Title:
.Handle-Site-Title {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeUp;
animation-duration: 2s;
animation-iteration-count: 1;
transition: ease-in 1.5s;
animation-fill-mode: forwards;
}
.Header-Site-Title-Active {
height: 100px;
width: 100vw;
top: 0;
animation-name: bgChangeDown;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition: ease-in 1.5s;
}
Further to this, this effect may be more easily achieved using CSS transitions:
.Header-Site-Title {
...
background-color: transparent;
transition: background-color ease-in 1.5s;
...
}
.Header-Site-Title-Active {
...
background-color: rgba(0,0,0,black);
...
}

Html, css and Js – onclick show/hide

First of all im new in using js and specificly this script, but I hope you can see past that and help finding a solution for me :-)
Okay so my problem is as following:
I try to make a popup to show customers something they have to see like an offer. As it is right know I can make the popup show when clicking the fixed button at the bottom. But I dont want it to close when I click on the showing image only when I click on the (X) buttonTAG.
Anyone who can see what I do wrong? Really hope so :-*
Best regards
Lasse Madsen
Heres my code:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction2() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("hide");
}
.popup {
position: fixed;
bottom: 0%;
display: inline-block;
cursor: pointer;
left: 10%;
background-color: #efefef;
padding: 10px 20px 10px 20px;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 600px;
height: 400px;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 0%;
left: 20%;
margin-left: -80px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#media only screen and (min-width: 992px) {
.popup {
display: block;
}
}
#myFunction2{
position:absolute;
z-index: 999999;
left:0%;
top: 0%;
}
<div class="popup" onclick="myFunction()">Påsketilbud – klik her! <span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>

Need to remove the display:none from .popup class .. rest of all code is fine and working example as below :
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">/* Popup container - can be anything you want */
.popup {
position: fixed;
bottom: 0%;
display: inline-block;
cursor: pointer;
left: 10%;
background-color: #efefef;
padding: 10px 20px 10px 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 600px;
height: 400px;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 0%;
left: 20%;
margin-left: -80px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#media only screen and (min-width: 992px) {
.popup {
display: block;
}
}
#myFunction2{
position:absolute;
z-index: 999999;
left:0%;
top: 0%;
}
</style>
<div class="popup" onclick="myFunction()">Påsketilbud – klik her!
<span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction2() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("hide");
}
</script>
</body>
</html>

Pop out automatically disappear after some seconds

I found this on how to make a popout on click in Javascript, however I am trying to alter it a bit so when it's clicked on it should automatically disappear again after some seconds... But i can't get it to work, i tried to set the animation to
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
It dissapears but it still comes back again... why is that?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

I think you need to set the default state of .popup .show to opacity: 0 because after the animation runs it will return to the default state you define.
.popup .show {
opacity: 0; /* add this */
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Your fade in should be:
#keyframes fadeIn {
0% {opacity: 0;}
100%{opacity: 1;}
}
By setting it back to 0 at 100% like you do, it does a fadeIn / fadeOut animation
EDIT: Sorry I got the question wrong