Develop Reference

Closing an element when clicked outside the div or its opening button with Vanilla JS

I have two buttons, one of them opens a form, and the other one a dropdown.
I want both elements to close when clicking outside, the dropdown is ok because I want it to close whenever the user clicks outside the opening button.
But the second doesn't work, I want it to close when this logical formula is true:
(the opening button 'fulfillSetButton' isn't clicked) OR (the
form 'dateForm' isn't clicked)
Therefore I've made an event listener for the whole HTML with the formula inside an if statement:
html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});
But it doesn't work any ideas about what is wrong?
// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("html"),
dateForm = document.querySelector(".completion-date");
// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
html.addEventListener("click", function(e){
if(e.target !== dropdownButton){
dropdownMenu.classList.remove("show");
}
});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *not working*
html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});
:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
display: block;
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
#media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form class="completion-date">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>

Try this:
window.addEventListener('click', function(e){
if( div.contains(e.target)){
//click inside of element
} else{
//click outside of element
}
});
I fixed some CSS and HTML to.
// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("body"),
dateForm = document.querySelector("#completion-date-id");
// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
//new way works every spot on page
window.addEventListener('click', function(e){
if( dropdownButton.contains(e.target)){
} else{
dropdownMenu.classList.remove("show");
}
});
//Old way
//html.addEventListener("click", function(e){
// if(e.target !== dropdownButton){
// dropdownMenu.classList.remove("show");
// }
//});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *working now*
window.addEventListener('click', function(e){
if( dateForm.contains(e.target) || fulfillSetButton.contains(e.target)){
} else{
dateForm.classList.remove("active");
}
});
// Closing the date form by clicking outside *not working*
//html.addEventListener("click", function(e){
// if(e.target !== (dateForm || fulfillSetButton)){
// dateForm.classList.remove("active");
// }
//});
:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
#media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}
.active{
display: block;
}
<body>
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form id="completion-date-id" class="completion-date active">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>
</body>

What's the problem with this angular ts code for implementing floating label input onfocus?

I am trying to float the labels onfocusing input in angular.
I did wrote code to perform the action of a class to be applied on focusing the input, & then focus out to check empty value or values present, to remove the applied class.
forms.component.html
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_fn" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_fn" id="forms_input" class="forms-field-inp-lbl">
FirstName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_ln" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_ln" id="forms_input" class="forms-field-inp-lbl">
LastName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_p" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_p" id="forms_input" class="forms-field-inp-lbl">
Password
</label>
</div>
</div>
<div class="forms-login-btn">
Login
</div>
forms.component.scss
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.forms-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
background-color: #ffffff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
min-height: 120px;
padding: 20px;
border-radius: 5px;
}
.forms-field-box {
background-color: #ffffff;
margin-bottom: 15px;
}
.forms-field-inp-box {
width: 97%;
position: relative;
}
.forms-field-inp {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid #e4e4e4;
outline: none;
padding: 6px;
}
.forms-field-inp:hover {
border: 1px solid #cccccc;
}
.forms-field-inp:focus {
border: 1px solid #0089ff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.forms-field-inp-lbl {
position: absolute;
top: 8px;
left: 10px;
font-size: 14px;
font-weight: 600;
background-color: #ffffff;
padding: 2px 6px;
user-select:none;
color: #cccccc;
}
.forms-field-inp-lbl-anim ~ .forms-field-inp-lbl {
top: -9px;
}
.forms-login-btn {
width: 20%;
height: 35px;
text-align: center;
font-size: 18px;
padding: 5px;
background-color: blue;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
forms.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
inpAnim(){
let forms_input_ele:any = document.querySelector(".forms-field-inp-box input");
forms_input_ele.addEventListener("focusin", () => {
console.log("focussed in");
forms_input_ele.classList.add("forms-field-inp-lbl-anim");
} );
forms_input_ele.addEventListener("focusout", () => {
let forms_inp_val = forms_input_ele.value;
if(forms_inp_val == ""){
forms_input_ele.classList.remove("forms-field-inp-lbl-anim");
console.log("focussed out");
console.log(forms_inp_val);
}
});
}
}
Please Help me to solve this.
input focused & label floated
input has value & label stays
Problem: But, the first input only works, other inputs not working if focused & nothing happens.,
Next input is focused, but label not floating
This can be easily applied by css, but need to make this small code to work correctly

How to make only 1 input box do animation on focus using Jquery

