Multiple Inputs that live update into another div - javascript

I'm trying to create multiple text inputs that live update into another div. The first input/div pair works but the next two do not.
Here is my html:
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox'></div>
<div class='printchatbox' id='printchatbox'></div>
<div class='printchatbox' id='printchatbox'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput'>
<input type='text' name='fname' class='chatinput' id='chatinput'>
<input type='text' name='fname' class='chatinput' id='chatinput'>
</div>
</div>
Here is my javascript:
var inputBox = document.getElementById("chatinput");
inputBox.onkeyup = function() {
document.getElementById("printchatbox").innerHTML = inputBox.value;
};
and here is a demo

Try this out,
var inputBox1 = document.getElementById("chatinput1");
inputBox1.onkeyup = function() {
document.getElementById("printchatbox1").innerHTML = inputBox1.value;
};
var inputBox2 = document.getElementById("chatinput2");
inputBox2.onkeyup = function() {
document.getElementById("printchatbox2").innerHTML = inputBox2.value;
};
var inputBox3 = document.getElementById("chatinput3");
inputBox3.onkeyup = function() {
document.getElementById("printchatbox3").innerHTML = inputBox3.value;
};
body {
background: #eee;
}
#document {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
padding: 30px 0;
width: 70%;
max-width: 850px;
margin: 0 auto;
margin-top: 100px;
}
.printchatbox {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
.printchatbox2 {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
#listItem {
padding: 30px;
}
#editorWrapper {
background: #444;
padding: 30px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background: #555;
}
input[type=text]:focus {
outline: none;
border: 1px solid #aaa;
background: #777;
}
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox1'></div>
<div class='printchatbox' id='printchatbox2'></div>
<div class='printchatbox' id='printchatbox3'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput1'>
<input type='text' name='fname' class='chatinput' id='chatinput2'>
<input type='text' name='fname' class='chatinput' id='chatinput3'>
</div>
</div>
The problem was, you always use the same id to get the element which always fetches the first occurrence of the element.

Try this out, giving same id never work
HTML
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox1'></div>
<div class='printchatbox' id='printchatbox2'></div>
<div class='printchatbox' id='printchatbox3'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput1'>
<input type='text' name='fname' class='chatinput' id='chatinput2'>
<input type='text' name='fname' class='chatinput' id='chatinput3'>
</div>
</div>
CSS
body {
background: #eee;
}
#document {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
padding: 30px 0;
width: 70%;
max-width: 850px;
margin: 0 auto;
margin-top: 100px;
}
.printchatbox {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
.printchatbox2 {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
#listItem {
padding: 30px;
}
#editorWrapper {
background: #444;
padding: 30px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background: #555;
}
input[type=text]:focus {
outline: none;
border: 1px solid #aaa;
background: #777;
}
JS
var inputBox1 = document.getElementById("chatinput1");
inputBox1.onkeyup = function() {
document.getElementById("printchatbox1").innerHTML = inputBox1.value;
};
var inputBox2 = document.getElementById("chatinput2");
inputBox2.onkeyup = function() {
document.getElementById("printchatbox2").innerHTML = inputBox2.value;
};
var inputBox3 = document.getElementById("chatinput3");
inputBox3.onkeyup = function() {
document.getElementById("printchatbox3").innerHTML = inputBox3.value;
};
https://codepen.io/djmayank/pen/RZozPX

Related

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots
I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load

How to do a input box placeholder animation

