Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Close #4 V 1.8 making the Polyfill work HTML5 Boilerplate

1.8 replacing the HTML5 Boilerplate .visuallyhidden technique with one
that still allows the placeholder to be rendered
  • Loading branch information...
commit 1497707a308e6a7c47a2cfc9c137b53c6f3a6be8 1 parent 6e4188e
Dirk Ginader authored
View
2  demo.css
@@ -2,7 +2,7 @@ body{
font-family:sans-serif;
}
.offscreen {
- left: -999px;
+ left: -999em;
position: absolute;
}
label{
View
3  placeholder_polyfill.css
@@ -22,9 +22,10 @@ label span.placeholder-hide{
}
/* overwrite for the HTML5 Boilerplate way to hide labels */
-label.visuallyhidden{
+label.visuallyhidden-with-placeholder{
clip: auto !important;
height:auto !important;
overflow: visible !important;
+ position:absolute !important;
left:-999em;
}
View
4 placeholder_polyfill.jquery.js
@@ -10,7 +10,7 @@
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
-* Version: 1.7
+* Version: 1.8
*
* History:
* * 1.0 initial release
@@ -21,6 +21,7 @@
* * 1.5 emptying the native placeholder to prevent double rendering in Browsers with partial support
* * 1.6 optional reformat when a textarea is being resized - requires http://benalman.com/projects/jquery-resize-plugin/
* * 1.7 feature detection is now included in the polyfill so you can simply include it without the need for Modernizr
+* * 1.8 replacing the HTML5 Boilerplate .visuallyhidden technique with one that still allows the placeholder to be rendered
*/
(function($) {
@@ -73,6 +74,7 @@
log('the input element with the placeholder needs a label!');
return;
}
+ label.removeClass('visuallyhidden').addClass('visuallyhidden-with-placeholder');
placeholder = $('<span class="'+o.options.className+'">'+text+'</span>').appendTo(label);
titleNeeded = (placeholder.width() > input.width());
if(titleNeeded){
View
6 placeholder_polyfill.jquery.min.js
@@ -9,15 +9,15 @@
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
-* Version: 1.7
+* Version: 1.8
*/
(function(e){var b=false;function c(f,g){if(e.trim(f.val())===""){f.data("placeholder").removeClass(g.hideClass);}else{f.data("placeholder").addClass(g.hideClass);
}}function a(h,g){var f=g.is("textarea");h.css({width:g.innerWidth()-(f?20:4),height:g.innerHeight()-6,lineHeight:g.css("line-height"),whiteSpace:f?"normal":"nowrap",overflow:"hidden"}).offset(g.offset());
}function d(f){if(b&&window.console&&window.console.log){window.console.log(f);}}e.fn.placeHolder=function(f){var g=this;this.options=e.extend({className:"placeholder",visibleToScreenreaders:true,visibleToScreenreadersHideClass:"placeholder-hide-exept-screenreader",visibleToNoneHideClass:"placeholder-hide"},f);
this.options.hideClass=this.options.visibleToScreenreaders?this.options.visibleToScreenreadersHideClass:this.options.visibleToNoneHideClass;return e(this).each(function(){var h=e(this),l=h.attr("placeholder"),m=h.attr("id"),i,k,j;
i=h.closest("label")[0];h.attr("placeholder","");if(!i&&!m){d("the input element with the placeholder needs an id!");return;}i=i||e('label[for="'+m+'"]');
-if(!i){d("the input element with the placeholder needs a label!");return;}k=e('<span class="'+g.options.className+'">'+l+"</span>").appendTo(i);j=(k.width()>h.width());
-if(j){k.attr("title",l);}a(k,h);h.data("placeholder",k);k.data("input",k);k.click(function(){e(this).data("input").focus();});h.focusin(function(){e(this).data("placeholder").addClass(g.options.hideClass);
+if(!i){d("the input element with the placeholder needs a label!");return;}i.removeClass("visuallyhidden").addClass("visuallyhidden-with-placeholder");k=e('<span class="'+g.options.className+'">'+l+"</span>").appendTo(i);
+j=(k.width()>h.width());if(j){k.attr("title",l);}a(k,h);h.data("placeholder",k);k.data("input",k);k.click(function(){e(this).data("input").focus();});h.focusin(function(){e(this).data("placeholder").addClass(g.options.hideClass);
});h.focusout(function(){c(e(this),g.options);});c(h,g.options);e(document).bind("fontresize",function(){a(k,h);});if(e.event.special.resize){e("textarea").bind("resize",function(n){a(k,h);
});}else{e("textarea").css("resize","none");}});};e(function(){if("placeholder" in e("<input>")[0]){return;}e("input[placeholder], textarea[placeholder]").placeHolder({visibleToScreenreaders:true});
});})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.