This question already has answers here:
Add and remove a class on click using jQuery?
(8 answers)
Closed 4 years ago.
I am trying to add the toggleClass but it's not working. i also tried to add or remove the class using the hasClass. there is also same problem.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
You .box is sitting on top of your button, so the function is never getting called. Even the though your box opacity is 0, it's still 'there', and it's what you're clicking (note the cursor is not a pointer when hovering over the button).
You'll either want to find a different position for your .box, or place it's z-index lower than 0. I've made the latter change in the snippet below.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
z-index: -1;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
To achieve expected reult, use below option of z-index , as input and button are overlapped
.srch-btn{
position:relative;
z-index:9999
}
https://codepen.io/nagasai/pen/EQqYJL
remove position: absolute from .box class.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
It was because your button was underneath the text input field. Giving the button a value of 'relative' to the 'position' property and the setting its 'z-index' slightly higher than the text field will make the button clickable. Adding a transition would make the animation go fluid.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
var widthbtn=$(".srch-inpt").width();
$("button").css({"margin-left":widthbtn+"px","transition":"all 0.1s ease"});
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
cursor: pointer;
}
.srch-inpt.expanded {
width: initial;
opacity: 1;
}
button {
cursor: pointer;
position: relative;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
Related
I have the following code:
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xr123gjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
I would like a text animation on the input fields. For example, I would like my expected output to be like this:
https://watch.screencastify.com/v/3mlMie2rx0UzhdymHYCR
As you can see, I would like the text such as "First Name" to be inside the input field, and when the user clicks the input field, the text should animate and be at the top. How can I achieve this task? Any suggestions?
There are a lot of variants how to do that, one of them is to use extra-div for input & label, and role of floating text will be played by label:
.wrapper {
padding: 20px;
}
.input-data {
height: 40px;
width: 100%;
position: relative;
}
.input-data input {
height: 100%;
width: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid silver;
transition: border-color .4s;
outline: none;
}
.input-data input:focus~label,
.input-data input:valid~label {
transform: translateY(-20px);
font-size: 13px;
color: #4158d0;
}
.input-data label {
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
.input-data input:focus,
.input-data input:valid {
border-color: #4158d0;
}
<div class="wrapper">
<div class="input-data">
<input type="text" required>
<label>Name</label>
</div>
</div>
I tried to create a Beta for you, using the video you linked as a reference
using HTML and CSS only...
the trick here is creating an Extra Div as a Parent, so we can put the label and input inside.
now set the parent to have a position: relative; so the label will be absolute
now successfully we can use TOP, LEFT, RIGHT, BOTTOM and that's it (position the label as the place-holder)
the logic
I put the logic here .input-container input:focus~label
make sure that the label is after the input in HTML, and inside the parent
delete the border on focus
remember that the input if focused it will have like a border automatically...
to delete this border use outline: none; because that border CAN'T be deleted with border: none;
that's it, test the code I write for you! and I hope this will helps
here the code
* {
--input-height: 3rem;
--light-black: rgba(0, 0, 0, 0.3);
--medium-black: rgba(0, 0, 0, 0.6);
}
section {
height: 100vh;
width: 100vw;
display: grid;
place-content: center;
}
.input-container input {
height: var(--input-height);
width: 80vw;
font-size: 2rem;
border: none;
border-bottom: 2px solid var(--light-black);
}
.input-container {
position: relative;
display: grid;
place-items: center start;
}
.input-container label {
position: absolute;
left: 1rem;
font-size: 1.5rem;
color: var(--medium-black);
transition-duration: 0.5s;
}
.input-container input:focus~label {
position: absolute;
font-size: 1rem;
top: -1rem;
left: 0;
transition-duration: 0.2s;
z-index: 2;
}
.input-container input:focus {
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form action="">
<div class="input-container">
<input type="text" name="" id="my-input">
<label for="my-input">name</label>
</div>
</form>
</section>
</body>
</html>
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");
});
I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.
Lets say if I am filling First Name:
Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.
Below is the related code to it:
Form-rise-click here for fiddle
HTML:
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool"/>
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool"/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool"/>
</div>
</div>
CSS:
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
jQuery:
$('input').on('focusin', function() {
$(this).parent().find('label').addClass('active');
});
$('input').on('focusout', function() {
if (!this.value) {
$(this).parent().find('label').removeClass('active');
}
});
I have just used keyup() of jquery. It is basically an event handler to the keyup of javascript event.
$('input').keyup(function(){
$(this).parent().find('label').text($(this).val())
});
Please check in the JSFiddle for any doubts.
Here is a small suggestion for a better UX.
When the input value is empty you can give a small if condition to show its former placeholder. And we can mange that placeholder with the help of an attribute. for e.g here i'm using name to retrieve the placeholder.
Please check in the JSFiddle for any doubts.
Hope this is helpful. Thank you.
Yes, it is possible. Use the following jQuery code as an example for the rest of your inputs.
$("#fname").keyup(function() {
$("label[for='fname']").html($(this).val());
});
Description: You select the ID input (e.g. #fname) for which you want to change the value of the label that moves to top (e.g. label fname) to the value that you are currently typing.
Check the updated JSFiddle here: https://jsfiddle.net/NikolaosG/tyowcgut/3/
Yes, the keyup event is the best way to handle this. But additionally, you use multiple event handlers for each input -- here's an alternate way to handle that scenario. Not that one is better or preferred, simply an option.
$('input').on({
focusin: function() {
$(this).parent().find('label').addClass('active');
},
focusout: function() {
if (!this.value) {
$(this).parent().find('label')
.removeClass('active');
}
},
keyup: function() {
var newText = $(this).val();
$(this).parent().find('label').text(newText);
}
});
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool" />
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool" />
</div>
</div>
I'm using JQuery and JQuery UI to build a small web application that is based around an accordion. I have the accordion logic figured out, but I'm having some trouble getting the result I want. I want all of the tabs to collapse when one is clicked, but I'm not sure how to do that.
Google didn't help me at all, before the serial downvoters nab me. Couldn't find anything on here, either.
Here is my HTML:
<button class="accordion">About</button>
<div class="panel">
<p>Blah 1</p>
</div>
<button class="accordion">Contact</button>
<div class="panel">
<form>
<label>Full Name</label>
<input type="text" />
<label>E-mail Address</label>
<input type="email" />
</form>
</div>
My CSS:
button.accordion {
background-color: #336699;
background: linear-gradient(-90deg, #fff, #336699, #fff);
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion:not(:last-child) {
margin-bottom: 10px;
}
button.accordion .active,
button.accordion:hover {
background-color: #555;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6 ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
div.column {
float: left;
width: 300px;
}
And finally, my JQuery:
$(function() {
$('.accordion').on('click', function() {
// Something here, maybe?
$(this).toggleClass('active', 400);
$(this).next().toggleClass('show', 400);
});
});
When I try to put something inside the callback to close all of them, it ends up getting executed immediately and the tabs don't open at all. Can someone please give me an explanation of what exactly is going on?
To achieve your expected result, use below
$(function() {
$('.accordion').on('click', function() {
var x = $('.accordion').hasClass('active');
if (x) {
$('.active').removeClass('active');
$('div').removeClass('show');
$(this).toggleClass('active', 400);
$(this).next().toggleClass('show', 400);
} else {
console.log("x");
$(this).toggleClass('active', 400);
$(this).next().toggleClass('show', 400);
}
});
});
http://codepen.io/nagasai/pen/grvNGZ
$(function() {
$('.accordion').on('click', function() {
var panel = $(this).next()[0];
$('.accordion').not($(this)).removeClass('active');
$('.panel').not(panel).removeClass('show');
$(this).toggleClass('active');
$(panel).toggleClass("show");
});
});
button.accordion {
background-color: #336699;
background: linear-gradient(-90deg, #fff, #336699, #fff);
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion:not(:last-child) {
margin-bottom: 10px;
}
button.accordion.active,
button.accordion:hover {
background: #555;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6 ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
div.column {
float: left;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">About</button>
<div class="panel">
<p>Blah 1</p>
</div>
<button class="accordion">Contact</button>
<div class="panel">
<form>
<label>Full Name</label>
<input type="text" />
<label>E-mail Address</label>
<input type="email" />
</form>
</div>
You can try this.
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>