StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>you can use it this way. But, I don't think it is a good idea. webshims lib adds some nice extensions to webforms (styling error bubble/changing validation text) and also fixes some bugs, which aren't featuredetected with modernizr. Addiotionally, I'm pretty sure you won't see a performance improvement (polyfiller.js is too small). In fact due to the fact, that you first load polyfiller and then the shims, you will have some small performance "penalty" for a lot of browsers. This said, here is, how you could do this:</p> <p>I have added this warning because I know, that a lot of people simply add everything inside a DOM-Ready callback. </p> <pre><code>//this is not what you should do: $(document).ready(function(){ $.webshims.polyfill('forms'); }); //instead do this: $.webshims.polyfill('forms'); $(document).ready(function(){ //DOM and forms feature are available }); </code></pre> <p>If you want to load polyfill.js dynamically, you have to do 2 things extra:</p> <ol> <li>specify the path to the polyfills (this is not needed with normal embedding because we can get the script-path of the last script)</li> </ol> <p>You do this, the follwoing way:</p> <pre><code>$.webshims.loader.basePath = 'path-to-shims-folder/'; $.webshims.polyfill(); </code></pre> <ol> <li>Only If you wan't to script an HTML5 feature on DOM-Ready (not if you want to script a feature on submit, invalid, input etc.)</li> </ol> <p>You have to use the extra ready-method from webshims, because the DOM-Ready may already occure, before the scripts are loaded (normally, webshims delays the ready event to make this handling smooth)</p> <p>You can do this with the following code:</p> <pre><code>$.webshims.ready('forms DOM', function(){ //give me the validationMessage of the first input alert($('input').attr('validationMessage'); }); </code></pre> <p>If you only need standard features and don't want to script webshims, this is the way you should go:</p> <pre><code>yepnope({ test: blah, nope: '/_scripts/polyfiller.js', complete: function () { $.webshims.loader.basePath = '/_scripts/shims/'; $.webshims.polyfill('forms'); } }); </code></pre> <p>If you want to script right after DOM-Ready/Feature-Loading, you should do the following:</p> <pre><code>yepnope({ test: blah, nope: '/_scripts/polyfiller.js', complete: function () { $.webshims.loader.basePath = '/_scripts/shims/'; $.webshims.polyfill('forms'); $.webshims.ready('forms DOM', function(){ //give me the validationMessage of the first input alert($('input').attr('validationMessage'); }); } }); </code></pre> <p>In both cases, the script warnings will stay, but only interested developers will see them.</p> <p>Some informations about the current state of webshims lib version 1.5.2 /HTML5 forms. There are two knwon issues:</p> <ol> <li>calling $.webshims.activeLang won't work initially (This method was moved from polyfiller to domextend)</li> <li>I have misunderstood a part of the HTML5 specification (and mixed my implementation with an old specification) about interactive constraint validation vs <a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#statically-validate-the-constraints" rel="nofollow">static constraint validation</a>. The result is, that Operas and my implementation of <a href="http://www.w3.org/TR/html5/forms.html#dom-form-checkvalidity" rel="nofollow">checkValidity</a> is not right, so don't use this :-).</li> </ol> <p>Both bug are already fixed. I will spend some time to make extra tests, so you can expect a bugrelease this weekend :-). If you need some of those features, you can grab the current master branch (it's quite stable, but I need to do more x-browser testing, before releasing it)</p> <p>Something about some performance rules:</p> <p>Most yslow rules were written in 2006. A lot has changed since then:</p> <ol> <li>JS does not fully block anymore. (only IE6 and IE7 have these problems. but 80% of browser don't)</li> <li>Most browser can load more than 2 (mostly between 4-8) files at the same time</li> </ol> <p>From my tests loading between 6 and 12!!! (yes 12 files) js-files is much faster than loading one single js file (Test was done on multiple real life websites with different amount and size of css and images).</p> <p>Putting JS at the bottom does not decrease page load time. Putting JS at bottom only decreases so called white page time, but this always leads to Flash of unstyled / unbehaviored content. If you don't like FOUC, put JS at Top. If you want a mix use a scriptloader (decreasing white page time, with less FOUC) in the HTML head and load your scripts from there.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload