Tavarn Ty Pwyll

Suite à un premier jet dans l’articleUtiliser RightJS pour l’effet ‘Sliding Label’, je vous présente une nouvelle version de ce script.
Au menu des améliorations
Script plus élégant
Animations

A l’origine de cette mise à jour il y a le message de Nikolay sur le site de CSS Karma, en utilisant ce morceau de script et les fonctions FX.Morph de RightJS vont nous permettre d’améliorer le script

		var slidingLabelInit = function(e,el,margin)
		{
			var el = el || '.slider';	// by default use slider class
			var margin = margin || 0;	// padding between last char of label and box of input
			$$( el+' label').each( function(label)
			{
				var input = $(label.get('for'));
				// some css to obtain a size for element
				label.setStyle('display','inline');
				label.setStyle('position','absolute');
				var sizes = label.sizes();
				var text = label.hide().textContent;
				$ext(input,
				{
					showHint: function() {
						if (this.value.blank())
						{
							this.addClass('hint').setValue(text);
							label.setStyle({
								top: sizes.y/2+'px',
								background: 'white',
								left: '0px',
							}).hide();

						}
					},
					hideHint: function() {
					  if (this.value == text)
						{
						this.removeClass('hint').setValue('');
						label.setStyle('top',sizes.y/2+'px').show();
						new Fx.Morph(label).start(
							{
								background: 'yellow',
								left: '-'+ ( sizes.x + margin ) +'px',
							})
						}
					}
				}).on(
				{
					focus: 'hideHint',
					blur: 'showHint'
				}).showHint();
			});
		};
		document.on('ready', slidingLabelInit,'.slider', 5);

quelques précisions
ligne 3 & 4 ces variables ne servent qu’a apporter un peu de dynamisme à la fonction
ligne 09 & 10 ces deux lignes permettent de modifier le style de l’élément label afin d’une part d’obtenir sa taille, et d’autre part de modifier son placement de manière absolue.
ligne 13 à 38 , on retrouve le code à la sauce Nikolay, qui permet d’étendre les fonctionnalités des éléments <input>, j’ai au passage agrémenté le code d’un petit effet de translation/coloration en jaune
ligne 39 on utilise le gestionnaire d’évènement de rightJS pour appeler les nouvelles fonctions en réaction à l’événement ‘blur’ et ‘focus’.
ligne 46 : on appelle la fonction quand le document est complétement chargé, on lui passe également deux paramètres la classe sur lesquels opérer la manipulation et une marge à insérer entre le texte et le bord du cadre lorsque le texte se déplacera de l’intérieur de l’élément du formulaire vers la gauche

Une petite démonstration de l’effet obtenu