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.
« Redirection Options | Penn UI Conference & HTML 5 »
Comments (42)
|
Trackbacks & Pingbacks (73)
-
[...] 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 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. The small jQuery snippet works in all major browsers and can be used for input and textarea elements. [...]
-
[...] Sliding Labels [...]
-
[...] Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on click. [...]
-
[...] [...]
-
[...] Sliding Labels 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. The small jQuery snippet works in all major browsers and can be used for input and textarea elements. [...]
-
[...] into a powerful wizard with jQuery with "steps left" information. FormToWizard Plugin »Sliding Labels – jQuery Form Plugin Sliding Labels – jQuery Form Plugin »ToggleValToggleVal gives you the option to populate the [...]
-
[...] Sliding Labels v2 Form label keeping the label inline, but sliding it off to the left rather than going away on click. [...]
-
[...] Sliding Labels – jQuery Form Plugin [...]
-
[...] Sliding Labels – jQuery Form Plugin [...]
-
[...] Sliding Labels – jQuery Form Plugin [...]
-
[...] Sliding Labels – jQuery Form Plugin [...]
Leave a Reply
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* }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(); });
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.
Great. But it doesn’t work with this form structure :
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.
Really, really great. Such an elegant solution.
great idea!
but, shouldn’t the .focus(…) and .blur(…) part of the code be outside the .each(…)?
anyone figure out how to move the text field boxes to the left? There seems to always be a lot of padding on the left. Anyone??
somewhat figured it out. I just messed with my tables. Still would like to figure out how to just move the div over tho.
If you have a live demo somewhere, I’d be happy to take a look at it
I have it where i want now. but i would like to know for future reference.
thanks.
http://www.power-marketing.com/clients/harkins/contact.html (this is one i fixed using tables and just pushed it over manually.
http://www.power-marketing.com/clients/harkins/contact.html (this one is just using the div’s placed in a table that has left alignment. But it moves it to the center.
my mistake, the other url is: http://www.power-marketing.com/clients/harkins/contact_b.html
haha, I too missed the “.slider{ position:relative; } in the CSS” at first.
Thanks for this!
Very cool!
do you have select boxes that work ?
unique script, very well done.
Is this screen reader compatible?
Hey,
I use your sliding labels for a commentformular on these page: http://www.mmindgame.de but if i activate the lightbox2.0 plugin for wordpress it doesnt work anymore. I dont know the problem. Can someone help me?
Hi,
I liked it very much and I made a modification to labels go to top instead of left.
Could you parameterize the code to go to the left or to top?
Thanks a lot!
Hi, how did you manage to make the labels slide upwards instead of left?
I think this is really neat – but I saw some comments elsewhere that this doesn’t help with the ‘space saving’ that inline labels are often used to achieve.
So I added a tweak to make it ‘Slide and Hide’ – if a field has a value then the slid label is only visible while the field has focus.
This saves space and keeps the prompt visible while the field is being edited, so *if* space is an issue you may like to use this…
In the JS file
- change the onload to ‘.hide’ instead of ‘.animate’ when a field has a value.
- in the focus – add a ‘.show()’ before a label is animated back (in case it was hidden).
- in the onblur – add ‘ else label.hide();’ on the check for a label value.
Thanks for sharing.
nice plugin
it looks like the labels are sliding through the walls of the input fields, & this doesn’t look right to me
imo, the effect would be better if instead of sliding from A to B, the labels faded (ie: faded down & then reappeared at their end position, also with fading)
pls let me know if the plugin can already accomplish this, as i’ll probably use it
This is very similar to something I made a few months ago except the label will slide behind the input when the input has text and losses focus.
Very nice! I think I am going to have to add this to the next site I do!
Thanks!