/* Any site-specific scripts you might have. Note that innately gets a class of "no-js". This is to allow you to react to non-JS users. Recommend removing that and adding "js" as one of the first things your script does. Note that if you are using Modernizr, it already does this for you. :-) */ jQuery(function(){ jQuery('.wpcf7-form').slidinglabels({ /* these are all optional */ className : 'form-slider', // the class you're wrapping the label & input with -> default = slider topPosition : '5px', // how far down you want each label to start leftPosition : '5px', // how far left you want each label to start axis : 'x', // can take 'x' or 'y' for slide direction speed : 'fast' // can take 'fast', 'slow', or a numeric value }); // clear input on focus jQuery('#wpcf7-f22-p65-o1 input.wpcf7-text, #wpcf7-f22-p65-o1 textarea, body.page-id-142 .wpcf7-form input, body.page-id-142 .wpcf7-form textarea').focus(function(){ if(jQuery(this).val()==this.defaultValue){ jQuery(this).val(""); } }); // if field is empty afterward, add text again jQuery('#wpcf7-f22-p65-o1 input.wpcf7-text, #wpcf7-f22-p65-o1 textarea, body.page-id-142 .wpcf7-form input, body.page-id-142 .wpcf7-form textarea').blur(function(){ if(jQuery(this).val()==""){ jQuery(this).val(this.defaultValue); } }); }); (function($){ $.fn.slidinglabels = function(options, callback) { var defaults = { className : 'form-slider', topPosition : '5px', leftPosition : '5px', axis : 'x', speed : 'fast' }, options = $.extend(defaults, options), itemwrapper = this.find('.' + defaults.className + ''), labels = itemwrapper.find('label'); return labels.each(function() { obj = $(this); var parent = obj.parents('.' + defaults.className + ''); parent.css({'position':'relative'}) // style the label with JS for progressive enhancement obj.css({ 'position' : 'absolute', 'top' : defaults.topPosition, 'left' : defaults.leftPosition, 'display' : 'inline', 'z-index' : 99 }); var inputval = $(this).next().find('input, textarea').val(), labelwidth = $(this).width(), labelmove = labelwidth + 5 +'px', labelheight = $(this).height(); //onload, check if a field is filled out, if so, move the label out of the way if(inputval !== ''){ if(defaults.axis == 'x'){ obj.stop().animate({ 'left':'-'+labelmove }, 1); } else if(defaults.axis == 'y') { obj.stop().animate({ 'top':'-'+labelheight }, 1); } } // // if the input is empty on focus move the label to the left // if it's empty on blur, move it back $('input, textarea').focus(function(){ var label = $(this).parents('.' + defaults.className + '').find('label'), width = label.width(), height = label.height(), adjust = width + 5 + 'px', adjustUp = height + 'px', value = $(this).val(); if(value == ''){ if(defaults.axis == 'x'){ label.stop().animate({ 'left':'-'+adjust }, defaults.speed); } else if(defaults.axis == 'y') { label.stop().animate({ 'top':'-'+adjustUp }, defaults.speed); } } else { if(defaults.axis == 'x'){ label.css({ 'left':'-'+adjust }); } else if(defaults.axis == 'y') { label.css({ 'top':'-'+adjustUp }); } } }).blur(function(){ var label = $(this).parents('.' + defaults.className + '').find('label'), value = $(this).val(); if(value == ''){ if(defaults.axis == 'x'){ label.stop().animate({ 'left': defaults.leftPosition }, defaults.speed); } else if(defaults.axis == 'y') { label.stop().animate({ 'top': defaults.topPosition }, defaults.speed); } } }); }); }; // End function })(jQuery); // End jQuery