Sliding Labels v2 – Patch
Last week I wrote an article about sliding form labels that got quite a bit of attention. Many of the commenters brought up a couple good points/bug in the Sliding Label code that I wanted to address and provide a patch for:
- The sliding label was barfing out in Safari when auto-fill was active
- The default scripting didn’t work on textareas
I sat down yesterday and wrote a patch/new version of sliding labels which I think addresses these two problems.
The new jQuery
$(function(){
$('form#info .slider label').each(function(){
var labelColor = '#999';
var restingPosition = '5px';
// style the label with JS for progressive enhancement
$(this).css({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});
var inputval = $(this).next().val();
// grab the label width, then add 5 pixels to it
var labelwidth = $(this).width();
var labelmove = labelwidth + 5 +'px';
// onload, check if a field is filled out, if so, move the label out of the way
if(inputval !== ''){
$(this).stop().animate({ 'left':'-'+labelmove }, 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).prev('label');
var width = $(label).width();
var adjust = width + 5 + 'px';
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':'-'+adjust }, 'fast');
} else {
label.css({ 'left':'-'+adjust });
}
}).blur(function(){
var label = $(this).prev('label');
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':restingPosition }, 'fast');
}
});
}); // End "each" statement
}); // End loaded jQueryTextarea HTML
The HTML for the textarea follows the same convention as the rest of the inputs, in only needing a wrapping element.
<div id="comment-wrap" class="slider">
<label for="comment">Comment</label>
<textarea cols="53" rows="10" id="comment"></textarea>
</div><!--/#comment-wrap-->There are no major changes to the plugin, just a few tweaks. If you find anymore bug, please let me know.
You can leave a response, or trackback from your own site.
35 Responses to “Sliding Labels v2 – Patch”
|
|
Leave a Reply
[...] Please use version 1.1 of sliding labels with updated options and bug fixes at: http://www.csskarma.com/blog/sliding-labels-v2/ [...]
Thanks for making these changes. I was struggling with the textarea option.
Thank you for this absolutely awesome form script thingy!! One question though – how do I style the textarea box? I have added the following in the CSS file, but this doesn’t seem to be correct..?
input[type="textarea"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px; background:#272c2e;}
input[type="textarea"]:focus { border-color:#bed73d; }
Please help! **QQ**
ooooh wait I got it!! I’m such a noodle!! lol!!
textarea[name="comment"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px; background:#272c2e;}
textarea[name="comment"]:focus { border-color:#bed73d; }
You should be able to just use
textarea{ *css rules here* }[...] Sliding Labels V2 mit jQuery [...]
If you have a small input field and the label takes up the whole box, you need to add this to the top of the plugin to get the label to slide out of the way when a user clicks on it
$(‘.slider label’).click(function(){ $(this).next().focus(); });
[...] Form Design with Sliding Labels « CSSKarmaEine schöne Spielerei: Feldbeschreibungen die wegrutschen wenn man das Feld aktiviert. Nach nur minimaler Anpassung läuft das nun auch hier in den Kommentaren so. [...]
You mentioned the labels have the potential to slide upward?
Could you show me how to change the .js to achieve this?
Thanks in advance!
may i join Dan B. and ask for enlightenment re slide upward
thanks in advance
the next version will work with select?
yappeyy, it’s only need to add select $(‘input, textarea, select’).focus(function(){…
DOOOOPE.cool and unique. thanks for sharing
I can’t seem to get the script to work. I created a new php file. Called to the latest version of jquery.js and input the slider javascript code into the head section in a script call. Pasted the comment wrap div that OP provided. What am I doing wrong here?
Hi Chad, do you have it live somewhere? Try using the demo files
http://honyat.com/slide.php
you need to wrap it in a form element with the ID of “info”
now the labels are pushed to the top.
.slider{ position:relative; } in the CSS
Thanks Tim!
Tim, is there any way to make this work on password fields?
nevermind. got it to work
thanks for the script. very awesome.
This effect is nice. I love this. Thank you for that.
[...] Sliding Labels v2 – Patch Via / @jlantunez [...]
[...] Sliding Labels v2 – Patch « CSSKarma Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. (tags: forms webdev jquery javascript) [...]
[...] Sliding Labels v2 – Patch « CSSKarma (tags: css animation) [...]
Great. But it doesn’t work with this form structure :
[...] a number, there are different colors applied to certain stages to notify the user about the status.Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on [...]
[...] a number, there are different colors applied to certain stages to notify the user about the status.Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on [...]
Nice simple and clean. Thanks!
btw, (I know it should) but does anyone know if tihs plays nice with the Validate plugin?
That’s sick! Nice subtle effect.. a lot more user friendly than making people erase the text in the inputs before they type.
[...] Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on click. [...]
[...] Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on click. [...]
[...] Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on click. [...]
Really, really great. Such an elegant solution.