CODEWITHSUNDEEP
javascripthtmlcss
Tautvydas Būda
Tautvydas Būda

Reputation: 214

on text input focus explaining label appears

Basically what i need to do is on text input focus explaining bar (what this input does) needs to appear (animation) from text input bottom. I have very hard time figuring it out, is any way to do it in css or javascript, i would love to hear your guys explanations, ill upload my mess code. I seen some solutions, but my form has a lot of labels and a lot of going on, so its super confusing, im pretty new at this also. here is my code:

<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
  <label for="nickas">User name:</label>
  <label class="label-helper" for="nickas">this is bar that appears</label>
  </div>

Upvotes: 0

Views: 431

Answers (3)

Mobius
Mobius

Reputation: 2896

Here is a CSS only example. It makes use of the :focus property along with the + or sibling operator to provide the active state. 

.form-row{
  position:relative;
}

label, input{
  padding: 5px;
  border-radius:3px;
  box-sizing: border-box;
}

.label-helper{
    display:block;
  width: 100%;
  background-color:black;
  color: white;
  position:absolute;
  bottom:0;
  opacity: 0;
  z-index:1;
  transition: all .5s ease;
}

input:focus + .label-helper{
 bottom: -100%; 
 opacity:1;
}
<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
    <label class="label-helper" for="nickas">this is bar that appears</label>
  <label for="nickas">User name:</label>
  </div>

<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
    <label class="label-helper" for="nickas">this is bar that appears</label>
  <label for="nickas">User name:</label>
  </div>

<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
    <label class="label-helper" for="nickas">this is bar that appears</label>
  <label for="nickas">User name:</label>
  </div>

<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
    <label class="label-helper" for="nickas">this is bar that appears</label>
  <label for="nickas">User name:</label>
  </div>

Upvotes: 0

Sieen
Sieen

Reputation: 68

I made this for you, I hope it's what you needed: JsFiddle 

.form-row {
  height:45px;
  position:relative;
  z-index:100;
} 
.form-row label:first-of-type {
  height:30px;
  line-height:30px;
  display:block;
}
.input-text,
.label-helper {
  height:45px;
  padding:0 30px;
  line-height:45px;
}
.label-helper {
  opacity:0;
  position:absolute;
  top:30px;
  left:0;
  z-index:101;
  transition:0.5s;
  pointer-events:none;
}

And this is the script:

$(document).ready(function(e) {
  $('.input-text').focus(function(){
    $('.label-helper').css({
        "opacity":"1.0",
        "top" : "75px"
    });
  });
});

Upvotes: 0

BenM
BenM

Reputation: 53228

Set an additional class which has an opacity of 0 for the .label-helper, and then simply toggle the class using jQuery's focus and blur events:

$('input').on('focus', function() {  
    $(this).siblings('.label-helper').addClass('in');
}).on('blur', function() {  
    $(this).siblings('.label-helper').removeClass('in');
});
.label-helper {
  opacity: 0;
  -webkit-transition: opacity .2s ease;
     -moz-transition: opacity .2s ease;
          transition: opacity .2s ease;
}

.label-helper.in {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
  <label for="nickas">User name:</label>
  <label class="label-helper" for="nickas">this is bar that appears</label>
 </div>

Upvotes: 1

Related Questions