Aggiungere l’attributo placeholder ai campi di testo
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 )
[js]function supports_input_placeholder() {
var i = document.createElement(‘input’);
return ‘placeholder’ in i;
}[/js]
e poi la funzione vera e propria in jQuery
[js]
$(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);
})
}
});[/js]
Tasks & tools
ClipGallery
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.
Tasks & tools
Effetti maschera con clip e jQuery
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.)
Tasks & tools
Fermiamo IE6!
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.
[javascript]
$(document).ready(function(){
if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)< =7){messaggio='<div id="stopie6">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. <br />Passate gratuitamente a <a href="http://www.microsoft.com/italy/windows/products/winfamily/ie/default.mspx" target="_blank">Internet Explorer 8</a>, o <a href="http://www.mozilla-europe.org/it/firefox/" target="_blank">Firefox</a>, <a href="http://www.apple.com/it/safari/download/" target="_blank">Safari</a>, <a href="http://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="http://www.opera.com/" target="_blank">Opera</a>.’;$("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′})}
})
[/javascript]
Tasks & tools
styleCheckbox: a jQuery plugin
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.
(altro…)
