Append does not work for appending text to an element

Append does not work for appending text to an element - javascript

Similar to this question:
jQuery append fadeIn
But the solution isn't working for me.
Basically trying to ask the user their name and then append a greeting below.
Preferably on a fade in, I've tried a few solutions I came across here but to no avail.
The "document.name_form..etc) works fine when called inside an alert as well.
Can anyone see where I'm going wrong?
function doit() {
$('#item2').append( document.name_form.fname.value +"U WOT");
}
(The function doit gets triggered from the html forms "onSubmit", and has triggered alerts etc successfully)
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

.append() should be used to add new DOM elements. To add text to an existing element, use .text.
function doit(e) {
e.preventDefault();
$('#item2').text( function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
});
}
You also have to use preventDefault() to prevent the form from being submitted. To match this, I changed the <form> to:
<form name="name_form" action="" onSubmit="doit(event)">
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit(e) {
e.preventDefault();
$('#item2').text(function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val() + "U WOT";
});
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(event)">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>
Actually, your append() DOES work. You had two problems in your fiddle:
You had onLoad selected. This causes all the code to be inside a window.onload function, so it wasn't in the global scope, which is needed for functions used in onsubmit attributes. Using No wrap fixes this.
You weren't preventing the default submission. Beside the way I did this above, you can also do it by simply returning false in the onsubmit:
onsubmit="doit(); return false;"
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(); return false">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

