baedda / floating-form-labels Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin that makes inline form labels usable again.
jQuery plugin that makes inline form labels usable again.
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;
},
As @pimhooghiemstra mentioned in #20 there is currently no support for autofocus yet.
I moved this into a different ticket to separate the topics.
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.
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.
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)
As this package is not published anymore it is not possible to build the dist files without manually bypassing the linting.
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
The readme says this supports floating labels on input and textarea - does it also support select (dropdown)?
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.
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.
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
Hello, I cannot use SASS in my ASP.NET MVC site. Can you upload a CSS version of the styles?
Thanks
Jaime
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.