ilDavid » JavaScript

Aggiungere l’attributo placeholder ai campi di testo

ilDavid — Mon, 18 Oct 2010 09:29:10 +0000

Con l’avvento di html5 stanno aumentando i benefici per gli sviluppatori frontend che devono migliorare la user experience, ma si scontrando spesso con i limiti dei browser datati.
Un piccolo aiuto viene dalla proposta del forum sull’html5 di utilizzare l’attributo placeholder nei campi di input testuali per suggerire all’utente cosa inserire. Questo attributo funziona per il momento solo sui browser basati su Webkit (Safari e Chrome), ma è possibile clonarne la funzione con un po’ di jQuery.
Prima controlliamo se il browser supporta l’attributo placeholder (metodo usato su Dive Into HTML5 )

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

e poi la funzione vera e propria in jQuery

$(document).ready(function(){
if(!supports_input_placeholder()) {
        $('input[type=text]').each(function() {
            var plch = $(this).attr('placeholder');
            $(this).css('color','#999')
            .focus(function(){
                if($(this).val() == plch) {
                    $(this).val('').removeAttr('style');
                }
            })
            .blur(function(){
                if(!$(this).val()) {
                    $(this).css('color','#999').val(plch);
                }
            })
            .val(plch);
        })
    }
});

ClipGallery

ilDavid — Mon, 30 Nov 2009 00:44:17 +0000

Dopo aver imparato come usare la proprietÃ clip mi Ã¨ venuta l’idea per una gallery che sfrutti appunto le potenzialitÃ di clip e le animazioni di jQuery. Ne Ã¨ uscito un piccolo plug-in per jQuery, che crea una griglia di porzioni di immagini e al mouse over allarga la visualizzazione all’intera immagine.
Ditemi cosa ne pensate nei commenti.

Effetti maschera con clip e jQuery

ilDavid — Mon, 23 Nov 2009 16:48:05 +0000

Seguendo il post del 9 novembre di WebDesigner wall e dovendo sviluppare una cosa simile per un progetto, mi sono imbattuto in un piccolo problema: jQuery non supporta nativamente le animazioni sulla proprietÃ css clip.
La proprietÃ clip permette di creare una “maschera” che mostra solo una parte di un elemento block.
Per risolvere il problema di jQuery esiste un plugin che utilizzando la stessa sintassi di animate permette l’animazione di questa maschera. L’effetto Ã¨ davvero piacevole. (nella demo ho usato la sintassi deprecata senza virgole della proprietÃ clip, per renderla compatibile anche con IE.)

Fermiamo IE6!

ilDavid — Fri, 19 Jun 2009 17:16:40 +0000

Man mano che vengono implementate regole dei CSS3 o anche le innovazioni dei framework javascript diventa sempre piÃ¹ frustrante confrontarsi col problema della resa su Internet Explorer 6 (e pure col suo fratello piÃ¹ grande IE7). Sono sorte petizioni, siti e script vari per ovviare ai problemi, ma secondo me finchÃ¨ la gente continua ad usare questo browser ci saranno sempre problemi. Ecco quindi il mio plugin per jQuery che invita ad aggiornare all’ultima versione di IE o di passare ai browser che funzionano: Firefox, Chrome, Safari, Opera.

$(document).ready(function(){
                if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)< =7){messaggio='Il programma che state utilizzando per navigare Ã¨ obsoleto. Per aumentare la sicurezza durante la navigazione e le funzionalità vi consigliamo di aggiornare il vostro browser. 
Passate gratuitamente a Internet Explorer 8, o Firefox, Safari, Chrome, Opera.';$("body").prepend(messaggio);$('#stopie6').css({'background-color':'#ffc','color':'#333','font-family':'Arial,sans-serif'});$('#stopie6').css({'padding':'8px','font-size':'13px','border':'solid 1px #333'})}
            })

styleCheckbox: a jQuery plugin

ilDavid — Sun, 18 Jan 2009 19:38:47 +0000

Un piccolo plugin per personalizzare le checkbox dei form.
Sostituisce le checkbox in input type="hidden" e applica le classi checked e unchecked alla label della checkbox.

$.fn.styleCheckbox = function () {
	$(":checkbox").each ( function() {
		var nome=$(this).attr('id');
		var etichetta = $("label[for='"+nome+"']");
		var moo = $('');
		if (this.checked) {
				$(etichetta).addClass("checked");
				moo.attr('value','on');
		} else {
				$(etichetta).addClass("unchecked");
		}
		$(this).before(moo).remove();
		$(etichetta).click( function() {
			if(moo.attr('value') == ''){
				val = 'on';
			} else {
				val = '';
			}
			moo.attr('value',val);
			$(this).toggleClass("checked").toggleClass('unchecked');
		})
	});
}

Si attiva alla caricamento della pagina con

$(document).ready(function(){
    $('#contatti').styleCheckbox();
});

Vanno poi applicati i fogli di stile, ad esempio

#checkbox {
	width:auto;
	cursor:pointer;
}
#checkbox .unchecked {
	background:transparent url(images/check_off.png) no-repeat left bottom;
	padding:0 0 0 18px;
}
#checkbox .checked {
	background:transparent url(images/check_on.png) no-repeat left bottom;
	padding:0 0 0 18px;
}