I'm trying to remove a div when you login (I know it's not secure!). I need it in javascript! I tried everything but it doesn't want to remove. the code is here ---------------------------------------------------------------------------------------> I KNOW IT'S NOT SECURE! For some reason the script doesn't work! tried everything I know in javascript.
var box = document.getElementById("loginbox");
function pasuser(form) {
if (form.email.value=="GG#gmail.com") {
console.log(form.email.value)
if (form.password.value=="123") {
//window.location.assign('/index2.html');
var next = document.createElement("IFRAME");
next.src='https://codepen.io';
next.classList.add("codepen");
document.body.appendChild(next);
//box.classList.remove("box");
//box.style.display = "none";
box.parentNode.removeChild(box);
//box.outerHTML = "";
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(https://i.ytimg.com/vi/WLs_DST6dTA/maxresdefault.jpg);
background-size: cover;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box h2:hover{
letter-spacing: 5px;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 0;
letter-spacing: 1px;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
top: -24px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
.box .inputBox input:focus,
.box .inputBox input:valid {
top: -26px;
left: 0;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
}
.box .inputBox input:active + .placeholder {
color: #fff;
}
.box .inputBox input:focus{
border: solid 1px #03a9f4;
border-radius: 5px;
}
.box input[type="button"] {
background: transparent;
border: 2px solid #03a9f4;
outline: none;
color: #03a9f4;
text-align: center;
font-size: 15px;
padding: 10px 20px;
cursor: pointer;
box-sizing: border-box;
border-radius: 5px;
-webkit-transition: all .2s ease-out;
transition: all .2s ease;
}
.box input[type="button"]:hover{
border: 2px solid #03a9f4;
background: #03a9f4;
color: #fff;
text-align: center;
outline: none;
font-size: 15px;
padding: 10px 20px;
}
.codepen {
width: 100%;
border: none;
height: 620px;
}
.hide {
display:none !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<script src="/next.js"></script>
<title></title>
</head>
<body>
<div id="loginbox" class="box">
<h2>Login</h2>
<form autocomplete="on" method="post" action="./index2.html">
<div class="inputBox">
<input id="email" type="email" name="email" required="" placeholder="Username" autocomplete="email" dir="ltr" autocapitalize="none">
<label>Username</label>
</div>
<div class="inputBox">
<input id="password" type="password" name="pass" required="" placeholder="Password" autocomplete="new-password" dir="ltr" autocapitalize="off" autocorrect="off">
<label>Password</label>
</div>
<input id="submitBtn" type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
Try with:
document.getElementById("loginbox").remove();
to fit in your code:
box.remove();
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 want to create a Modal Popup effect every time I click on "Login" on my index page.
The only thing is, I have created separate HTML/CSS pages (for example, index.html/css, login.html/css, etc..).
I'm confused, how to use JavaScript to make this happen.
As I have separate pages. I know how to apply modal popup effect, on single html/css page using JavaScript.
But I don't know how to make this happen if I'm using several different pages. My code looks messed up a bit. All my pages are linked to each other properly but without any effect.
Below is my index.html code and login.html code along with the css code.
index.html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link href="login.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>MyWeb</title>
</head>
<body>
<div class="header">
<h1> <i class="fas fa-music"></i>Spotify</h1>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<div class="siderbarMenuInner">
<li> <div class="show-login-button"> <i class="fas fa-sign-in-alt"></i> login</div></li>
<li> <i class="fas fa-home"></i> Home </li>
<li> <i class="fas fa-search"></i> browse </li>
<li> <i class="fab fa-itunes-note"></i> My Playlist</li>
<li> About </li>
</ul>
<div class="Instagram">
<i class="fab fa-instagram"></i>
</div>
<div class="Twitter">
<i class="fab fa-twitter"></i>
</div>
<div class="Facebook">
<i class="fab fa-facebook-f"></i>
</div>
</div>
</body>
</html>
index.css code:-
body {
overflow-x: hidden;
height: 100%;
background-color: white;
}
body {
font-family: tahoma;
margin: 0;
padding: 0;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #fc466b;
position: fixed;
height: 50px !important;
overflow: hidden;
z-index: 10;
}
h1 {
margin: 1px;
top: 13%;
color: #2f3640;
text-decoration: none;
position: absolute;
left: 3%;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
h1:hover {
color: white;
}
h1 i {
font-size: 20px;
letter-spacing: 8px;
}
.searchbox {
position: absolute;
border-radius: 40px;
right: 2%;
background: #2f3640;
height: 40px;
top: 6%;
padding: 0.1%;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.search-btn {
color: #fc466b;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s;
text-decoration: none;
}
.searchbox:hover>.search-txt {
width: 500px;
padding: 0 6px;
}
.searchbox:hover>.search-btn {
background: white;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 50px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 50px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #fc466b, #3f5efb);
}
.siderbarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.siderbarMenuInner li {
list-style: none;
color: #2f3640;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding: 30px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
text-decoration: none;
text-align: center;
transition: 0.4s;
}
.siderbarMenuInner li:hover {
color: white;
}
.siderbarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
text-decoration: none !important;
color: inherit;
}
.sidebarMenuInner li a {
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
a {
text-decoration: none !important;
color: inherit;
}
.Instagram {
top: 90%;
left: 16%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Instagram:hover {
color: black;
}
.Twitter {
text-align: center;
top: 90%;
left: 45%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Twitter:hover {
color: black;
}
.Facebook {
text-align: center;
top: 90%;
left: 75%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Facebook:hover {
color: black;
}
login.html code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Login Form</title>
<link rel="stylesheet" href="login.css">
<link rel="" href="index.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
>
<div class="login-form">
<form class="login-box" action="index.html" method="post">
<h1>Login</h1>
<input class="txtb" type="text" name="" placeholder="Username">
<input class="txtb" type="password" name="" placeholder="Password">
<input class="login-btn" type="submit" name="" value="Login">
</form>
</div>
</body>
</html>
login.css code:-
* {
font-family: "Monteserrat", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.login-form{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #fc466b, #3f5efb);
transition: 0.4s;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.login-box h1 {
font-weight: 400;
text-transform: uppercase;
margin-top: 0;
}
.txtb {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #1c2830;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.txtb:focus {
width: 280px;
border-color: #000000;
}
.login-btn {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #000000;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.login-btn:hover {
background: #000000;
}
JS code for modal on single HTML page:-
// GetElements
const modal = document.querySelector('#modal');
const modal_btn = document.querySelector('#modal-btn');
const close_btn = document.querySelector('.close');
//Event_Listener
modal_Btn.addEventListener('click', openModal);
close_Btn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
//Open & Close
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}
If I'm understand correctly, you are trying to use a separate HTML file as a modal, right? If that correct, try to watch this answer :
Open Modal (bootstrap) from other html-file
GetAjax gets the remote file and load_modal is just a shorthand function that calls getajax and loads the modal.
function getAjax(url, success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
return xhr;
}
function load_modal(url){
getAjax(url, function(data){
modal.innerHTML = data;
modal.style.display = 'block';
});
}
I'm having issues creating my auto-completing/auto-suggesting input box.
This is how it's currently working: https://i.imgur.com/2RzI3il.gifv
And here's a code snippet, bare in mind, the react code isn't included. The functionality isn't important, just the CSS layout.
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
#main{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div>
from:
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
</div>
<div>
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I want it to be displayed like this: https://i.imgur.com/qFFn5Gu.png
However, it is being displayed like this: https://i.imgur.com/irU05Yh.png
When I use Chrome's inspect tool, I find that the elements have these weird "hitboxes": https://i.imgur.com/b923Dzp.gifv
though that might not be relevant? I've tried to fix this and I just suck at CSS too much :p
There are multiple ways to work this out, here is one of them:
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.input-contianer {
position: relative;
text-align: left;
}
label {
display: inline-block;
margin-top: 5px;
}
#main{
position: absolute;
top: 0;
left: 60px;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 60px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="input-contianer">
<label>
from:
</label>
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I kept the two inputs absolute positioned, but wrapped them in a .input-container div that has a relative position (so the absolute will be absolute to the relative container).
I added a <label> element that will wrap the from:, this way you can position that label.
You should set a wrapping div with a relative position and play with the left position of the inputs
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.container{
position:relative;
}
.label{
position: absolute;
padding: 5px;
}
#main {
position: absolute;
top: 0;
left: 50px;
z-index: 1;
background: transparent;
}
#autocomplete {
position: absolute;
top: 0;
left: 50px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="container">
<div class="label">from:</div>
<input type="text" id="main" class="LocationInput-Input-Valid" value="Thórshavn">
<input type="text" id="autocomplete" class="LocationInput-Input" value="Thórshavn" disabled="">
</div>
</div>
I am creating a t-shirt designing website for my college project.I want to display the text written by the user in 'input type text' in the iframe where i have set a t-shirt as the background image.I searched the internet but couldn't get any viable solution..
I want the text to appear on top of the t-shirt on the chest area.
Any help is appreciated..
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<form action="include/storeinfo.inc.php" method="post">
<div>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="large"/>
Large(L)
</label>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="text" class="gate" id="enter" placeholder="Max 10 letters.." maxlength="10" />
<label for="enter">Enter</label>
</span>
<br>
<input type="submit" class="colorbutton" value="Proceed" name="submit" style="margin-top:20px; margin-left:100px;">
<input type="submit" class="colorbutton" value="Preview" name="submit1" style="margin-top:20px; margin-left:50px;">
</form>
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
html file of iframe:
<html>
<head>
<style>
body
{
overflow-y: hidden;
overflow-x: hidden;
background: url(image/white.jpg);
background-size: 690px 690px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
Unless you have a very good reason for doing so, don't use and . Seems unnecessary and convoluted.
It's quite simple to grab the value from an <input> or <textarea> with JavaScript and place it in another element, like a <div>. Here's an uber basic example that would produce a live example (pretend that the green DIV is a photo of a t-shirt).
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
.demo-tshirt {
position: relative;
width: 300px;
height: 400px;
background-color: seagreen;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 50%;
width: 50%;
transform: translateX( -50%);
color: white;
font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="tshirt-text">
Text: <input type="text" id="tshirt-text" class="tshirt-text" name="tshirt-text">
</label>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>
If the entire content of your iframe is just the background definition, you could write the HTML to the iframe document directly.
from Write elements into a child iframe using Javascript or jQuery ...
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow
|| ifrm.contentDocument.document
|| ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();