I seen this on a website, where the placeholder text "Pounds" remains on top of input box. Example:
How exactly is that accomplished?
<div id="my-ajax-filter-search">
<form action="" method="post">
<label id="label-lg">Weight</label>
<input type="text" name="search" id="search" value="" >
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
CSS:
.input-text {
min-width: 84px;
}div#my-ajax-filter-search input#search , label#label-lg {
max-width: 250px;
margin: 0 auto;
display: block;
border-radius: 5px;
}
label#label-lg {
color: #fff;
margin-bottom: 6px;
font-weight: bold;
}
div#my-ajax-filter-search input#submit:focus {
outline: none;
}
div#my-ajax-filter-search input#submit {
max-width: 192px;
display: block;
width: 100%;
margin: 15px auto;
background: #fff;
font-family: "Montserrat", Sans-serif;
fill: #373278;
color: #373278;
background-color: #ffffff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-radius: 50px 50px 50px 50px;
box-shadow: 0px 10px 30px -8px rgb(0 0 0 / 16%);
}
div#my-ajax-filter-search input#submit:hover {
color: #ffffff;
background-color: rgba(255,255,255,0);
border-color: #ffffff;
}
.elementor-price-table__feature-inner input {
min-width: 1px;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner {
margin: 0;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner .quantity {
max-width: 67px;
margin: 0 auto;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner a.add_cart.button.product_type_simple {
max-width: 106px;
margin: 12px auto;
display: block;
padding: 17px;
border-radius: 10px;
border: 1px solid;
background: #00a8ff;
color: #fff;
}
You can use this code
body {
font-family: sans-serif;
}
.label-before, .field input:focus + label::before, .field input:valid + label::before {
line-height: 15px;
font-size: 12px;
top: 5px;
background: #fff;
padding: 0 6px;
left: 9px;
}
.field {
position: relative;
margin-bottom: 15px;
margin-top:10px;
display:inline-block;
}
.field label::before {
content: attr(title);
position: absolute;
top: 10px;
left: 15px;
line-height: 30px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: auto;
height: 50px;
padding: 0px 15px;
padding-top:12px;
box-sizing: border-box;
font-size: 14px;
color: #222;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
.field input:focus {
outline: 0;
border-color: blue;
}
.field input:valid + label::before {
content: attr(data-title);
}
.field input:focus + label::before {
color: blue;
}
<div id="my-ajax-filter-search">
<form action="" method="post">
<div class="control-group">
<div>
<label id="label-lg">Weight</label>
</div>
<div class="field">
<input type="text" required autocomplete="off" name="search" id="search" value="" >
<label for="search" title="Pounds" data-title="Pounds"></label>
</div>
</div>
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>

Stopping HTML elements from becoming offset

#h1 {
float: center;
}
h2 {
float: center;
}
p {
font-family: "Comic Sans",sans-serif;
}
#div1 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 12px;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
float:right;
position: absolute;
display: block;
right: 0px;
}
#div2 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 15%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div3 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 30%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div4 {
width: 101px;
height: 101px;
margin-left: 15%;
padding: 1%;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 0px;
background-color: white;
}
#div5 {
height: 101px;
padding: 10px;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 25px;
background-color: white;
margin: 1.5%;
}
#text {
border-bottom: 4px solid black;
padding: 1px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
margin-left: 1.5%;
color: #417cb8;
text-align: center;
}
#tag1 {
border-bottom: 4px solid black;
padding: 1px;
margin-right: 12px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
float: right;
position: absolute;
margin-right: 5px;
font-family: "Comic Sans",sans-serif;
right: 0px;
text-align: center;
color: #417cb8;
}
#tag2 {
margin-right: 15%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag3 {
margin-right: 30%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag4 {
float: left;
padding: 5px;
border-bottom: 4px solid black;
width: 10%;
height: 101px;
border-radius: 25px 0px 0px 25px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
margin-left: 1.5%;
color: #417cb8;
padding: 1%;
}
#element {
float: left;
}
img.object {
border: 1px solid #6496c8;
background-color: white;
border-radius: 25px;
padding: 10px;
height: 101;
width: 101;
float: center;
}
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#element').draggable();
$( "#div1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "isDropped" )
.html( "Dropped!" );
}
});
</script> <script>
function allowDrop(ev, div) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id)
}
function drop(ev, div) {
ev.preventDefault()
if(div == 'div4')
{
var data = ev.dataTransfer.getData("text")
var element = document.getElementById(data)
element.parentNode.removeChild(element)
}
else if (div == 'div5') {
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
else if (div == 'element')
{
}
else
{
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
}
</script>
</head>
<body>
<div style="border: 1px solid black; border-radius: 30px; background-color: #6496c8;">
<h2 style="float: center; text-align: center; border-bottom: 4px solid black; width: 275px; height: 65px; border-radius: 25px 0px 0px 0px; background-color: white; margin-left: 1.5%;"><font style="text-align:center;" face="verdana" color="#417cb8" size=30>Organiser</font></h2>
<div id="tag1"><font size="7">Now</font></div><br><br><br><br>
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="tag2"><font size="7">Next</font></div><br><br><br><br>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="tag3"><font size="7">After</font></div><br><br><br><br>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<br><br><br><br><br><br><br><br>
<p id="text"><font size="7">To Do</font></p>
<p id="div5" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')" overflow="Scroll">
<img class="object" src="ABC.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
<img class="object" src="pencil.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100">
<img class="object" src="recycle.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="100">
<img class="object" src="apple.png" draggable="true" ondragstart="drag(event)" id="drag4" width="100" height="100">
<br><br><p><div id = "tag4"><font size="10">Done</font></div>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"><img src="https://cdn3.iconfinder.com/data/icons/tools-solid-icons-vol-2/72/59-512.png" height=100px width=100px></div><br>
</div>
</body>
</html>
When i drag and drop elements back into the starting div, they become offset, can anybody explain why please? I have tried changing tags to classes, i have tried changing drag and drop options to no avail.
You have 4 images within the <p> element. Those images are followed by line breaks <br><br> because your <p> is not properly closed. so the browser places the </p> tag right after the <br><br> instead of before like I image you meant for,
When you move the image out of the <p> and then back in, it is placed after the line break now, instead of before it. this causes the image to move to the next line.
All you need to do is place a </p> right before those <br><br> or delete the line breaks altogether.

Menu Code doesn't work

HTML code:
<div id="shop-slide">
<div id="shop-content">
<form action="/" method="post">
<h1>You have selected services</h1>
<input type="text" class="field" name="login" value="Return code SMS..." onfocus="if (this.value == 'Return code SMS....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Return code SMS....';}" />
<input type="text" class="field" name="codesms" value="Nick ..." onfocus="if (this.value == 'Nick ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Nick ...';}" />
<input type="submit" class="submit" name="submit" value="Confirm" />
</form>
</div>
</div>
<div id="shop-toggle">
<p>Buy</p>
<p style="display: none;"><img class="close" src="images/close.png" alt="" />Close</p>
</div>
jQuery code
$(document).ready(function() {
$('#shop-toggle').click(function() {
$('#shop-content').slideToggle(300, function() {
$("#shop-toggle p").toggle();
});
});
});
CSS code
#sklep {
width: 50%;
top: 0;
position: absolute;
z-index: 999;
margin-right:30%;
margin-left: 25%;
padding: 0;
}
#sklep a {
color: #ffffff;
}
#sklep a:hover {
color: #616161;
}
#shop-slide {
width: 100%;
margin: 0 auto;
padding: 0px;
background: #3b3b3b;
border-bottom: 1px solid #ffffff;
}
#shop-content {
width: 290px;
height: auto;
margin: auto;
padding: 13px;
display: none;
}
#shop-content p {
margin: 0;
padding: 0;
}
#shop-toggle {
width: 174px;
height: 41px;
background: url(images/btn.png) no-repeat;
margin: 0 auto;
padding: 0;
z-index: 999;
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #a20b1b;
line-height: 37px;
font-weight: bold;
cursor: pointer;
display: block;
text-decoration: none;
}
.sklep-toggle:hover {
color: #41070d;
text-shadow: 1px 1px 0px #ee4557;
}
.sklep-toggle p {
margin: 0;
padding: 0;
}
.field {
width: 200px;
border: solid 1px #303030;
margin-right: 30px;
margin-left: 30px;
padding: 9px 13px;
background: #ffffff;
color: #343434;
background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.submit {
width: 120px;
margin-left: 80px;
padding: 8px 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #484848;
color: #ffffff;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #6f6f6f;
border: solid 1px #303030;
}
.submit:hover {
background: #636363;
}
.close {
vertical-align: middle;
margin: 0px 3px 0px -16px;
padding: 0;
}
I am using this code to eject the menu, html code is linked to mysql, displays several queries.
But I have a problem, when I click button, the menu when the button click all stand out at a time put forward because there are a few queries.
that doesn't work :(
Demo Webiste
see how it looks
please help
See this: http://jsfiddle.net/9X9fL/5/
$(document).ready(function(){
$('.shop-toggle').click(function() {
$this = $(this);
$this.prev().find('.shop-content').slideToggle(300,function(){
$this.find("p").toggle();
});
});
});
Html:
<div class="shop-toggle">
<p style="display: none;">Buy</p>
<p <img class="close" src="images/close.png" alt="" />Close</p>
</div>

Categories