I think the problem is that the function doit is not available when you bind onsubmit.
You can try to declare doit like a variable:
doit = function(){
By the way, if you don't want to submit really the form you can bind onclick instead of onsubmit.
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
doit = function() {
$('#item2').append(document.name_form.fname.value + "U WOT");
return false;
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="#" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

Related

Open a multiple modal automatically

I have a multiple modal with next/previous buttons. I want my modal to open automatically as soon as the page loads.
For now I have to press the "Open modal" button, I want to remove that button.
I appreciate the help
Open the modal as soon as the page loads
Remove the "Open modal" button
The modal is multiple
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function() {
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

Move your open modal code into a separate named function, so that you can use it in 2 places
call directly in the document ready function
register it to the click handler
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
// call open modal on document ready
openModal();
})
// register the named function to the click handler
$('#openModalBtn').click((event)=>openModal());
// moved to a separate named function, so it can be called directly
function openModal(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
}
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

On click form label moves up but when a user clicks out of the input field the label doesn't go back to normal

Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.
I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Thanks for your help in advance!
Cheers

Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:
$(".js-form-item").on("click", function () {
$(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
if($(this).val() === '') {
$(this).parent('.js-form-item').removeClass('form-item--input-filled');
}
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.

In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.
https://api.jquery.com/blur/

Use .blur() and it will solve your issue.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
But in my opinion you should use .focus() rather than your .click() function
$(".js-form-item > input").on("focus", function() {
$(this).parent().addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Hope this solved your issue.

Your code is ok, only change it similar this. It will works stylish!. simple and short:
$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
function(){
$(this).removeClass('form-item--input-filled');
}
);
Extra descriptions:
I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.

How do I get a prompt box to send data to a chat box?

How do I get a prompt box to send data to a chat box?
I've been trying to get my chat box to receive data from a prompt then a person's message, but if I do send a message it will say that person is undefined and then the person's message.
/*Chat box*/
#chatbox {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
box-sizing: border-box;
font-size: 16px;
display: table;
padding: 10px 20px 12px 15px;
border: 1px solid #cccccc;
height: 40.8em;
width: 52em;
}
/*Chatbox inside border*/
.chatboxborder {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
vertical-align: bottom;
overflow-y: scroll;
transition: width 0.5s ease-in-out;
box-sizing: border-box;
font-size: 16px;
display: table-cell;
padding: 10px 20px 12px 15px;
height: 2.8em;
border: 1px solid #cccccc;
width: 20em;
}
/*Chat message*/
#chatspace {
transition-duration: 5s;
background-color: #ECECEC;
position: fixed;
z-index: 4;
bottom: 0px;
height: 20px;
border: 1px solid #000;
right: 240px;
left: 20px;
}
#chatbox p {
transition-duration: 5s;
-moz-border-radius: 4px;
background: #E6E6E6;
padding: 1em;
margin: auto;
border: 1px solid #BDBDBD;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
<script>
//Your username is asked when a user opens the window //
window.addEventListener('load',
function() {
var person = prompt("Enter your username");
if (person != null) {
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
// If the prompt is empty, anoterh appears //
while (person == "" || person == null) {
person = prompt("Your username can't be empty!", "");
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
}
}
}, false);
</script>
<p id="username"></p>
<br>
<br>
</div>
<div class="container">
<div id="chatbox">
<div class="chatboxborder" id="chatboxborder">
</div>
</div>
</div>
<div class="fixed" id="boxfive">
<script>
// The message is showed in the chatbox //
$(document).ready(function() {
$('#submitmsg').click(function() {
var message = $('#usermsg').val();
$('#chatboxborder').append('<p id="username">' + ' says: ' + message + '</p id="username">' + '<br>');
$('#usermsg').val('');
});
});
</script>
<form name="message">
<input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
<button type="button" id="submitmsg" value="Send">Submit</button>
</form>
</div>

Just to add some explanation as to why this fixes the problem, the original code was storing the user's name in a local variable inside the event listener callback. Trying to use that variable outside the callback scope would result in undefined because it didn't exist there.
You can just store the persons name in a global variable and use it when they send a message. Example in the snippet.
//Your username is asked when a user opens the window //
var name
window.addEventListener('load',
function() {
var person = prompt("Enter your username");
if (person != null) {
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
name = person
// If the prompt is empty, anoterh appears //
while (person == "" || person == null) {
person = prompt("Your username can't be empty!", "");
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
}
}
}, false);
// The message is showed in the chatbox //
$(document).ready(function() {
$('#submitmsg').click(function() {
var message = $('#usermsg').val();
$('#chatboxborder').append('<p id="username">' + name + ' says: ' + message + '</p>' + '<br>');
$('#usermsg').val('');
});
});
/*Chat box*/
#chatbox {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
box-sizing: border-box;
font-size: 16px;
display: table;
padding: 10px 20px 12px 15px;
border: 1px solid #cccccc;
height: 40.8em;
width: 52em;
}
/*Chatbox inside border*/
.chatboxborder {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
vertical-align: bottom;
overflow-y: scroll;
transition: width 0.5s ease-in-out;
box-sizing: border-box;
font-size: 16px;
display: table-cell;
padding: 10px 20px 12px 15px;
height: 2.8em;
border: 1px solid #cccccc;
width: 20em;
}
/*Chat message*/
#chatspace {
transition-duration: 5s;
background-color: #ECECEC;
position: fixed;
z-index: 4;
bottom: 0px;
height: 20px;
border: 1px solid #000;
right: 240px;
left: 20px;
}
#chatbox p {
transition-duration: 5s;
-moz-border-radius: 4px;
background: #E6E6E6;
padding: 1em;
margin: auto;
border: 1px solid #BDBDBD;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
<p id="username"></p>
<br>
<br>
</div>
<div class="container">
<div id="chatbox">
<div class="chatboxborder" id="chatboxborder">
</div>
</div>
</div>
<div class="fixed" id="boxfive">
<form name="message">
<input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
<button type="button" id="submitmsg" value="Send">Submit</button>
</form>
</div>

Expanding Search Off Click Close JQuery

I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.

You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>

Collapsible search button without using collapsible header

With JQM, I am trying to achieve the following header design
|[Home] Company------------------------------[Search][Filter]
[list of items]
Home button and company tille left aligned and the Search and Filter right aligned.
When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.
Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?

The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.
Code -:
$(document).on("click", "#search-button", function(event)
{
$("#searchtickets").toggle();
});
.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
margin-right: 50px !important;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1 class="company">Company</h1>
<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>
<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>

I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
/* search input field */
input[type=search] {
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* placeholder */
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
<h3>Try this</h3><br/>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Or this</h3>
<form id="demo-b">
<input type="search" placeholder="Search">
</form>
And u can also do this by this way of using a small JS-
$(function() {
$('.srch-button').click(function(){
var $wrapper = $('.srch-wrapper'),
isOpen = $wrapper.hasClass('open');
$wrapper.toggleClass('open')
.find('.srch-input')[isOpen ? 'blur' : 'focus']();
// remove this - onyl for demo
return false;
});
})
body {
padding: 10px 20px;
background-color: #343434;
color: #fff;
}
.center {
padding: 60px;
max-width: 400px;
margin-left: 200px;
}
.srch-form {
position: relative;
width: 44px;
}
.srch-wrapper {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 40px;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.srch-wrapper.open {
width: 200px;
}
.srch-input {
position: relative;
background-color: transparent;
height: 44px;
line-height: 26px;
padding: 5px 10px 5px 32px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 100px;
margin: 0;
width: 100%;
}
.srch-input:focus {
outline: none;
border-color: #aaa;
}
.srch-button {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: #ddd;
width: 44px;
height: 44px;
text-align: center;
}
.srch-button:focus {
outline: none;
}
.srch-input:focus + .srch-button,
.srch-button:hover {
color: #aaa;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div class="center">
<form action="" class="srch-form">
<div class="srch-wrapper open">
<input type="text" class="srch-input" placeholder="Search..." />
<button class="srch-button" type="submit">
<em class="icon-search"></em>
</button>
</div>
</form>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Append does not work for appending text to an element - javascript

Related

Open a multiple modal automatically

On click form label moves up but when a user clicks out of the input field the label doesn't go back to normal

How do I get a prompt box to send data to a chat box?

Expanding Search Off Click Close JQuery

Collapsible search button without using collapsible header

Categories

Resources