CSSKarma

display your <style>

designing the web since 2002

Sliding Labels Official Plugin Release [ver. 3.2]

58 Comments

Version: 3.2 – Added a “className” option so you don’t have to use “.slider” as the wrapper

Version 3.1: Changed “children” to “find” so it will work with a UL. Thanks to Oro for the feedback

Version 3 of Sliding Labels brought some big changes, the largest being that I finally converted it into a working jQuery plugin.

Maybe it was the 200 e-mails requesting an official plugin, maybe it was my curiosity. Whatever it was, I heard everyone and I wanted to let you know that I’m listening to all the feature requests and bug reports; and I really do appreciate them.

Additions to version 3

Plugin status: Obviously creating an official plugin was the biggest change

Position: relative: It seemed like a lot of the questions I was getting had to do with adding position:relative to the .slider element in the CSS, so I just moved that into the script.

Animation speed: I added an option to easily control the animation speed. It can take strings like “fast” and “slow” or any numeric value.

Axis option: I got a lot of requests to add in some functionality to have the label slide up rather than only to the left. I added this in with an “axis” variable which can take either “x” or “y” for sliding direction

Subtractions to version 3

Label Color: Originally I had this in the script so it looked nicer inline to the field, but I got to thinking that this really should be defined in the CSS, and it’s just color; so I took it out.

Using the plugin

Just like the previous version, you need an element wrapping the <label> and <input> elements. I use a <div> in the demo, but you can use whatever you’d like. The only requirement is that it have the class name “slider”. I can change that if anyone finds it to be annoying, but let me know and I’ll update the script

HTML

<div class="form-slider">
<label for="user">User name</label>
<input type="text" id="user" name="user">
</div>

JavaScript

$(function(){

	$('#contactform').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

	});

});

That’s all there is to it. Let me know what you think, any extra features you’d like and any bugs. I should be submitting this to jQuery.com in the next few days.

Tags: , , , ,

You can leave a response, or trackback from your own site.

« | »

« Older Comments |

