diff --git a/demo/index.html b/demo/index.html index 89e0b0e..ee8e195 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,11 +14,22 @@ + + +
+ + + +
- \ No newline at end of file + diff --git a/jvfloat.css b/jvfloat.css index 41107cd..cdc7cfc 100644 --- a/jvfloat.css +++ b/jvfloat.css @@ -52,6 +52,10 @@ transition: transform 100ms, opacity 120ms, visibility 120ms; opacity: 1; } +.jvFloat .placeHolder.visible { + color: #333333; +} + /* End CSS3 */ /* Legacy browser */ diff --git a/jvfloat.js b/jvfloat.js index f36245b..1f7686e 100644 --- a/jvfloat.js +++ b/jvfloat.js @@ -3,73 +3,92 @@ * modified on: 18/09/2014 */ -(function($) { +(function _jv_float_module($, window) { 'use strict'; - + + var namespace = 'jv_float'; + // Init Plugin Functions - $.fn.jvFloat = function () { + $.fn.jvFloat = function _jv_float_plugin() { // Check input type - filter submit buttons. - return this.filter('input:not([type=submit]), textarea, select').each(function() { - function getPlaceholderText($el) { - var text = $el.attr('placeholder'); + return this.each(function _jv_float_each() { + // create basic variables + var + $el = $(this), + el = $el[0]; // native element - if (typeof text == 'undefined') { - text = $el.attr('title'); - } + // use tagName to define supported elements, if unsuported, break + if (!(~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName)) || el.getAttribute('type') == 'submit') { + return false; + } + + // fix properties + generate_id(); + + // generate complete base structure + var + $parent = $el.parent('div.jvFloat'), + $label = $parent.find('label.placeHolder[for="' + el.getAttribute('id') + '"]'), + placeholder = el.getAttribute("placeholder") || el.getAttribute("title"), // get placeholder with native function + // added `required` input detection and state + required = el.getAttribute('required') || ''; - return text; + // if parent div don't exists, create it + if ($parent.length == 0) { + // Wrap the input in div.jvFloat + $parent = $el.wrap('
').parent('.jvFloat'); } - function setState () { + + // if label for element don't exists, create it + if ($label.length == 0) { + + // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) + // to allow better positioning of the element for multiline text area inputs + $label = $('