Fiddle And Code:
$(document).ready(function(){
$("input").focus(function(){
$(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function(){
if(!$('input').val()) {
$(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.
Expected Result:
On click, the fake placeholder will go up (only the clicked one)
The fake placeholder will stay up, if the input box has some value.

Use $(this).next(".fakeplaceholder").
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$('input').val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
It will target the next element with the class fakeplaceholder right after the input you focus
$(document).ready(function() {
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$(this).val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color: #ffffff;
padding: 15px 120px 50px 50px;
}
:focus {
outline: none;
}
.input1div {
display: inline-block;
position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.input1div input {
border: 0;
padding: 7px 0;
border-bottom: 1px solid #ccc;
}
.input1div input~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.input1div input:focus~.focus-border {
width: 100%;
transition: 0.4s;
}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color: #8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>

$(document).ready(function(){
$("input").focus(function(){
$(this).next().addClass("fakeplaceholdertop");
});
$("input").change(function(){
if($(this).val()==""){
$(this).next().removeClass("fakeplaceholdertop");
}else{
$(this).next().addClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>

You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this
$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");
$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");

You just have to add separate ID's to access the different fields.
<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>
Then apply the fakeplaceholdertop class to the specific element.
$(".firstname").focus(function() {
$("#first").addClass("fakeplaceholdertop");
});
$(".lastname").focus(function() {
$("#last").addClass("fakeplaceholdertop");
});

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>

Preload form with json data

I am still learning javascript, jquery and all that comes with it. As a personal test for learning I am developing a program that eventually will pull from a php server. Right now I am pulling from a hard coded json file and preloading a page with that. The user will then be able to click the edit button that is populated and it will provide a popup with a preloaded form with that sections data (this is currently the part i need assistance with). Using jquery 1.9.1 with migrate and mustache.js and jqmodal to handle the form popup Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link href='css.css' rel='stylesheet' type='text/css'>
<script id="playerTpl" type="text/template">
{{#playerList}}
<li id="player{{player}}">
<h3>player: {{player}}</h3>
<p><strong>Name:</strong> {{name}}</p>
<p><strong>Score:</strong> {{score}}</p>
<p><strong>Rank: </strong>{{rank}}</p>
Edit
Delete
</li>
{{/playerList}}
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqModal/r14/jqModal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<body>
<div id="mainContent">
<h1>Prototype Example:</h1>
<ul id="playersUL">
</ul>
Add Player
<div class="clear"></div>
<div class="addplayerStyle" id="addPlayer">
<form id="myForm">
<label>Player Number</label>
<select id="optionList" name="player" required>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select><br><br>
<label>Player Name</label>
<input type="text" name="name" placeholder="Player Name" required /><br><br>
<label>Player Score</label>
<input type="number" name="score" placeholder="Player Score" required /><br><br>
<label>Player Rank</label>
<input type="number" name="rank" placeholder="Player Rank" required /><br><br>
<input type="reset" value="Cancel" class="jqmClose" /><input type="submit" value="Submit" />
<div class="clear"></div>
</form>
</div>
<script src="script.js"></script>
</div>
</body>
Json file:
{
"playerList" : [
{
"player":1,
"name":"Barot Bellingham",
"score":10000,
"rank":5
},
{
"player":2,
"name":"Jonathan G. Ferrar II",
"score":50,
"rank":1
},
{
"player":3,
"name":"Hillary Hewitt Goldwynn-Post",
"score":100000,
"rank":100
}
]}
And lastly the javascript so far:
$(document).ready(function() {
$.getJSON('data.json', function(data){
var template = $('#playerTpl').html();
var html = Mustache.to_html(template, data);
$('#playersUL').html(html);
/*for (var i = 0, i <= data.playerList.length, i++) {
for (key in data.playerList[i].player){
alert(data.playerList[i].player;
}
};*/
$('#playersUL').on("click", 'a[name=modal]', function(e) {
e.preventDefault();
console.log('1');
/*$.each(data.playerList, function(key, val) {
console.log(val.player);
playerArray.push(val);*/
});//populatePlayerNum();
$('#addPlayer').jqmShow({
});
});
}); //getJSON
$('#addPlayer').jqm({
trigger: '#addBTN'
});
});
and lastly so you can get the popup working correctly and formatting the way i have it the css:
.clear {
clear: both;
}
h1 {
margin: 0;
padding: 0;
}
#mainContent {
width: 50%;
margin: 0 auto;
padding: 30px;
background: #0CF;
box-shadow: #666 0 5px 10px;
}
#mainContent h1 {
margin-bottom: 20px;
}
ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
width: auto;
margin-right: 25px;
padding: 15px;
border: 1px solid #666;
background: #ccc;
box-shadow: #666 2px 5px 5px;
}
a {
float: left;
margin: 5px;
padding: 5px 10px 5px 10px;
text-align: center;
color: #fff;
text-decoration: none;
background: #666;
border: 1px solid #000;
}
#addBTN {
}
a:hover {
background: #009;
}
form {
margin-top: 15px;
}
#addPlayer {
}
label {
width: 100px;
}
input[type='reset'], input[type='submit'] {
display: block;
float: left;
margin-right: 5px;
padding: 5px 10px 5px 10px;
text-align: center;
color: #fff;
text-decoration: none;
background: #666;
border: 1px solid #000;
cursor: pointer;
}
input[type='reset']:hover, input[type='submit']:hover {
background: #009;
}
.addplayerStyle {
display: none;
position: absolute;
top: 50px;
left: 600px;
z-index: 2;
width: 300px;
padding: 20px;
background: #ccc;
border: 1px solid #000;
}
.jqmOverlay {
background-color: #000;
}
I hope it is clear on what I am looking for right now. I am not looking to post to a database yet or anything just to add the data to the form. I appreciate your help and thanks ahead of time.