Comments (50)

  1. Laneth Sffarlenn says:
    April 29, 2010 at 3:54 pm

    Hey Tim, this is awesome! Can’t wait to implement this wherever I can, it’s such a neat feature and one that has had people go crazy over it in a good way :) You certainly hit a winner with this one!

    Reply
  2. Aonghus says:
    April 30, 2010 at 6:25 am

    Great script, thanks for your effort! having to use the class name “slider” may cause conflicts for people who are using a carousel script or something like that, but otherwise excellent! :)

    Reply
    • Tim Wright says:
      April 30, 2010 at 9:16 am

      Thanks Aonghus, I kinda thought taht might be the case, I can update the script so class name is an option.

      Reply
      • Marcus Tucker says:
        June 21, 2010 at 8:55 am

        Another vote for making the magic class name a configurable option, but is it actually needed at all?

        Why can’t the plugin operate on a list of jQuery elements – e.g. $(‘.MySlidingLabelClassName’).slidinglabels() like most other plugins – instead of on the form element itself?

        Not only would this make the plugin more flexible (leaving the class up to the developer, and also permitting the use of multiple classes) but it would also open up the potential to use chaining to apply other handlers to the same selected form elements, which is something you’re (traditionally) unlikely to want to do with the form element…

  3. Alex Coleman says:
    April 30, 2010 at 8:26 pm

    Tim, interesting solution…like the alternate solution to a common problem. Wonder if there is a way to build in form validation to this plugin. Maybe the label changes color, or an icon is presented once something is typed and verified.

    Reply
    • Tim says:
      May 3, 2010 at 10:23 am

      Never really thought about validation but now that you mention it, I bet the regular validation plugin would have trouble with this since it produces another label. Worth testing

      Reply
  4. Anon says:
    May 3, 2010 at 10:18 am

    bug: line 93 — .blur if axis = y then ‘top’: defaults.leftPosition… should be topPosition

    Reply
  5. M.Gaetan89 says:
    May 3, 2010 at 10:36 am

    Hey!

    Great job with this plugin. I’m already using it.
    Sometimes the web browser fills form automatically, and with Google Chrome (didn’t try with another one yet), the label slide into the input even if there is a value. Can you think of a solution ?

    Reply
  6. tim too says:
    May 4, 2010 at 6:17 pm

    This plugin is nice. I had some trouble getting it to work with my form. It turns out I had wrapped all my sliders inside another div that was in the form, so nothing was happening. I didn’t know the elements with class slider needed to be direct descendants of the element used to initialize. I would suggest modifying it to find all children with class slider, so I can nest as needed. This might be more of a preference than an actual need for the plugin, but thought I would mention.
    ——————–
    FF 3.6. Mac OS 10.4

    Reply
  7. Chris says:
    May 6, 2010 at 9:40 am

    @tim too Have you found a solution for this? I haven’t been able to figure anything out so that I can position my form and style it the way I want it to be without killing the sliding technique. Let me know if you find something! Otherwise, this is a fantastic plugin

    Reply
  8. Swiss Ball Exercises says:
    May 7, 2010 at 3:46 am

    Keep posting stuff like this i really like it

    Reply
  9. Michael says:
    May 11, 2010 at 12:55 am

    I can’t get this to work if I change the form’s id to anything other than “contactform”. Any suggestions?

    Reply
  10. Michael says:
    May 11, 2010 at 1:25 am

    I guess I need sleep. Turns out I was actually making changes to the code within the section of the demo.

    Reply
  11. Tom says:
    May 12, 2010 at 3:50 pm

    The fix to your div problem, or for that matter, any other issue involving your slider div’s being nested inside another element (such as fieldset) is to simply include that tag when you specify the form ID. Example:

    $(‘#formID fieldset’).slidinglabels()

    Reply
  12. Marcus Tucker says:
    May 13, 2010 at 6:46 am

    This is the best jQuery-based plugin for field hinting that I’ve found, as for me it is absolutely crucial that the HTML is semantically (and syntactically) valid, and that the label is fully accessible and visible at all times.

    However, for rare occasions where space is extremely tight and therefore there’s simply no space for the label to slide to either vertically or horizontally, it would be nice to be able to fade it out instead. This can of course already be achieved with other plugins but I would prefer to use a single plugin to cover both scenarios, so please consider adding fading as an alternative behaviour, with the % opacity for the field focus (but empty) state being configurable. (i.e. 100% opacity label –> field gains focus –> label fades to N% –> disappears instantly upon typing –> reappears if inputted text is deleted)

    Reply
  13. Design Informer says:
    May 13, 2010 at 4:26 pm

    Great job man! I need to put this to use ASAP!

    Reply
  14. Tim says:
    May 13, 2010 at 5:30 pm

    Great work! I did something similar on a wordpress theme of mine: http://cpackage.timgweb.com/contact/

    The labels remain inside the input (well, technically not “inside”, they are just positioned to appear so), and disappear when you type. This eliminates any need for space outside the form. Might be a nice option to add to your plugin in the future.

    Reply
  15. digof says:
    May 14, 2010 at 1:02 am

    Nice is there is any download link?

    Reply
  16. Nicko says:
    May 15, 2010 at 6:07 pm

    Hi, this plugin is awesome.
    Yet having a blank on the left is not really nice when you discover the form.

    So I’d like to open my contact form with the first label already on the left from his input (without clicking anywhere).
    Does it possible ?

    Sorry if my english is not perfect, I’m french ^^

    Thanks a lot for your response.

    Reply
  17. Eric says:
    May 21, 2010 at 5:51 am

    Nice script, but… I want the labels on the other site of the input (just as in the reply form of this page) is that possible also? When I run the script the labels always end up at the left side of the inputs :(

    Reply
  18. Michael says:
    May 21, 2010 at 4:21 pm

    Any luck getting this to play nice with the Jquery UI Datepicker? On Chrome, the label slides left when the DatePicker pops up but once you select a date it slides back into the field as if it was empty.

    Reply
  19. Michael says:
    May 21, 2010 at 4:41 pm

    Probably not the most elegant solution but it’s all I have for now.


    $(".datepicker").datepicker({onClose: function() {$('#myform').slidinglabels();}});

    Reply
  20. Oro says:
    June 8, 2010 at 4:44 am

    Small addition:
    Instead of using $.children to find the children with the class .slider, use $.find .
    Then it’s possible to use e.g. a list to style the form, because $.children only searches the immediate children (one level in the DOM), and .find searches further down the DOM-tree.

    Reply
  21. Tim says:
    June 26, 2010 at 5:38 pm

    Hey guys, I should have a new version of the plugin out soon, just been a bit busy! Thanks for all the comments.

    Reply
  22. Marcus Tucker says:
    July 9, 2010 at 6:07 am

    Found a new issue – dragging text into the field doesn’t work, as it doesn’t give the field focus. It’s arguably a rare edge case but it’s a perfectly valid thing to do, especially with TEXTAREAs…

    Reply
  23. Jason says:
    July 9, 2010 at 1:29 pm

    One other suggestion for you, would be to take the label text and apply it to the title attribute of the field it is for, that way, if the label is a fade out, you will still know what the field is for.

    Reply
  24. Alidad says:
    August 7, 2010 at 5:26 pm

    Tim;
    Hi, this is really nice code, but i have some trouble to fix it, i noticed that if i put value name, it won’t work right! for sample

    country <input name="country" type="text" id="country4" value="” class=”required” />

    There is other way can done with value name!

    Alidad

    Reply
  25. Spoh says:
    August 23, 2010 at 1:51 am

    This is a really cool form! Thanks so much for sharing :)

    I have a problem tho, my div class is set to “form-slider” and i’ve also made sure that: the className : ‘form-slider’ (is like this in the javascript file).
    But its not working..! Does anyone know what to do?
    Please bear with me – i’m new to jQuery and Javascript.

    Thanks :)

    Reply
  26. sanjay says:
    September 3, 2010 at 4:13 am

    hi! just wanna know how can i style the form? which file should i need to use for styling the contact form? tnx!

    Reply
  27. Christoph says:
    September 6, 2010 at 11:26 am

    Hi Tim, great work with this nice Plugin!
    I just made a small addition, to configure the offset for the Sliders.
    Maybe you want to ass this to the GIT:
    1) Add a offset Parameter to the defaults:
    speed : ‘fast’,
    offset : 15
    };
    2) use this offset in the labels.each:
    a) var labelmove = labelwidth + defaults.offset + “px”;
    b) var adjust = width + defaults.offset + ‘px’;

    regarda
    Christoph

    Reply
  28. dmd says:
    September 7, 2010 at 4:33 pm

    Hi,

    very well performed, man.

    I have a quick Q though.
    How can I active the “action” attribute? I mean how can I make it work when I submit?
    Is there any php, or whatever for it?
    also I can’t style it the way I want.

    Thanks again man

    Reply

|

Trackbacks & Pingbacks (8)

Leave a Reply

New from the blog

Are My Sites Up? authenticjobs.com