CODEWITHSUNDEEP
javascriptjquery
ubuntujavy
ubuntujavy

Reputation: 55

Label not floating on page load when elements have a value

I have a float label script. The script works fine except when a value is being pulled from php, the value and label overlapped and lying on top of each other when the page is loaded. This is my html:

<div class="top-row">
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required>
      <label for="property_address">Street Address</label>
    </div>
  </div>
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_city" value="<?php echo $city?>" required>
      <label for="property_city">City</label>
    </div>
  </div>
</div>

Below is a script that I got online. When the page is loaded, the label and value overlapped each other, but when I click on the input the label floats. This is not a good presentation for the user. I want to make the label automatically floats when there is a value. How do I change the code to make this works?

(function($){
    function floatLabel(inputType){
        $(inputType).each(function(){
            var $this = $(this);
            // on focus add cladd active to label
            $this.focus(function(){
                $this.next().addClass("active");
            });
            //on blur check field and remove class if needed
            $this.blur(function(){
                if($this.val() === '' || $this.val() === 'blank'){
                    $this.next().removeClass();
                }
            });
        });
    }
    // just add a class of "floatLabel to the input field!"
    floatLabel(".floatLabel");
})(jQuery);

Here is my css:

.controls label.active {
    top: -15px;
    color: #555;
    background-color: white;
}

.controls label {
    position: absolute;
    left: 10px;
    top: 7px;
    color: #999;
    font-size: 18px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    -moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
    -o-transition: color 0.3s, top 0.3s, background-color 0.8s;
    -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
    transition: color 0.3s, top 0.3s, background-color 0.8s;
}

Upvotes: 0

Views: 391

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

You need to check for floating upon page load since there may be data being placed in the fields from the server.

(function($){
   var $fields = $(".floatLabel");

   // when data is entered...
   $fields.on("input", floatLabel);

   // Check the text fields as soon as the document loads for data that 
   // may have been added upon load
   floatLabel();
   
   function floatLabel(){
     $fields.each(function(i, f){
       var $field = $(f);
       if($field.val().trim() === "" || $field.val() === "blank"){
         $field.next().removeClass("active");
       } else {
         $field.next().addClass("active");
       }
     });
   }
    
})(jQuery);
.controls label.active {
    position:relative;
    top: -50px;
    left:-175px;
    color: #555;
    background-color: white;
}

.controls label {
    position: relative;
    top:0px;
    left:-175px;
    color: #999;
    font-size: 18px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    transition: color 0.3s, top 0.3s, background-color 0.8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-row">
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required>
      <label for="property_address">Street Address</label>
    </div>
  </div>
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_city" value="<?php echo $city?>" required>
      <label for="property_city">City</label>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions