baedda/floating-form-labels

jQuery plugin that makes inline form labels usable again.

floating-form-labels's Issues

Empty Placeholder-Attribute triggers floating of form-label

If there is an empty HTML-Attribute placeholder="" then floating-form-labels triggers and the label gets placed above the field.

The fix is fairly easy: The _hasPlaceholder method should also check for empty placeholders like so:

_hasPlaceholder: function () {
     if (typeof this.input.attr('placeholder') !== 'undefined' && this.input.attr('placeholder') !== '') {
            return true;
      }
      return false;
},

Add autofocus support

As @pimhooghiemstra mentioned in #20 there is currently no support for autofocus yet.
I moved this into a different ticket to separate the topics.

Create animated gif preview of demo usage

We would like to have a animated gif of the demo (http://codepen.io/jChris85/pen/jrZypv). Implement the gif in the readme.md file underneath the first paragraph.

Floating Label sits in input on autofilled password fields (Chrome)

On page load, floating form labels fails to detect auto filled in password fields in chrome. The label only floats above the field when you do any sort of input to the page (eg. pressing a key or clicking anywhere in the body)

Demo not working

The demo is not working as it for me. I get the following error:

To solve the issue, change the Javascript dependency URL from https://raw.githubusercontent.com/... to https://rawgit.com/....
See rgrove/rawgit for details.

Not triggering when more than one form is on a page

In a CMS-constructed page, there are two forms. Only the first form's fields have working floating labels. None of the fields have duplicate IDs. When I comment out the code that generates the first form, leaving the second untouched, its labels begin to work.

Here's the code:

<form  method="post" data-id="845559-form-8oWe9jZpP_0dc8_fdd809d4329c1eff56f72fcd7bfe9c81b00683e85de557dc0de83" >  
  
  <div class="form-rows">
    
    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-name" class="ffl-label required">Name</label>
        <input  class=" " name="name" type="text" id="form-input-name" required />
      </div>
      <div class="form-column  ffl-wrapper">
        <label for="form-input-contact-email" class="ffl-label required">Email</label>
        <input  class name="contact-email" type="email" id="form-input-contact-email" required />
      </div>
    </div>
    
    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-companyName" class="ffl-label">Company / Organization</label>
        <input  class=" " name="companyName" type="text" id="form-input-companyName"/>
      </div>
    </div>
    
    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-message" class="ffl-label required">Message</label>
        <textarea  class name="message" id="form-input-message" rows="5" required ></textarea>
      </div>
    </div>
    
    <div class="form-row ">
      <div class="form-column  has-button align-left ffl-wrapper">
        <button class="button hollow" data-submit-button="1" type="submit" name="form_page_submit">Send Your Message<svg class="icon--arrow-right icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon--arrow-right"></use></svg></button>
      </div>
    </div>
    
  </div>
  
</form>


<form  method="post" data-id="977faa-form-5KM0OK02p_0dc8_3ba58d3b88de3a87a5ef3bf65d18211243a4ef955de557dc139f9" >
  <div class="form-rows">
    
    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-email" class="ffl-label required">Email</label>
        <input  class name="email" type="email" id="form-input-email" required />
      </div>
      <div class="form-column  has-button align-right ffl-wrapper">
        <button class="button" data-submit-button="1" type="submit" name="form_page_submit">Subscribe<svg class="icon--arrow-right icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon--arrow-right"></use></svg></button>
      </div>
    </div>
    
  </div>
</form>

There is a console error, but it doesn't change when I remove the first form:

floatingFormLabels.min.js:formatted:1 jQuery.Deferred exception: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined
    at o._isFloated (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:922)
    at o._init (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:498)
    at new o (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:426)
    at HTMLDivElement.<anonymous> (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:1407)
    at Function.each (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:5203:19)
    at jQuery.fn.init.each (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:5038:17)
    at jQuery.fn.init.e.fn.<computed> [as floatingFormLabels] (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:1309)
    at HTMLDocument.<anonymous> (http://localhost:3000/assets/js/main.js?id=093271e6e5c564f9fa41:592:21)
    at mightThrow (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:8393:29)
    at process (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:8461:12) undefined
jQuery.Deferred.exceptionHook @ floatingFormLabels.min.js:formatted:1
process @ floatingFormLabels.min.js:formatted:1
setTimeout (async)
(anonymous) @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fireWith @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fireWith @ floatingFormLabels.min.js:formatted:1
ready @ floatingFormLabels.min.js:formatted:1
completed @ floatingFormLabels.min.js:formatted:1
floatingFormLabels.min.js:formatted:1 Uncaught TypeError: Cannot read property 'length' of undefined
    at o._isFloated (floatingFormLabels.min.js:formatted:1)
    at o._init (floatingFormLabels.min.js:formatted:1)
    at new o (floatingFormLabels.min.js:formatted:1)
    at HTMLDivElement.<anonymous> (floatingFormLabels.min.js:formatted:1)
    at Function.each (floatingFormLabels.min.js:formatted:1)
    at jQuery.fn.init.each (floatingFormLabels.min.js:formatted:1)
    at jQuery.fn.init.e.fn.<computed> [as floatingFormLabels] (floatingFormLabels.min.js:formatted:1)
    at HTMLDocument.<anonymous> (main.js:576)
    at mightThrow (floatingFormLabels.min.js:formatted:1)
    at process (floatingFormLabels.min.js:formatted:1)

Replace @minds/eslint-config-minds-base dependency

As this package is not published anymore it is not possible to build the dist files without manually bypassing the linting.

Label is floated on select-mutliple with jQuery > 3.0

As of jQuery 3.0, if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null.
http://api.jquery.com/val/#entry-longdesc

This causes that labels are always floated on select-mutliples. Even when nothing is selected

Does this support selects?

The readme says this supports floating labels on input and textarea - does it also support select (dropdown)?

Check for spelling and grammar in readme.md

We would like to check for spelling and grammar in the readme.md by a native english speaking person. Please fix any mistakes or enhancements.

Proposal: If "floatedClass" is already present, do nothing

Currently, if you manually set the floatedClass on a Wrapper-Element, floating-form-labels gets initialized and resets the floatedClass.

In my opinion this should behave like so:
If the plugin sees that there is already a floatedClass, it should only set the events but don't float the label.

This comes in handy if you manually want to initially float a label to workaround #12 for example.

In the project I'm currently working on, we achieve this behavior by making the following

 $('.ffl-wrapper:not(".ffl-floated")').floatingFormLabels();

But I think this should be handled by the plugin itself.

@Baedda @jChris85 What do you think?

Is there anyone who can use this plugin ?

cant get it to work, spend many hours, im dev for more than a decade.
How the hell would i import directly scss ? why no one scss converter can convert to this scss to css ?
Why ????????
Why the hell did you include scss, and not css ? It is crazy

Can you plase upload a CSS version?

Hello, I cannot use SASS in my ASP.NET MVC site. Can you upload a CSS version of the styles?

Thanks
Jaime