This question already has answers here:
How can I horizontally center an element?
(133 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 26 days ago.
How to make the captcha at the center when I click the submit button? I am having a hard time centering the captcha in the center. Kindly take a look in the jsfiddle attached hehe
https://jsfiddle.net/rzant4kb/
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Centered the captcha input field using :
.wrapper{
width: 65%;
margin: 0 auto;
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
* {
margin: 0;
border: 0;
}
hr {
border-color: #6ACEBC;
border-style: solid;
border-width: 0.7vw;
background: #6ACEBC;
height: 30px;
}
.logo {
width: 18%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
}
.login {
text-align: center;
display: block;
margin-top: 15px;
}
.username, .password {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 1vw;
margin-right: 10px;
}
.input-details {
border: black 1px solid;
width: 16vw;
height: 2vh;
}
.forgot-password {
margin-left: 230px;
text-decoration: none;
color: #6ACEBC;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20%;
font-size: 75%;
}
.btn-submit {
background: #C78632;
border-radius: 301px;
padding: 5px;
color: white;
font-weight: bold;
margin-top: 20px;
width: 150px;
height: 30px;
}
.line {
bottom: 0;
position: absolute;
background-color: #6ACEBC;
width: 98.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.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
height: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 34px;
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {
padding: 2px 16px;
align-items: center;
}
.modal-body p {
margin-top: 50px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
.wrapper{
width: 65%;
margin: 0 auto;
}
.wrapper .captcha-area{
display: flex;
height: 65px;
margin: 30px 50px 20px 0;
align-items: center;
justify-content: space-between;
}
.captcha-area .captcha-img{
height: 100%;
width: 345px;
user-select: none;
background: #9FFBA8;
border-radius: 5px;
position: relative;
}
.captcha-img img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
opacity: 0.95;
}
.captcha-img .captcha{
position: absolute;
left: 50%;
top: 50%;
width: 100%;
color: #000;
font-size: 35px;
text-align: center;
letter-spacing: 10px;
transform: translate(-50%, -50%);
text-shadow: 0px 0px 2px #b1b1b1;
font-family: 'Noto Serif', serif;
}
.wrapper button{
outline: none;
border: none;
color: #000;
cursor: pointer;
background: #9FFBA8;
border-radius: 5px;
transition: all 0.3s ease;
}
.wrapper button:hover{
background: #6ACEBC;
}
.captcha-area .reload-btn{
width: 75px;
height: 100%;
font-size: 25px;
}
.captcha-area .reload-btn i{
transition: transform 0.3s ease;
}
.captcha-area .reload-btn:hover i{
transform: rotate(15deg);
}
.wrapper .input-area{
height: 60px;
width: 85%;
position: relative;
}
.input-area input{
width: 100%;
height: 100%;
outline: none;
padding-left: 20px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.input-area input:is(:focus, :valid){
padding-left: 19px;
border: 2px solid #4db2ec;
}
.input-area input::placeholder{
color: #bfbfbf;
}
.input-area .check-btn{
position: absolute;
right: 7px;
top: 50%;
font-size: 17px;
height: 45px;
padding: 0 20px;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
}
.input-area input:valid + .check-btn{
opacity: 1;
pointer-events: auto;
}
.wrapper .status-text{
display: none;
font-size: 18px;
text-align: center;
margin: 20px 0 -5px;
}
#media (max-width: 506px){
body{
padding: 0 10px;
}
.wrapper{
padding: 22px 25px 35px;
}
.wrapper header{
font-size: 25px;
}
.wrapper .captcha-area{
height: 60px;
}
.captcha-area .captcha{
font-size: 28px;
letter-spacing: 5px;
}
.captcha-area .reload-btn{
width: 60px;
margin-left: 5px;
font-size: 20px;
}
.wrapper .input-area{
height: 55px;
}
.input-area .check-btn{
height: 40px;
}
.wrapper .status-text{
font-size: 15px;
}
.captcha-area .captcha-img{
width: 250px;
}
}
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<button id="myBtn" class="btn-submit" type="submit">SUBMIT</button>
<br>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p>Captcha Verification</p>
<!--Captcha Verification-->
<div class="wrapper">
<div class="captcha-area">
<div class="captcha-img">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form action="#" class="input-area">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button class="check-btn">Check</button>
</form>
<div class="status-text"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Related
So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!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">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>
I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});
I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>
If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>
Try with setValue('') method to reset any element value.
So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 130vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.text4 {
position: absolute;
float: left;
top: 870px;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000 ; /* 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: 80%;
max-width: 600px;
max-height: 450px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* 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%;
}
}
.transparent_btn {
font-size: 10px;
line-height: 50px;
color: #EC7063 ;
background-color: transparent;
border: 1px solid #D98880;
padding: 1px 20px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background-color ease 300ms;
font-weight: 200;
font-size: 16px;
margin-top: 620px;
float: left;
}
.transparent_btn:hover {
color: #fff;
background-color: rgba(245, 183, 177,0.8);
}
.btn {
position: absolute;
z-index: 1;
margin-left: 640px;
}
.btn2 {
position: absolute;
margin-top: 530px;
margin-left: 640px;
}
<!Doctype html>
<html>
<head>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script>
$(document).ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img04");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li> <i class="fas fa-user"></i> About</li>
<li> History </i></li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li> Hotels</li>
<li> Festival</li>
</ul>
</li>
</ul>
</div>
<h6>Calbayog Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400">
</div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img04">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="btn">
View
</div>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<div class="btn2">
View
</div>
</div>
</main >
<footer style="background: #1a75ff;">
<div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;">
#2019 Calbayog Tourism. All rights resereved.
</div>
</footer>
</body>
</html>
First you have to move your scripts inside document.ready. They are accessing DOM elements before rendering is completed.
Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})
Then you can proceed :)
I met some problems in my code, I find some solutions in this forum but somehow it doesn't help me. So maybe you will find how to solve it. I need to stop the video after closing it with the cross icon and also after clicking on the modal. Also, it will be cool if this video starts from beginning after it opens again.
#font-face {
font-family: "BebasNeue";
src: url("fonts/BebasNeue.otf");
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
::selection {
background: #f3df4b; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #f3df4b; /* Gecko Browsers */
}
html, body {
height: 100%;
background: #f8f8f8; /* fallback for old browsers */
}
h1{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 6rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h2{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 3.5rem;
font-style: normal;
font-weight: normal;
font-variant: small-caps;
}
p{
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #111;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
/*/////////menu////////////*/
header{
height: 100px;
display: inline-block;
position: relative;
z-index: 100;
width: 100%;
}
.menu_box{
width: 100%;
overflow: hidden;
position: fixed;
}
.menu_box_logo{
float: left;
padding: 20px 20px 20px 20px;
}
.menu_box_ul {
float: right;
padding: 40px 0 20px 20px;
}
.menu_box_ul a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.75rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul a:hover {
color: #F3DF4B;
}
.menu_box_ul .icon {
display: none;
}
.menu_box_ul_more{
display: none;
top: 40px;
}
.menu_box_ul_more a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul_more a:hover {
color: white;
}
#media screen and (max-width: 826px) {
.menu_box_ul_more{
display: none;
}
}
#media screen and (min-width: 826px) {
.menu_box_ul_more.show{
display: none;
}
}
#media screen and (max-width: 826px) {
.menu_box_ul a {
display: none;
}
.menu_box_ul a.icon,
.menu_box_ul a.language {
display: inline;
}
}
#media screen and (max-width: 826px){
.menu_box_ul_more.show .icon{
position: absolute;
right: 0;
top: 0;
}
.menu_box_ul_more.show{
background-color: #f8f8f8;
text-align: center;
padding-top: 110px;
}
.menu_box_ul_more.show a{
display: block;
}
}
#a_checked{
color: #F3DF4B;
}
.menu_icon{
display: none;
}
/* The container <div> - needed to position the dropdown content */
.container{
margin-top: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f8f8f8;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/*/////////index////////////*/
.logo{
width: 100%;
text-align:center;
}
.text{
display:table-cell;
vertical-align: middle;
text-align:center;
width: 100%;
padding: 120px 20px 0px 20px;
margin: auto;
width: 50%;
}
.text1{
padding-top: 15px;
padding-bottom: 15px;
}
.text2{
padding-top: 15px;
padding-bottom: 15px;
}
.text2 .h2{
font-family: 'BebasNeue', sans-serif;
font-size: 2.5rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.text3{
padding-top: 15px;
padding-bottom: 15px;
}
.about_button{
padding-top: 15px;
padding-bottom: 15px;
line-height: 500px;
text-align: center;
height: 500px;
}
.text3_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.about_read_watch{
line-height: 100px;
text-align: center;
height: 100px;
margin-bottom: 60px;
margin-top: 20px;
}
.text4_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.button{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
}
.button2{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button3{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button:hover,
.button2:hover,
.button3:hover{
color: #000;
background-color: #f8f8f8;
border: 2px solid #000;
-webkit-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-moz-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-ms-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-o-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
}
#media (max-width:545px) {
.text1 h1{
font-size: 2.5rem;
}
.text1{
padding-top: 15px;
padding-bottom: 5px;
}
.text2{
padding-top: 5px;
padding-bottom: 5px;
}
.text2 h2{
font-size: 2rem;
}
.text3{
padding-top: 5px;
padding-bottom: 15px;
}
.text{
padding: 50px 20px 0px 20px;
}
}
.imglog{
margin-top: 70px;
width: 500px;
height: 190.5px;
}
#media (max-width: 470px) {
.imglog{
width: 250px;
height: 95.25px;
}
}
#media (max-width: 585px) {
.button3{
margin-top: 20px;
}
}
#media (max-width: 390px) {
.button2{
margin-top: 20px;
}
}
/*/////////footer////////////*/
#import url(https://fonts.googleapis.com/css?family=Lato);
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.footer {
height: 50px;
text-align: center;
}
.col-lg-6 .offset-lg-2 {
width: 260px;
display:block;
margin: 0 auto;
}
.col-lg-6 .offset-lg-2 ul{
padding:0;
list-style: none;
}
.social-icon {
color: #fff;
font-size: 1.875rem;
}
.social-icons{
margin-bottom: -1rem;
}
.social-icons li {
vertical-align: top;
display: inline;
}
.social-icons a {
color: rgb(234, 234, 234);
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-instagram:hover {
background-color: #9b6954;
}
/*/////////work.html file////////////*/
.col-lg-5.col-md-12 a{
text-decoration-line: none;
}
#div_box_video{
width: 650px;
height: 550px;
background-image: url(/./honey/rusne.jpg);
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
background-size: cover;
margin: 0 auto;
margin-top: 30px;
}
#div_box_video img{
z-index: 3;
}
#shadow_box{
position: relative;
width: 650px;
height: 550px;
background-color: rgba(137, 137, 137, 0.56);
z-index: 10;
text-align: center;
color: rgb(28, 28, 28);
}
#shadow_box:hover{
background-color: rgba(137, 137, 137, 0.9);
}
#popupBoxOnePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxTwoPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxThreePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxFourPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
.login-html{
width:70%;
height:85%;
position:absolute;
padding:90px 70px 50px 70px;
margin: auto;
top: 7.5%;
left: 15%;
border-radius: 10px;
}
.close {
position: absolute;
right: 20px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
#forphone2{
margin: 0 auto;
width: 60%;
}
#media (max-width:1298px) {
.sign-in-htm iframe{
height: 550px;
}
.login-html{
width: 90%;
left: 5%;
}
}
#media (max-width:1000px) {
.sign-in-htm iframe{
height: 400px;
}
.login-html{
width: 90%;
left: 5%;
top: 15%;
}
}
#media (max-width:780px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
}
}
#media (max-width:550px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 35px 50px 35px;
}
}
#media (max-width:450px) {
.sign-in-htm iframe{
height: 200px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 15px 50px 15px;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt-LT"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=""></script>
<script>
</script>
<link rel="icon" type="image/x-icon" href="../img/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="google-site-verification" content="" />
<title>Honey agency | Video Production</title>
<meta name="google-site-verification" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" itemprop="description" content="Main agiency "Video Production" services: video promotion, video creation, video" />
<meta name="keywords" itemprop="keywords" content="video promotion, video creation, video" />
<link rel="canonical" href="http://thehoney.lt/" />
<meta property="og:title" content="Begining"/>
<meta property="og:description" content="[fullwidth backgroundcolor="" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="top left" backgroundattachment="scroll" bordersize="1px" bordercolor="" paddingTop="" paddingBottom="20"]Make your story sweet as honey!Agiency "VIDEO PRODUCTION SERVICES" - is"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://thehoney.lt/"/>
<meta property="og:site_name" content="VIDEO PRODUCTION SERVICES"/>
<meta property="og:image" content="http://thehoney.lt/img/honey_logo_transparent_croped.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css?v=1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div id="popupBoxOnePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxOnePosition').style.display='none'" class="close" title="Close Modal1">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxTwoPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxTwoPosition').style.display='none'" class="close" title="Close Modal2">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700" src="https://www.youtube.com/embed/x-3BnCklSuE?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxThreePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxThreePosition').style.display='none'" class="close" title="Close Modal3">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxFourPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxFourPosition').style.display='none'" class="close" title="Close Modal4">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="wrapper">
<header>
<div class="menu_box" id="menu_box">
<div class="menu_box_logo">
<img class="imglogo" style="width: 250px; height:95,25px;" src="../img/honey_logo_transparent_croped.png" alt="Honey logo">
</div>
<div class="menu_box_ul" id="myTopnav">
Our work
Who we are
Contact us
☰
</div>
<div class="menu_box_ul_more" id="myDropdown" class="dropdown-content">
Our work
Who we are
Contact us
</div>
</div>
</header>
<div class="container-fluid" style="margin-bottom: 70px; width:100%;">
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" id="forphone">
<a id="forphone2" href="javascript:void(0)" onclick="document.getElementById('popupBoxOnePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" id="forphone">
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxTwoPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxThreePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxFourPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="raw" style="margin-top: 70px;">
<div class="about_read_watch">
<span class="text4_span">
<input type="button" class="button" onclick="location.href='../contacts';" value="Contact Us"/>
</span>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="social">
<div class="footer-social-icons">
<ul class="social-icons">
<li><a target="_blank" href="https://www.facebook.com/Honey-Media-247807789328138/" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/company/11763547/" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/thehoney_media/" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UCQhsEwX6sxXnxt70pJXg1Rw/featured" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.menu_box');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.menu_box').css('background-color', '#f8f8f8');
$('.imglogo').css('width', '125px');
$('.imglogo').css('height', '47.625px');
$('.menu_box_ul a').css('font-size', '1.25rem');
$('.menu_box_logo').css('padding', '10px 10px 10px 10px');
$('.menu_box_ul').css('padding', '25px 0 10px 10px');
$('.menu_box_ul_more.show a').css('font-size', '1.75rem');
$('.menu_box_ul_more.show').css('padding-top', '80px');
} else {
$('.menu_box').css('background-color', 'transparent');
$('.imglogo').css('width', '250px');
$('.imglogo').css('height', '95.25px');
$('.menu_box_ul a').css('font-size', '1.75rem');
$('.menu_box_logo').css('padding', '20px');
$('.menu_box_ul').css('padding', '40px 0 20px 20px');
$('.menu_box_ul_more.show a').css('font-size', '2rem');
$('.menu_box_ul_more.show').css('padding-top', '110px');
}
});
});
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('popupBoxOnePosition');
var modal2 = document.getElementById('popupBoxTwoPosition');
var modal3 = document.getElementById('popupBoxThreePosition');
var modal4 = document.getElementById('popupBoxFourPosition');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>
This will do the trick
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
This too
document.getElementById('some_frame_id').contentWindow.location.reload();
The second one will not work due to CORS in most cases.
You should do that by postMessage like the following:
$('.close-modal').click(function(){
$('.your-iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});