Welcome to movingLabels presentation

A jQuery Plugin, presented by Ape Unit GmbH, coded by Paul Lunow.

Talk, Backgrounds and Comments

On my blog: www.interaktionsdesigner.de.

Demos

movingLabels can do a lot of cool stuff. This is my Place to Play.

Demo #1

Simple, without configuration. 

jQuery(function($) {
	$('#demo1 form').movingLabels();
});

Demo #2

With a custom animation.

jQuery(function($) {
	$('#demo2 form').movingLabels({
	animation: {
		hide: {
			opacity: 0, 
			fontSize: '50px'
		},
		show: {
			opacity: 1, 
			fontSize: '13px'
		},
		start: {
			display: 'none',
			fontSize: '1px'
		}
	}
	});
});

Demo #3

With some custom HTML code. 

jQuery(function($) {
	$('#demo3 form').movingLabels({
		label: 'span'
	});
});
Please enter your name
What is your Emailadress?

Demo #4

Maybe a little bit like Sliding Labels. 

jQuery(function($) {
	$('#demo4 form').movingLabels({
	animation: {
		hide: {
			left: '-40px',
			opacity: 1
		},
		show: {
			left: '8px',
			opacity: 1
		},
		speed: 75,
		start: {}
	}
	});
});

At work

Go and talk about it, start the download or send me a nice mail. Thanks!

The Code

This is the magic behind:

(function($) {
    //hello, welcome to my plugin "movingLabels"!
    //provided by Ape Unit GmbH (www.apeunit.com)
    //coded by Paul Lunow (paul@apeunit.com)
    //here we go:
    jQuery.fn.movingLabels = function(options) {
        var version = '1.0';
        
        //the options
        var defaults = {
            //this is the object that will be moved
            label: 'label',
            //the label describs this input. input will also get the focus
            input: ':text, :password',
            //parent div holds label and input
            div: 'div',
            //specify the animations
            animation: {
                //animation when clicking the input
                hide: {opacity: 0, marginLeft: 20},
                //if the input blur and is empty, this animation starts
                show: {opacity: 1, marginLeft: 0},
                //css properties for the label, after hide animation ends
                start: {marginLeft: '-20px'},
                //speed of the hole thing
                speed: 150
            }
        };
        
        //provide your custom settings
        var opts = jQuery.extend(defaults, options);
        
        //cool new selector for finding labels in divs that should be invisible.
        jQuery.expr[':'].shouldBeInvisible = function(el, i, m) {
            var r = $(el).closest(opts.div).find(opts.input).val();
            if(!r) return false;
            return r.length > 0 ? true : false;
        };
        
        //and now the jQuery action. 1,2, go!!
        return this.each(function() {
            $form = $(this);
            $form.find(opts.div+':has('+opts.label+') '+opts.input)
                .focus(function() {
                    $(this)
                        .closest(opts.div)
                        .find(opts.label)
                        .animate(opts.animation.hide, opts.animation.speed, function() { 
                            $(this).css(opts.animation.start);
                        });
                })
                .blur(function() {
                    if($(this).val().length == 0) {
                        $(this)
                            .closest(opts.div)
                            .find(opts.label)
                            .animate(opts.animation.show, opts.animation.speed)
                            .show();
                    }
                });
            $form.find(opts.label)
                .click(function(e) {
                    e.preventDefault();
                    $(this).closest(opts.div).find(opts.input).focus();
                })
                .filter(':shouldBeInvisible').hide();
        });
    };
    //thank you and good bye.
})(jQuery);