Placeholders has always been an issue in IE8 or IE9. As a workaround for this,
I used jQuery plugin that enables placeholder to browsers who does not support this. Since my jQuery is 1.5, I used v1.8.7 of that plugin because $.valHooks is undefined. But what happened is that it seemed didn't work since my placeholders doesn't behave properly in IE8/IE9.
I have already included the jQuery.placeholder.js in my project and since it was stated there that to invoke this is you use this, $('input, textarea').placeholder();. Still i did not work. Are there other ways needed to do before using the plugin.
My placeholder issues are during submission of form and also when replacing the placeholder of 1 textbox.
Your help is greatly appreciated. ;)
You could try using http://modernizr.com
It's a plugin which detects features the user's browser supports. If it's not supported, a jQuery plugin makes it happen!
Related
I am using a DatePicker js library called LitePicker JS for a project which has been flawless so far. It uses no dependencies and has been easy to style. The only issue is that it does not work in I.E11 due to the litepicker using CSS variables. The documentation on the LitePicker Js library site recommends using an ie11CustomProperties polyfill to make it work but It. I installed the script via npm - tried it, the script does load fine (i can see it in the header using dev tools for IE), the datepicker opens when you click in the form field but the styling is still all broken in I.E11.
From me checking one of the CSS properties using dev tools, this is what is happening:
instead of width: 266px;
the browser is reading it as:
-ieVar-width: var(--litepickerDayWidth);
Which is incorrect.
As much as IE11 is ridiculous to need to support these days unfortunately I've been told it needs to work in it. If anyone has any experience with this polyfill could I get some advice on what is going wrong? This is the LitePicker:
https://wakirin.github.io/Litepicker/
and this is the polyfill:
https://github.com/nuxodin/ie11CustomProperties
Any help would be massively appreciated.
Thank you
Hi i am the author of this polyfill.
To make css-variables work, i have to rewrite all the stylesheets.
In IE11 width:var(...) fails and is skipped by the css-parser.
Bud -ieVar-width: var(...) is not skipped and the polyfill later can read it.
If you can make me a demo on https://jsbin.com/, I can check it out.
I am currently using this code to replace the placeholder functionality where it is not available. I have a click listener on jQuery which changes the placeholder text:
$('.contact-type').change(function(event) {
$contactInfo = $(this).closest('div').prev().find('#contact-info');
$contactInfo.removeClass();
$contactInfo.addClass('form-control input-lg');
$contactInfo.addClass('validate[required,custom[line]]');
$contactInfo.attr("placeholder", "LINE ID");
})
The issue is that when using the jquery placeholder, when I changed the placeholder text and then I called $('input, textarea').placeholder();. The new placeholder doesn't change. How can I also change the placeholder when the value changed?
Check if your version of opera is here:
CLICK ME :)
It may just not work, because developers didn't code it. ;)
there's a whole slew of placeholders that you could check and see if it could work for opera:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms--input-placeholder
Modernizr is a very nice tool that is useful for checking backwards compatibility of html5 on older browsers.
Did more digging and apparently this site gives opera mini consideration in adding placeholders (though I haven't tested it myself since I don't have opera mini installed on my computer):
http://www.mightyminnow.com/2013/09/mightyminnow-plugin-html5-jquery-polyfill/
Give that a go too. I know it can be frustrating, I had to do tons of tweaks on a recent project just to support ie7 stuff.
Opera-mini doesn't support placeholder attribute for HTML input.
You can check whether Opera-Mini supports something or not in the website Mr.TK pointed out: http://caniuse.com/input-placeholder.
I know that throwing the webkit prefix at the start works for Chrome (as object.style.webkitAnimationDuration), but I have yet to find any way of making this work with the Opera prefix, and I'm not sure how effective the Firefox prefix is either. W3Schools say that all the major browsers support the duration property, so what do I do?
Jsfiddle:
http://jsfiddle.net/4C7Fp/
Javascript and Jquery suggestions accepted :)
Maybe you can use this plugin for that. (Prefixfree Plugin) It has also jquery plugin to set/get css without prefixes.
Btw why didnt you use it in css? It can be better and faster than javascript.
Hi can anyone identify which javascript library was used to create this validation ui?
Thanks
EDIT:
I've discovered that this validation is caused by the standard JQuery library by adding required="true" to field names.
I've been debugging in jsfiddle and I've narrowed it down.
See example.
http://jsfiddle.net/WypT8/31/
My main gripe was that I cant get it to work in IE.
Anyone any ideas?
Thanks
Look ma, no JavaScript!
That is actually HTML5; the required attribute is used by the latest HTML5 compliant browsers to validate a form before being submitted.
jsFiddle.
It doesn't work in IE because IE does not support this feature yet.
What about the library detector firefox add on?
I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/
You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...
If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.