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.

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.)

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='<div id="stopie6">Il programma che state utilizzando per navigare è obsoleto. Per aumentare la sicurezza durante la navigazione e le funzionalit&agrave; 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'})}
            })

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.
Read the rest of this entry »