Js var, not defined [duplicate]

Js var, not defined [duplicate] - javascript

This question already has an answer here:
jQuery TypeError: $ is undefined
(1 answer)
Closed 5 years ago.
Hi guys for some reason this variable wont work on my file. I have a picture, and when the user hovers over it, its suppose to bring up a swipe box with some information about the pic. However the box wont appear for some reason.
HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p>Read More <i class="fa fa-caret-right"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
height: 100%;
position: absolute;
right: -40%;
top: 0;
background: white;
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
}
.modal .wrapper h2 {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
font-size: 26px;
line-height: 32px;
margin: 8px 0 10px 20px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modal .wrapper h4 {
text-transform: uppercase;
color: #999;
font-size: 12px;
position: relative;
top: 4px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.modal .wrapper h4 span {
text-transform: none;
font-style: italic;
font-family: "Georgia", serif;
}
.modal .wrapper .category {
background: #333;
padding: 7px 15px;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: 500;
position: absolute;
top: -24px;
left: 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper .line {
width: 50px;
height: 2px;
opacity: 0;
background: #E3000C;
margin: 16px 0 14px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.modal .wrapper p {
font-size: 14px;
line-height: 24px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper p span {
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.5px;
}
.modal .wrapper a {
display: block;
text-align: right;
text-decoration: none;
font-style: italic;
font-size: 12px;
color: #999;
font-family: "Georgia", serif;
margin-top: 12px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.modal .wrapper a i.fa {
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-left: 2px;
color: #E3000C;
}
.modal .wrapper a:hover {
color: #E3000C;
}
.modal .wrapper a:hover i.fa {
margin-left: 12px;
}
.modal.open .image-container {
width: 60%;
}
.modal.open .content {
right: 0;
}
.modal.open .content .category {
top: 0;
}
.modal.open .content h2 {
opacity: 1;
margin-left: 0;
}
.modal.open .content h4 {
top: 0;
opacity: 1;
}
.modal.open .content .line {
width: 90px;
opacity: 1;
}
.modal.open .content p {
opacity: 1;
}
.modal.open .content a {
opacity: 1;
}
.trigger {
position: absolute;
top: 24px;
right: 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #333;
}
* {
box-sizing: border-box;
}
.drib {
text-align: center;
display: block;
margin-top: 20px;
color: #fff;
}
.drib .fa {
color: #ea4c89;
}
body {
background: #777;
font-family: "Lato", sans-serif;
}
Thanks for the help

You can't use jquery until you have included jquery, ie:
<script type="text/javascript">
var modal = $('.modal');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
must be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var modal = $('.modal');
</script>
there's still some debate as to the best place to put these (in the <head> (so available to the page) or just before </body> (so the content loads quicker)) as long as they are in the correct order.

Related

Automatic popup [duplicate]

This question already has answers here:
Javascript Age verification Popup
(1 answer)
How to open a CSS-only popup automatically on page load/using Javascript?
(4 answers)
Closed last year.
I am attaching this code which is a popup, opening when you click on the Open Popup button, but I need to make this PopUp automatic when the web page is opened. I don't know how to do this.
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

Use the load event over the DOMContentLoaded since we need the CSS and possibly backgrounds etc
Then just click the button
window.addEventListener("load",function() { btnAbrirPopup.click() })
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
window.addEventListener("load",function() { btnAbrirPopup.click() })
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

you can use load DOMContentLoaded event
this event will be fired when the dom is fully loaded.
or you can take advantage of the load event too.
see the below example.
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
function showPopus(){
overlay.classList.add('active');
popup.classList.add('active');
}
btnAbrirPopup.addEventListener('click', function(){
showPopus();
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
window.addEventListener('DOMContentLoaded', (event) => {
showPopus();
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

any code in js without when button click will run first when screen loads,so remove when button clicked detector
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
/*btnAbrirPopup.addEventListener('click', function(){*/
/*We have removed this click function and commented*/
overlay.classList.add('active');
popup.classList.add('active');
/*});*/
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

Cannot click buttons in modal

I have a modal created with the following CSS. But when I open it up, it appears and allows me to fill out the form fields but clicking on the buttons (they have onclick events) does absolutely nothing - I tried making the buttons simple links which open new pages, but they don't do tat either. I am doing this within a SquareSpace page. I hope that doesn't complicate things.
<style>
.info-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: visible;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.info-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 400px;
border-radius: 0.5rem;
}
.info-continue-button {
background-color: #0069d9;
border-color: #0062cc;
position: relative;
width: 100px;
font-family: "Oxygen", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.info-continue-button:hover {
color: #fff;
}
.info-show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.info-field {
color: inherit;
font: inherit;
margin: 0;
line-height: normal;
margin-bottom: 15px;
background-color: #fff;
border-radius: 0;
-webkit-appearance: none;
box-shadow: none;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
width: 100%;
max-width: 400px;
height: 32px;
border: 0;
border-bottom: 2px solid #d1d1d1;
padding: 8px 0;
border-bottom-color: #2d56bb;
}
.info-modal button {
font: inherit;
margin: 0;
overflow: visible;
-webkit-appearance: button;
font-family: "Adamina", Georgia, serif;
display: inline-block;
height: 40px;
text-align: center;
font-size: 12px;
line-height: 38px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
color:#000;
outline: 0;
padding: 0 30px !important;
background-color: #e0e0e0;
border: 0;
font-weight: 700;
}
.info-modal button:hover {
color: #01855e;
}
.info-modal button[type='submit'].-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.info-modal p {
margin-bottom:0px;
}
</style>

Trying to create a small website, new to html. Having trouble with div's

I just started working with html and download what I thought it was a simple template. Now I have been trying to add drop down menu and add 2 items to the right corresponding to register/login. I tried creating new divs, ul's... But it never seems to line up or items go missing.
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu>ul>li {
float: left;
}
#cssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#cssmenu.align-right>ul>li {
float: right;
}
#cssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
color: #ffffff;
}
#cssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
background: #47c9af;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#logincssmenu:after,
#logincssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#logincssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#logincssmenu ul {
background: #ffffff;
}
#logincssmenu>ul>li {
float: right;
}
#logincssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#logincssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#logincssmenu.align-right>ul>li {
float: right;
}
#logincssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#logincssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
color: #ffffff;
}
#logincssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
background: #47c9af;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #47c9af;
display: block;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: rotateX(2deg);
transform-origin: bottom;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/loginstyle.css">
<link rel="stylesheet" href="css/dropdownstyle.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<ul>
<li><a href='#'>Login</a></li>
</ul>
</div>
</ul>
</div>
</body>
<html>
I also tried to mimic the style of the dropdown button by copy pasting some of the code from the original styles.css but with no good results. I started only a few days ago but I don't get why sometimes it disappears and disalligns.
Here is the original template. http://cssmenumaker.com/menu/flat-tabbed-menu

Put this in the first .I think this should do it.
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<li><a href='#'>Login</a></li>
</div>
Advice:If you are new to html&css,try to make some easy tutorials.Don't download a template beacuse you will not understand what's going on.

Filter by card title brings only the text not the entire card with all elements

I want to filter cards along with their contents (the entire box to show) including title texts and copy button.
For example, when I search for box1 the text "box1" alone is filtered. I want to get the entire card when searched with the title name say "box1".
I coded to filter text inside ".phc-home-hashtags" where all cards live. But it gets only that text not entire card. I'm a beginner in jquery. I copied code and tested from jquery website but I'm not getting the desired results.
Here is the code.
//finding and copying tags
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
var copy = $(this).parents('.phc-hashtags-box').find('.phc-hashtags-box-tags').html();
console.log(copy);
var $temp = $('<input>');
$('body').append($temp);
$temp.val(copy).select();
console.log($temp);
document.execCommand('copy');
$temp.remove();
});
});
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
//toast message
function launch_toast() {
var x = document.getElementById("phc-toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
//scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 150) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(400); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(400); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
/***1. css reset***/
body{
font-family: "Arial", Helvetica, sans-serif;
margin:0;
line-height:1.6;
}
h1, h2, h3, h4, h5, h6, p{
padding:0;
margin:0;
font-weight: 400;
}
/***2. container***/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/***3. header***/
header{
background-color: #fff;
height: 80px;
box-shadow: 1px 1px 8px 1px #d8d8d8;
}
.phc-brand{
float: left;
}
.phc-brand-logo{
width: 40px;
margin: 20px 0px;
}
.phc-navigation{
float: right;
line-height: 40px;
}
.phc-navigation-item{
float: left;
list-style-type: none;
color: #888;
margin-right: 40px;
}
.phc-navigation-item:last-of-type{
margin-right: 0;
}
.phc-navigation-item a{
color: #888;
text-decoration: none;
}
/***4. home-intro***/
.phc-home-fold-content{
background-color: #f2f2f2;
padding: 50px 0px 20px;
}
.phc-home-intro{
text-align: center;
}
.phc-home-intro-title{
color: #666;
margin-bottom: 10px;
}
.phc-brand-home-intro{
width: 24px;
margin-right: 15px;
}
.phc-home-search-container{
width: 580px;
display: block;
margin: 0 auto;
}
#phc-home-search-bar{
width: 100%;
outline: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
height: 50px;
border: none;
border-radius: 5px;
padding: 5px 38px;
font-size: 16px;
color: #888;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
}
#phc-home-search-bar:focus{
color: #666;
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-home-search-icon{
padding: 12px;
position: relative;
float: right;
width: 25px;
height: 25px;
top: -48px;
right: 0px;
opacity: 0.4;
}
#media only screen and (max-width: 767px){
.phc-home-intro-title{
line-height: 1.2;
}
.phc-home-search-container{
width: 100%;
}
}
.phc-home-search-hashtag{
position: relative;
float: left;
top: -43px;
left: 15px;
font-size: 24px;
color: #666;
}
.phc-home-intro-tip{
color: #999;
font-size: 14px;
margin-top: 10px;
}
/***hashtags-box-tags***/
.phc-home-hashtags{
background-color: #f2f2f2;
padding: 40px 0px;
}
.phc-home-hashtags-section{
display: inline-block;
}
.phc-home-hashtags-section-title{
color: #fff;
background-color: #3f51b5;
border-radius: 5px;
padding: 5px 12px;
display: table-cell;
}
.phc-home-hashtags-section-content{
width: 100%;
display: inline-block;
margin-bottom:15px;
}
.phc-hashtags-box{
display:inline-block;
width: 30.5%;
background-color: #fff;
padding: 10px;
margin-right: 1.3%;
border-radius: 5px;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
vertical-align: top;
}
.phc-hashtags-box:last-of-type{
margin-right: 0;
}
#media only screen and (max-width: 1199px){
.phc-hashtags-box{
width: 30%;
margin-right: 1%;
}
}
#media only screen and (max-width: 991px){
.phc-hashtags-box{
width: 29.6%;
margin-right: 1%;
}
}
#media only screen and (max-width: 767px){
.phc-hashtags-box{
width: 27.5%;
margin-right: 1%;
}
}
#media only screen and (max-width: 479px){
.phc-hashtags-box{
width: 94%;
margin-right: 0;
margin-bottom: 15px;
}
.phc-home-hashtags-section-content{
margin-bottom: 0px;
}
}
#media only screen and (max-width: 359px){
.phc-hashtags-box{
width: 92%;
}
}
.phc-hashtags-box:hover{
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-hashtags-box-title{
color: #666;
padding: 0px 5px 5px;
}
.phc-hashtags-box-tags{
color: #666;
font-size: 14px;
background-color: #f2f2f2;
padding: 3px 10px;
}
.phc-hashtags-box-tags-copied{
background-color: #d4d4d4;
}
.phc-hashtags-box-button{
position:relative;
cursor: pointer;
background-color: #3f51b5;
color: #fff;
padding:5px 10px;
border: none;
border-radius: 0px 0px 0px 8px;
float: right;
top: 0px;
left: 0px;
transition: all 0.3s;
}
.phc-hashtags-box-button:hover{
background-color: #009688;
}
.phc-hashtags-box-button-clicked{
background-color: #009688;
}
/***toast***/
#phc-toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#phc-toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
border-radius: 5px;
background-color: #009688;
color: #fff;
}
#phc-toast #phc-toast-message{
color: #fff;
font-size: 14px;
padding: 14px;
overflow: hidden;
white-space: nowrap;
}
#phc-toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#-webkit-keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#-webkit-keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
/***scroll to top***/
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #e91e63;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top img{
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
width: 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top:hover {
box-shadow: 0px 3px 10px 0px #aaa;
}
#return-to-top:hover img {
top: 6px;
}
/***scrollbar***/
/* width */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #009688;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #057d72;
}
/***text selection color***/
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #e91e63;
}
::selection {
color: #fff;
background: #e91e63;
}
footer{
background-color: #fff;
height: 150px;
}
.phc-copyright{
color: #666;
font-size: 14px;
line-height: 150px;
text-align: center;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-fold-content">
<div class="container">
<div class="phc-home-intro">
<h1 class="phc-home-intro-title"><img class="phc-brand-home-intro" src="assets/img/phc_logo.png">Search</h1>
<form class="phc-home-search-container">
<input type="text" id="phc-home-search-bar" placeholder="Search here...">
<img class="phc-home-search-icon" src="assets/img/phc_search_icon.png">
<p class="phc-home-search-hashtag"></p>
</form>
</div>
</div>
</div>
<!--hashtags-->
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-home-hashtags-section">
<div class="phc-home-hashtags-section-content">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box1</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a scrambled it to make</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box2</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box3</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p>
</div>
</div>
</div>
</div>
<!--toast message-->
<div id="phc-toast">
<div id="img"><img src="assets/img/phc_tick.png"></div>
<div id="phc-toast-message">Copied!</div>
</div><!--/toast message-->
<!---scroll to top-->
<img src="assets/img/phc_scroll_to_top.png"></i>
</div><!--/container-->
</div><!--/hashtags-->
<script src="assets/js/script.js"></script>
</body>
</html>

Your problem here is that you are filtering all elements inside $('.phc-home-hashtags') when using $(".phc-home-hashtags *").filter. So $(this).toggle will keep only the exact element that matches the filter text.
You need to filter only upon the .phc-hashtags-box boxes and their contents, change your filter like this:
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags .phc-hashtags-box").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Demo:
//finding and copying tags
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
var copy = $(this).parents('.phc-hashtags-box').find('.phc-hashtags-box-tags').html();
console.log(copy);
var $temp = $('<input>');
$('body').append($temp);
$temp.val(copy).select();
console.log($temp);
document.execCommand('copy');
$temp.remove();
});
});
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags .phc-hashtags-box").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
//toast message
function launch_toast() {
var x = document.getElementById("phc-toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
//scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 150) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(400); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(400); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
/***1. css reset***/
body{
font-family: "Arial", Helvetica, sans-serif;
margin:0;
line-height:1.6;
}
h1, h2, h3, h4, h5, h6, p{
padding:0;
margin:0;
font-weight: 400;
}
/***2. container***/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/***3. header***/
header{
background-color: #fff;
height: 80px;
box-shadow: 1px 1px 8px 1px #d8d8d8;
}
.phc-brand{
float: left;
}
.phc-brand-logo{
width: 40px;
margin: 20px 0px;
}
.phc-navigation{
float: right;
line-height: 40px;
}
.phc-navigation-item{
float: left;
list-style-type: none;
color: #888;
margin-right: 40px;
}
.phc-navigation-item:last-of-type{
margin-right: 0;
}
.phc-navigation-item a{
color: #888;
text-decoration: none;
}
/***4. home-intro***/
.phc-home-fold-content{
background-color: #f2f2f2;
padding: 50px 0px 20px;
}
.phc-home-intro{
text-align: center;
}
.phc-home-intro-title{
color: #666;
margin-bottom: 10px;
}
.phc-brand-home-intro{
width: 24px;
margin-right: 15px;
}
.phc-home-search-container{
width: 580px;
display: block;
margin: 0 auto;
}
#phc-home-search-bar{
width: 100%;
outline: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
height: 50px;
border: none;
border-radius: 5px;
padding: 5px 38px;
font-size: 16px;
color: #888;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
}
#phc-home-search-bar:focus{
color: #666;
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-home-search-icon{
padding: 12px;
position: relative;
float: right;
width: 25px;
height: 25px;
top: -48px;
right: 0px;
opacity: 0.4;
}
#media only screen and (max-width: 767px){
.phc-home-intro-title{
line-height: 1.2;
}
.phc-home-search-container{
width: 100%;
}
}
.phc-home-search-hashtag{
position: relative;
float: left;
top: -43px;
left: 15px;
font-size: 24px;
color: #666;
}
.phc-home-intro-tip{
color: #999;
font-size: 14px;
margin-top: 10px;
}
/***hashtags-box-tags***/
.phc-home-hashtags{
background-color: #f2f2f2;
padding: 40px 0px;
}
.phc-home-hashtags-section{
display: inline-block;
}
.phc-home-hashtags-section-title{
color: #fff;
background-color: #3f51b5;
border-radius: 5px;
padding: 5px 12px;
display: table-cell;
}
.phc-home-hashtags-section-content{
width: 100%;
display: inline-block;
margin-bottom:15px;
}
.phc-hashtags-box{
display:inline-block;
width: 30.5%;
background-color: #fff;
padding: 10px;
margin-right: 1.3%;
border-radius: 5px;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
vertical-align: top;
}
.phc-hashtags-box:last-of-type{
margin-right: 0;
}
#media only screen and (max-width: 1199px){
.phc-hashtags-box{
width: 30%;
margin-right: 1%;
}
}
#media only screen and (max-width: 991px){
.phc-hashtags-box{
width: 29.6%;
margin-right: 1%;
}
}
#media only screen and (max-width: 767px){
.phc-hashtags-box{
width: 27.5%;
margin-right: 1%;
}
}
#media only screen and (max-width: 479px){
.phc-hashtags-box{
width: 94%;
margin-right: 0;
margin-bottom: 15px;
}
.phc-home-hashtags-section-content{
margin-bottom: 0px;
}
}
#media only screen and (max-width: 359px){
.phc-hashtags-box{
width: 92%;
}
}
.phc-hashtags-box:hover{
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-hashtags-box-title{
color: #666;
padding: 0px 5px 5px;
}
.phc-hashtags-box-tags{
color: #666;
font-size: 14px;
background-color: #f2f2f2;
padding: 3px 10px;
}
.phc-hashtags-box-tags-copied{
background-color: #d4d4d4;
}
.phc-hashtags-box-button{
position:relative;
cursor: pointer;
background-color: #3f51b5;
color: #fff;
padding:5px 10px;
border: none;
border-radius: 0px 0px 0px 8px;
float: right;
top: 0px;
left: 0px;
transition: all 0.3s;
}
.phc-hashtags-box-button:hover{
background-color: #009688;
}
.phc-hashtags-box-button-clicked{
background-color: #009688;
}
/***toast***/
#phc-toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#phc-toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
border-radius: 5px;
background-color: #009688;
color: #fff;
}
#phc-toast #phc-toast-message{
color: #fff;
font-size: 14px;
padding: 14px;
overflow: hidden;
white-space: nowrap;
}
#phc-toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#-webkit-keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#-webkit-keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
/***scroll to top***/
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #e91e63;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top img{
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
width: 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top:hover {
box-shadow: 0px 3px 10px 0px #aaa;
}
#return-to-top:hover img {
top: 6px;
}
/***scrollbar***/
/* width */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #009688;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #057d72;
}
/***text selection color***/
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #e91e63;
}
::selection {
color: #fff;
background: #e91e63;
}
footer{
background-color: #fff;
height: 150px;
}
.phc-copyright{
color: #666;
font-size: 14px;
line-height: 150px;
text-align: center;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-fold-content">
<div class="container">
<div class="phc-home-intro">
<h1 class="phc-home-intro-title"><img class="phc-brand-home-intro" src="assets/img/phc_logo.png">Search</h1>
<form class="phc-home-search-container">
<input type="text" id="phc-home-search-bar" placeholder="Search here...">
<img class="phc-home-search-icon" src="assets/img/phc_search_icon.png">
<p class="phc-home-search-hashtag"></p>
</form>
</div>
</div>
</div>
<!--hashtags-->
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-home-hashtags-section">
<div class="phc-home-hashtags-section-content">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box1</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a scrambled it to make</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box2</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box3</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p>
</div>
</div>
</div>
</div>
<!--toast message-->
<div id="phc-toast">
<div id="img"><img src="assets/img/phc_tick.png"></div>
<div id="phc-toast-message">Copied!</div>
</div><!--/toast message-->
<!---scroll to top-->
<img src="assets/img/phc_scroll_to_top.png"></i>
</div><!--/container-->
</div><!--/hashtags-->
<script src="assets/js/script.js"></script>
</body>
</html>

How to center images in a slider blogger

My posts in my blog have a slider which shows all the pictures within the post. All of the pictures are aligned to the left and I don't know how to fix this problem. I want them to align to the center and am not sure how to do that effectively.
here is my website:
http://reezyblog.blogspot.co.uk/
heres all the coding related to the slider:
/* ===[ Slider ]=== */
.homepage-slider {
opacity: 0;
margin-bottom: 60px;
}
.homepage-slider .slick-slide .featured-title {
text-align: center;
position: absolute;
margin: 0 auto;
top: 20%;
left: 30%;
width: 40%;
padding: 40px 30px 50px;
background: #fff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.homepage-slider .slick-slide:hover .featured-title { background: rgba(255,255,255,.9) }
.homepage-slider .slick-slide .featured-title h2 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
font-size: 24px;
line-height: 1.2;
margin-bottom: 10px;
color: #111;
}
.homepage-slider .slick-slide .featured-title .featured-date {
color: #999;
font-size: 13px;
}
.homepage-slider .slick-slide .featured-title .featured-category {
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #e1534f;
margin-bottom: 10px;
border-radius: 3px;
}

Add this text-align: center to .slick-initialized .slick-slide class just like below
.slick-initialized .slick-slide {
display: block;
text-align: center;
}
and make your .slick-slide {display: inline-block;} just like below
.slick-slide img {
display: inline-block;
}

Develop Reference

JavaScript is the programming language of the Web.

Js var, not defined [duplicate] - javascript

Related

Automatic popup [duplicate]

Cannot click buttons in modal

Trying to create a small website, new to html. Having trouble with div's

Filter by card title brings only the text not the entire card with all elements

How to center images in a slider blogger

Categories

Resources