nathansmith / formalize Goto Github PK
View Code? Open in Web Editor NEWTeach your forms some manners!
Home Page: http://formalize.me
Teach your forms some manners!
Home Page: http://formalize.me
CREDITS ExtJS port by Mike Wille: - https://github.com/digerata MooTools port by Ryan Florence: - https://github.com/rpflorence ===== Helpful bug reports filed by: - https://github.com/wadewinningham - https://github.com/tingletech - https://stuartcharlton.com - https://github.com/garrettdimon - https://github.com/kdonald ===== Licensed under MIT/GPL. GPL license: http://www.gnu.org/licenses/gpl.html MIT license: http://www.opensource.org/licenses/mit-license.php
In sass + compass version of formalize I get this error when importing:
wrong number of arguments (3 for 1) for `image-url'
I solved quickly and dirtly by replacing
image-url("button.png", false, false)
with
image-url("button.png")
and doing similarily for all other three arguments occourences.
Upon submission, the placeholder method clears out any inputs that still have the original placeholder text.
The problem is something else might prevent form submission (such as form validation), in which case all of the placeholder text is gone.
The only thing I can think of that might solve this is to add a timeout to the submit event. The timeout would restore all placeholder text, if necessary. I'm not sure if this is the best way though, since it creates a race condition. If the timeout somehow fires before the form submission is initiated, then the placeholder text would be in the POST data. Ideas?
Disabled buttons still move (eg the gradient changes) when hovered or clicked exactly like they would when not disabled. This will probably confuse lots of users. If the button looks like it responds to the click they might think it actually did something.
The behaviour has been tested on Chrome "23.0.1271.95 m" to happen with both 'button' and 'input type="submit"' elements. On IE9 the the situation is more complicated:
IE9 does not display the hover animation at all (which is probably becouse of the lack of :hover functionality in IE, but in the case of disabled buttons actually makes things much more intuitive). But the 'button' does display the click animation but the 'input' (most of the time) does not.
This behaviour can be observed here: http://jsfiddle.net/s4JBf/3/
The code <select … size="1" multiple="multiple">…</select>
(same happens with size=0) results in this behaviour. Adding select[size='0'][multiple]
and select[size='1'][multiple]
in this declaration block would solve the issue.
I noticed that the little icon arrow wasn't showing in webkit and had to alter my formalize.css adding the !Important declarations to bring in the arrow image, then I added the background gradient tags including the image bit at the end after a comma to be sure the gradient and the image load/show together.
This worked for me, perhaps I fucked around with formalize.css too much lol I dunno... Cheers for the awesome code, im loving the flexibility using this in my Drupal themes.
@media (-webkit-min-device-pixel-ratio: 0) {
select[size],
select[multiple],
select[multiple][size] {
background-image: none;
padding-right: 3px;
}
select,
select[size="0"],
select[size="1"] {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,114,47,0.66)), color-stop(66%,rgba(206,190,140,0.68)), color-stop(100%,rgba(237,221,181,0.69))),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Opera 11.10+ */
background-repeat: no-repeat !Important;
background-position: right center !Important;
padding-right: 20px !Important;
}
On IE 10, the select boxes are not styled correctly and the default browser arrow displays instead of the custom arrow included in formalize.
Hey it would be super awesome if you could add .button as a selector to all those button styles (i.e. here: https://github.com/nathansmith/formalize/blob/master/assets/css/formalize.css#L66)
We often use <a class="button">
to create links that look just like buttons. We are using formalize as a submodule in our project and therefore we don't want to make any changes to it (we have formalize.css symlinked), so currently we have to copy all those button styles ONLY to add that tiny little bit.
Is there a good reason to not add that selector?
The password placeholder is masked in IE 9 and below (because it's using the value attribute), therefore useless.
A possible solution is to change the type of input to "text" until it's focused, but haven't tested it and maybe gives some other issues.
Here's an example of a plugin that uses some kind of placeholder input, and it's quite good, but can't be used together with formalize:
https://github.com/danielstocks/jQuery-Placeholder
Hello,
after implementing this script everything works except placeholder text color in Opera 11.50(build 1074).
I was using this gist to enable placeholder functionality across browsers:
https://gist.github.com/823300
If i load only that script placeholders work great everywhere.
If i load only fomalize.js everything works except placeholders in opera.
When i try to load both of these scripts, formalize stops working, but placeholders work ok everywhere.
It sure would be amazing if formalize could implement this script so we also get working placeholders across all modern browsers.
I've been working on getting this working with compass and did the following. Its just a start, but wasn't sure if it would be useful in the future if you want to add compass CSS support:
The reason why check boxes and radio buttons look so terrible in Opera (Mac OS X) right now, is because of this declaration. I tested this by unchecking the margin: 0;
and the result looks good.
The user agent margins for check boxes are 3px 3px 3px 4px
and for radio buttons 3px 3px ? 5px
(bottom value not declared). I tested different values and it turns out that …
input[type="checkbox"] {
margin: 2px 1px;
}
input[type="radio"] {
margin: 1px;
}
… are the lowest possible margin
values to trigger the nice looking check boxes and radio buttons.
Because of the new appearance and the margins you’d also have to adjust the top
value. I tested that, too, and that’d be top: 1px;
. Addressing only Opera 11 via media query is possible. A bit hacky, but it works surprisingly well. The end result code looks like this:
/* Only visible for Opera 11 */
@media not screen and (1) {
input[type="checkbox"],
input[type="radio"] {
top: 1px;
}
input[type='checkbox'] {
margin: 2px 1px;
}
input[type='radio'] {
margin: 1px;
}
}
… and you get consistent looking check boxes and radio buttons in all browsers in Mac OS X. What do you think?
EDIT
Or you remove the hacky Opera 11 media query and adjust the top value for all browsers, of course. :-)
Could we get a version of formalize with minimum button styles?
I spent most of my morning trying to un-style formalized submit buttons so I could re-style them to match my design.
In FF3.5, the color: #000
rule in
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
-webkit-appearance: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border: 1px solid;
border-color: #848484 #c1c1c1 #e1e1e1;
color: #000;
outline: 0;
padding: 2px 3px;
font-size: 13px;
font-family: Arial, sans-serif;
height: 1.8em;
/* IE7 */
*padding-top: 2px;
*padding-bottom: 1px;
*height: auto;
}
is overriding the color specified afterwards for placeholder text in
/*
Separate rule for Firefox.
Cannot stack with WebKit's.
*/
input.placeholder_text,
textarea.placeholder_text,
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #888;
}
The end result is black placeholder text in the forms.
Splitting off the Mozilla proprietary selectors into their own block fixes it.
input.placeholder_text,
textarea.placeholder_text {
color: #888;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #888;
}
If you have a text input that has a placeholder value and is set to autofocus, upon loading the page the input will be focused and the placeholder text highlighted, instead of the placeholder text disappearing.
I can't decide whether this is an issue or not. I think I would prefer the placeholder text to disappear. Thoughts?
I'd love to have a .scss file. Many of us use Sass with .scss, instead of .sass.
Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)
-- This repo has been included in The Github Pirates' Chest.
What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.
You should find out more about this project below:
OR, Download The Chest:
Hi Nathan,
Thanks for this awesome project - totally saving my bacon!
Just some feedback from my first time implementing.
When I looked at the demo's I saw demo.css, reset.css and text.css... this confused me a little when I went to implement formalize.css as I wasn't sure if I needed those files also (in particular the reset.css ... since I'm using normalize.css).... I ended up not needing either, and removing some styles from normalize.css (https://github.com/necolas/normalize.css).
Also my project already has image replacement happening for buttons so I striped out your styles for buttons...
... I figure this feedback may be useful; since you're so close to the project it's hard to see things at times with "fresh eyes" (i.e. usability testing).
One other idea - consider offering some well tested theme's to lay over the top of formalize'd forms/buttons ... would help people go that one step further ... particularly when client wasn't their form to look "special" :: sigh ::
Cheers,
Chris
Longer options in a select in webkit browsers end up overlaying the select_arrow.gif image for the if you don't have them wrapped in an optgroup. An optgroup ends up adding the necessary padding.
Since FireFox and IE cover this image up with their own arrows, adding padding-right ends up sliding the select_arrow.gif image into view and screwing up their display.
Guys, I've problems to do work on IE9 the Jquery version. The validation just doesn't work. Someone had this problem and can help me?
Thanks.
in Opera10/11 placeholder in textarea don't show up
i changed
var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input')
to
var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input') && 'placeholder' in document.createElement('textarea');
and then it shown
(Line 79: Undefined mixin 'background-image'.)
I do not understand why I get this error, if you could enlighten me I would appreciate. greetings!.
In Firefox optgroup
seems to not inherit the font-family
specified for select
. For example Mac OS X uses »Lucida Grande« and Windows 7 uses »MS Shell Dlg« as the final computed value. If you use a serif font on your site this becomes more obvious. optgroup
needs an explicit font-family declaration.
Hi Nathan,
In a recent commit you've changed the placeholder class from .placeholder_text
to .placeholder-text
, yet the js file is still trying to target the older selector. Needs to be updated I think?
Cheers,
Phil
Drupal 7 Form API use the size attribute for every select box. Example:
The following code in line 290 overwrite the backround image and make the arrow disapper. select[size], select[multiple] { background-image: none; padding: 0; }I love formalize and would love to see it implement the https://github.com/necolas/normalize.css
Normalize.css is also being used in HTML5 Boilerplate which means my CSS ends up with two forms of resets and lots of cancelled selector blurbs.
Would love to lend a hand if the Nathan agrees.
the jquery.formalize.min.js version has some sort of error when you use it in the h5bp build script.. loading up the code in jshint shows that there is a missing semicolon
running jquery.formalize.js through closure-compiler-v1346 returns a much different result and works fine.
To get the placeholder_text to show grey in my firefox (Firefox 3.6.11 Max OS), I had to change it to
.placeholder_text {
color: #777 !important;
}
I loaded these github URLs as resources into jsfiddle
http://github.com/nathansmith/formalize/raw/master/assets/stylesheets/formalize.css
http://github.com/nathansmith/formalize/raw/master/assets/javascripts/formalize.js
Here, the input type="text" shows up black and input w/o type attribute is grey #777
http://jsfiddle.net/GeGbL/
Here, it shows up grey #777 with or without the type="text" because I've set a css rule
.placeholder_text { color:#777 !important; }
http://jsfiddle.net/4pvHT/
I'm going to create a folder for this inside of my project and keep a version in my bitbucket
http://bitbucket.org/btingle/cpf2html/src
Can I put a 3-clause BSD license, Copyright © 2010 nathansmith in the formalize sub-directory?
I am very happy I found this, I was planning to write the placeholder-for-firefox my project and now I don't have to, plus that is a totally bitchin option/select box and search button. Thanks.
File upload controls differ drastically among browsers and OS's. I was expecting your library to address that, but I just tried your demo on Chome and IE and the rendered controls don't look at all alike.
Any plans for that?
http://www.appelsiini.net/projects/filestyle
I'm using this jQ plugin right now, but it would be nice if your library included a solution.
Tested on OS X, the color attribute of input elements applies both to an entered value and the placeholder. I added the following to the stylesheet and it seemed to at least fix the two instances of placeholder text in the demo:
:-moz-placeholder { color: #777 !important; }
(edit: use !important and it's good with just the bare pseudo-selector)
First off, thanks for this great little utility.
I was wondering if it's possible to exclude certain types of inputs. For example, I have a special input button that i'd like formalize not to style since it has some custom styling attached already. Is there any way to keep formalize from affecting these inputs? It's a bit clumsy to try to do it by redefining css properties simply for the sake of negating the effects of formalize.
I'd imagine it would be hard to provide an array of excluded classes (or something similar) since formalize is automatically run on dom ready. Thoughts?
I apologize, as this isn't really an issue with Formalize but more of a request? Is it possible to add in a fix for the famous drop-down text cutoff IE7 & 8 deal with? I love Formalize and adding this in would make it even more awesome.
Thanks for listening :) Keep doing what you do!
This looks really cool. What is the license?
I'm dynamically adding inputs to a form and manually calling FORMALIZE.misc.add_placeholder();
afterwards to apply the placeholder text functionality.
The problem is, add_placeholder()
does not apply the event that clears the inputs' placeholder text upon form submission.
Calling the placeholder()
method won't work either because it will rebind events to inputs that already have them.
At the newest Firefox the select fields have still the common dropdown arrow. It's not styled as it is in Chrome.
I had 2 sites using formalize but realised recently that a.button only worked on one of them. The javascript was minified and didn't have any version information. The css was not minified, but also did not have any version information, so I could not tell which project had the most recent version of formalize. In the github repository there aren't any tagged release numbers either.
I noticed there's a missing semicolon at the very end of assets/js/jquery.formalize.min.js. If the file is linked to a web page independently, then this doesn't appear to cause a problem. However, as I was concatenating the contents of this file with other libraries/plugins into a single javascript file, an error was triggered if the formalize code block was followed by another self-invoking function.
Not too worried about IE7 to be honest, but loads of people still use IE8 and I suspect that it may be the same problem in both. Also, in addition to not working, the buttons come up semi-styled; as in the button shows up, but without text, giving it a tiny width and making it hard to click.
(Everything else seems to be fine in all versions of IE - IE6 styling isn't perfect but it's "good enough", which is all we really care about in old IE versions)
I am testing in IE Tester.
being sass and all
I have a form that has several "required" fields (the HTML5 attribute 'required' present). When focusing on one of these fields to enter a value, the field is not highlighted like you would expect. This appears to be because the following "input:invalid" styles are resetting the input:focus box shadow:
input:invalid,
button:invalid,
select:invalid,
textarea:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
Removing the above styles gives me a focus highlight behavior I expect. I'm not sure if the current behavior is intentional... I found it a little odd so I thought I would report it.
I've got client-side validation wired in to a form. Upon error, it prevents form submission. Any fields with a placeholder that are not changed are automatically emptied by formalize on form submission, but retain the placeholder_text class. (Meaning, as I'm fixing my form errors, if I type something in one of those fields that had placeholder text, what I type is gray in color.)
In short, the placeholder_text class needs to be removed from fields upon form submission, just in case the submission is prevented by something else.
Hi,
I've just come accross Formalize and I've been testing it on a new website we're building.
I really like this as it's always been an issue making sure form elements fit into the design cross browser so thanks so much for releasing it.
Just came across a minor issue though - in Opera (I've tested with 11.01) the radio buttons have the blue border when you click on them but no other browser does that (tried Firefox 3.6, IE 8, Chrome 9 and Safari 5 all on Windows). Not so bothered that it's different behaviour than the others but mostly don't like it because the blue border is square which just looks plain wrong.
Cheers,
Alan
When dealing with browsers that don't support the CSS property "box-sizing" (IE 6,7,8)
when specifying a textarea with width : 100% and supplying a border the textarea actually grows wider then the 100% as the 100% width is minus the border.
A trick i've been applying myself to circumvent this problem is done as follows.
Wrap the textarea in a label tag, set the label to display block make the textarea 100% width without any paddings or border.
The label + textarea then acts as a real block element.
See https://gist.github.com/884735 for an example of the behavior.
height: 1.8em;
is assigned to select[size="0"]
and select[size="1"]
only through the WebKit media query @media (-webkit-min-device-pixel-ratio: 0) { … }
. At least Firefox 9 and Opera 11.6 need that declaration too, otherwise the rendered select
is too small.
Hi Nathan,
Here are some of the fixes for IE CSS bugs, maybe you should try to implement them if you want:
In trying to debug an issue with the Drupal Commons project, I found that the 1.4.4 version of jQuery that ships by default with Drupal 7 causes problems with Formalize. It appears that the issue stems from the fact that the on() method was added in jQuery 1.7.
Is the jQuery version requirement documented? Also, is there any chance of making Formalize backwards compatible with jQuery 1.4.4?
Thanks!
I found this originally on chrome, and it looked great. I tried it on Firefox 19 (And later 20), as well as IE9, and it doesn't seem to work at all (All of the elements in the demo pages, doesn't seem to matter which one, look like regular unstyled form elements.). I can only speak for Chrome / FF 19 and 20 / IE9, and it only works on Chrome.
To give you an example of what I mean, on Chrome the datetime input box looks like a calendar and time selector, with a dropdown calendar inside of it. On firefox/ie it's just a plain text input box.
I've had several friends try it out, and have completely disabled all of my addons on firefox.
When you have a select element that isn't multiple but has a size attr it will be redendere only one unit high. This fixes the behaviour at last for modern browsers:
textarea, select[multiple], select[size] { height: auto; }
Adding a size
bigger than 1 or multiple="multiple"
here results in this behaviour. Shouldn’t it be more like this?
A …
select {
vertical-align: top;
}
… would solve the issue.
Any chance we can get minified JS files (maybe with UglifyJS)?
I'm using LABjs to load Formalize in parallel with other scripts. Formalize in particular was causing an error.
The cause of the error is that the document ready block is at the top of the script instead of the bottom. When integrated with LABjs, the document may be ready before the FORMALIZE plugin becomes available. In other words, FORMALIZE.go() is being called before we know for sure that FORMALIZE.go() is available.
The solution is simple. Move this block to the bottom of the script:
// Automatically calls all functions in FORMALIZE.init
jQuery(document).ready(function() {
FORMALIZE.go();
});
That ensures that the document is indeed ready, but also that the formalize plugin is available.
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.