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);
...
}

Image Gallery - mobile devices optimazation

So i'm new to HTML, CSS, Bootstrap and JavaScript i made this gallery, it looks great but i need to fix it for mobile devices and smaller screens. What i should change?
Those #myImg4,5,12,13 are vertical images placed in differently because of design
PC preview: https://imgur.com/a/PK8irdL
and this is how it looks on smaller screen
BTW: I know, that code is very bad but i started with coding 4days ago so :/
I'm very thankful for every Respond!!!!
CSS Code for gallery is:
.gallerycontent {
margin: 10px 200px 40px 100px;
}
.galleryhr {
border-top: 2px solid #FF0000;
width: 100;
}
.galleryhr h1 {
color: #000;
text-align: center;
}
/* Style the Image Used to Trigger the Modal */
#myImg , #myImg2 , #myImg3 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg14 , #myImg15 , #myImg16 {
margin-left: 20px;
max-height: 200px;
height: 100%;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s;
}
#myImg4 {
max-height: 414px;
height: 100%;
position: absolute;
top: 165px;
right: 186px;
cursor: pointer;
transition: 0.3s;
}
#myImg5 {
max-height: 414px;
height: 100%;
position: absolute;
top: 165px;
right: 511px;
cursor: pointer;
transition: 0.3s;
}
#myImg12 {
max-height: 414px;
height: 100%;
position: absolute;
top: 590px;
right: 511px;
cursor: pointer;
transition: 0.3s;
}
#myImg13 {
max-height: 414px;
height: 100%;
position: absolute;
top: 590px;
right: 186px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
#myImg4:hover {opacity: 0.7;}
#myImg5:hover {opacity: 0.7;}
#myImg6:hover {opacity: 0.7;}
#myImg7:hover {opacity: 0.7;}
#myImg8:hover {opacity: 0.7;}
#myImg9:hover {opacity: 0.7;}
#myImg10:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 50%;
max-width: 1000px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

I would suggest to use bootstrap (https://getbootstrap.com/), you could do something like this in bootstrap v3:
<div class='row'>
<div class='col-lg-12'>
<div class='col-lg-8'>
<img class='img-responsive col-lg-4' src='image/path'/>
<img class='img-responsive col-lg-4' src='image/path'/>
<img class='img-responsive col-lg-4' src='image/path'/>
</div>
<div class='col-lg-4'>
<img class='img-responsive col-lg-6' src='image/path'/>
<img class='img-responsive col-lg-6' src='image/path'/>
</div>
</div>
</div>
and it should look good also on mobile.

The culprit here is being 'too precise' with the positions.
Absolute positioned items are not aware of their physical context. They don't know when they should occupy less space or go on a new row.
It's time to take a look at Responsive Web Design.
There are a couple of ways in which you can approach it.
Float based layouts: https://www.w3schools.com/css/css_float.asp
Grid based layouts: https://css-tricks.com/snippets/css/complete-guide-grid/
Flex based layouts: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
Start in this order.
Enjoy the process!

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>