Good2Know

Come personalizzare un input file di un form

Filippo Matteo Riggio — Tue, 10 Aug 2010 11:53:34 +0000

Cari lettori di good2know, oggi vi presento un nuovo articolo sulla personalizzazione degli input file di un form.

Il metodo è semplice, utilizza i fogli di stile CSS e le proprietà del DOM.

Per vedere un esempio cliccate sul link.

Il concetto è di mettere un input falso al di sopra dell’input file reale e fare in modo che quando viene cliccato l’input file falso o il bottone sfoglia si apra comunque la finestra di scelta del file.

Una volta selezionato il file, l’input file reale dovrà avere come “value” il reale percorso del file.

Di seguito il codice css :

.input_file{
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
.input_file:focus{ background-color: transparent;}
input {
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
input:focus {	background-color: transparent;}
div.fileinputs {
position: relative;
height: 26px;
width: 202px;
}
input.file {
width: 274px;
margin: 0;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 274px;
height:26px;
padding: 0;
margin: 0;
z-index: 1;
}
div.fakefile input {
position:relative;
bottom:8px;
margin:0 0 0px 0;
padding:5px 0 0px 10px;
}

Di seguito la funzione js che dovrà essere richiamata nel tag body.

var W3CDOM = (document.createElement && document.getElementsByTagName);
function init() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='img/btn_sfoglia2.png';
        fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].getAttribute('noscript')) continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		if (x[i].value)
			x[i].onchange();
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}

Come ultimo appunto, ecco la parte del DOM con il codice HTML :

Compatibilità

Lo script qui sopra è compatibile con tutti i browser, bisogna solo personalizzare il css per Explorer.

Download

Di seguito il link per scaricare l’esempio di sopra.

CustomSelect, plugin jQuery per personalizzare il select dei form

Filippo Matteo Riggio — Wed, 21 Jul 2010 08:52:09 +0000

Salve a tutti lettori di good2know, oggi ho terminato di creare un plugin jQuery per personalizzare i tag select dei form.

Ecco il link per il download.

Di seguito una mini guida all’utilizzo.

Qui potete vedere un esempio del plugin.

Come al solito aggiungete il framework jQuery nell’head della pagina.

Successivamente anche il file javascript e quello css del plugin :

Come si usa?

Per avviarlo bisogna inserire sempre nell’ head il richiamo alla funzione del plugin.

Questo invece il codice del select da aggiungere all’interno del body.


Seleziona valore



Seleziona valore

Option 1

Option 2

Option 3

Compatibilità e dati sulla release

Il plugin è compatibile con tutti i browser, ed è rilasciato sotto licenza Creative Commons.

Basta solo lasciare all’interno del file js il nome dell’autore e il link al blog.

Come personalizzare gli input di un form, checkbox, radio e select

Filippo Matteo Riggio — Fri, 09 Jul 2010 08:46:01 +0000

Da web developer quale sono ho sempre desiderato poter personalizzare gli input dei form, magari con stili o sfondi particolari.

Da oggi si può, con un metodo che utilizza Javascript e i fogli di stile CSS.

E’ un metodo valido per quasi tutti browser, eccetto l’ormai moribondo Internet Explorer 6.

Di seguito trovate il link al pacchetto zip contenente un esempio, i file javascript da scaricare e il foglio di stile associato.

Input personalizzati

Per far girare questo script basta inserire all’interno del tag input la classe “styled”.

Come lavora?

Il file javascript sostituisce all’interno della pagina html tutti gli elementi che hanno la classe “styled” con un tag span con gli stili assegnati nel CSS, agganciando in automatico anche gli eventi legati al mouse.

Per far lavorare al meglio lo script, con checkbox, radio e select personalizzati bisogna specificare 3 variabili all’interno del file javascript che riguardano le altezze dei checkbox e dei radio e la lunghezza del tag select.

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

Anche per modificare gli stili dei tag basta modificare il foglio di stile.


.checkbox, .radio {

width: 19px;

height: 25px;

padding: 0 5px 0 0;

background: url(checkbox.gif) no-repeat;

display: block;

clear: left;

float: left;

}

.radio {

background: url(radio.gif) no-repeat;

}

.select {

position: absolute;

width: 158px;

height: 21px;

padding: 0 24px 0 8px;

color: #fff;

font: 12px/21px arial,sans-serif;

background: url(select.gif) no-repeat;

overflow: hidden;

}

Esempi

Qui trovate un esempio.

Qui trovate l’articolo intero di Ryanfait.

Modalità d’utilizzo

Lo script è sotto licenza Creative Commons.

Basta lasciare il titolo, il nome e il sito web all’interno del file JavaScript.

Cuscini per tutti i geek!

Filippo Matteo Riggio — Mon, 14 Jun 2010 07:18:57 +0000

Di seguito vi presento una raccolta di cuscini per tutti i geek.

1. Cuscino CTRL+ALT+DEL

2. Cuscino a forma di cappello di Super Mario

3. Cuscino con le icone dei Social Network

4. Cuscino a forma di PSP

5. Cuscini con i personaggi di Pacman

6. Cuscino a forma di Gameboy

Dirpy – Nuova piattaforma per convertire i video di youtube in mp3

Filippo Matteo Riggio — Wed, 19 May 2010 07:12:18 +0000

Dirpy è una nuova piattaforma online che permette, inserendo il link di un video Youtube, di salvare il contenuto audio sotto forma di un mp3.

Nella fase di conversione si possono scegliere anche alcuni parametri, come :

il nome del file
i secondi di inizio e fine da cui “ritagliare” la traccia
la qualità di campionatura della traccia (64-68 kbps,112 kbps)
informazioni aggiuntive quali nome dell’autore, album, numero di traccia, genere, anno e commento

Una volta inserite le informazioni che ci interessano basterà cliccare sul bottone “Download mp3” è potremo salvare così il nostro mp3.

Fonte : maestroalberto.it

Adobe blocca lo sviluppo di flash per i prodotti Apple

Filippo Matteo Riggio — Fri, 23 Apr 2010 12:27:29 +0000

La nota casa di produzione software Adobe ferma lo sviluppo del packaging per i prodotti made in Cupertino.

Questo dopo l’uscita del nuovo SDK per iPhone versione 4, che prevede applicazioni sviluppate solo in Objective-C (linguaggio madre di Apple), C++ e Javascript.

Tutti si aspettavano che nel nuovo sistema operativo del melafonino fosse integrata anche la possibilità di gestire i contenuti flash.

Adobe quindi, decide di impegnare tutte le risorse sullo sviluppo di Flash per il mobile verso il sistema operativo di Big G, Android.

L’ultima risposta di Apple, tuttavia sembra abbastanza diplomatica:

Qualcuno l’ha capita al contrario: sono HTML5, CSS, Javascript e H.264 (tutti supportati da iPhone e iPad) ad essere [tecnologie] standard e aperte, mentre Flash di Adobe è chiuso e proprietario

Vedremo gli ulteriori sviluppi della vicenda.

Alla prossima, su good2know.

Internet Explorer 9 in fase di test

Filippo Matteo Riggio — Wed, 17 Mar 2010 14:48:51 +0000

Oggi leggendo tra le news del blog di html.it ho afferrato questa notizia che per forza dovevo riproporvi.

Internet Explorer 9 è disponibile in anteprima, seppur si tratta di una fase di test.

Le premesse per avere un browser veloce, affidabile, versatile e, soprattutto per i web developer come me, conforme agli standard css e javascript.

Iniziamo parlando del supporto Javascript, una delle pecche che Microsoft si trascina dal lontano IE 5 e che è stato un flop nella versione 8 in termini di prestazioni.

Il motore javascript di IE è sempre basato su WebKit SunSpider.

Le prestazioni sono migliorate notevolmente, riducendo i tempi di esecuzione, come riportato di seguito nel grafico.

IE9 ha dato un ottimo risultato anche al più rigoroso AcidTest 3.

Passiamo alle novità più pratiche.

Internet Explorer 9 supporta l’HTML 5, gestendo ottimamente gli eventi del DOM e gli stili dello stesso.

Con HTML5 c’è la possibilità di utilizzare il CSS3 e quindi miglior gestione dei testi,font e bordi (anche i bordi arrotondati) .


-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-style: solid;
border-width: 6px;
padding: 48px;

Sono stati inseriti anche i selettori di attributo :

input:not(:enabled)
p:only-child

Oltre alle novità sulle prestazioni di javascript e sull’utilizzo di HTML5 c’è stata una totale revisione del motore grafico WebKit con il supporto al linguaggio SVG.

Le premesse per un ottimo browser ci sono tutte, in un momento in cui Explorer sta venendo surclassato da Firefox e da Chrome.

Potete visitare la pagina dell’anteprima qui, mentre qui potrete scaricare la versione in demo.

Fonte : Blog HTML.it

Funzione per avere le coordinate x ed y delle scrollbar – Javascript

Filippo Matteo Riggio — Fri, 05 Mar 2010 14:24:21 +0000

Oggi vi mostrerò un’altra funzione in javascript molto utile.

Questa funzione vi restituisce un array con le coordinate x ed y delle barre di scorrimento.

Leggete l’intero articolo per vedere la funzione.


// questa funzione restituisce un array con la posizione x,y dello scroll

function getPageScroll() {

var xScroll, yScroll;

// ---> RICAVO LE COORDINATE x ED y DEGLI SCROLL <--- //

// self.pageYOffset : indica la coordinata y di dove si trova la barra dello scroll verticale
// self.pageXOffset : indica la coordinata x di dove si trova la barra dello scroll orizzontale
// (non valido per explorer 6)

// document.documentElement.scrollTop  : indica la coordinata y di dove si trova la barra dello scroll verticale
// document.documentElement.scrollLeft : indica la coordinata x di dove si trova la barra dello scroll orizzontale
// (valido per explorer 6)

if (self.pageYOffset) {
    yScroll = self.pageYOffset;
    xScroll = self.pageXOffset;
}else if (document.documentElement && document.documentElement.scrollTop) {
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
    }else if (document.body) {
                yScroll = document.body.scrollTop;
                xScroll = document.body.scrollLeft;
    }

arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}

Funzione per le dimensioni della pagina reale e della finestra visualizzata – Javascript

Filippo Matteo Riggio — Fri, 05 Mar 2010 14:18:12 +0000

Salve cari lettori di good2know.it, oggi vorrei fornirvi un’utile funzione javascript che vi restituisce le dimensioni reali della pagina e della finestra visualizzata.

Leggete l’intero articolo per vedere la funzione.


// la funzione restituisce in un array
// la larghezza e l'altezza della pagina reale(scroll compreso) e la larghezza e l'altezza della finestra visibile

function getPageSize() {

 var xScroll, yScroll;

 // ---> RICAVO LE DIMENSIONI DELLA PAGINA <--- //

 // window.innerHeight : altezza della finestra visibile
 // window.innerWidth  : larghezza della finestra visibile

 // window.scrollMaxY  : dimensioni massime dello scroll verticale
 // window.scrollMaxX  : dimensioni massime dello scroll orizzontale

 // document.body.offsetHeight : altezza di default del browser
 // document.body.offsetWidth  : larghezza di default del browser

 // se esiste l'altezza della finestra e lo scroll verticale(quindi esiste anche la barra x lo scorrimento)
 // xScroll è la somma dello scroll orizzontale e della larghezza della finestra
 // yScroll è la somma dello scroll verticale e dell'altezza della finestra

if (window.innerHeight && window.scrollMaxY) {
    xScroll = window.innerWidth + window.scrollMaxX;
    yScroll = window.innerHeight + window.scrollMaxY;
}else if (document.body.scrollHeight > document.body.offsetHeight){
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
}else{
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
}

 var windowWidth, windowHeight;

 // ---> RICAVO LE DIMENSIONI DELLA FINESTRA <--- //

 // self.innerHeight : altezza di default della finestra
 // self.innerWidth  : larghezza di default della finestra
 // (dimensioni non valide per Explorer 6)

 // document.documentElement.clientWidth  : larghezza di default della finestra
 // document.documentElement.clientHeight : altezza di default della finestra
 // (dimensioni valide per Explorer 6)

if (self.innerHeight) {
    if(document.documentElement.clientWidth){
        windowWidth = document.documentElement.clientWidth;
    }else{
        windowWidth = self.innerWidth;
    }
    windowHeight = self.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
}else if (document.body) {
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
}

//per le pagine con l'altezza totale minore dell'altezza della finestra del browser
if(yScroll < windowHeight){
     pageHeight = windowHeight;
}else {
     pageHeight = yScroll;
}

//per le pagine con larghezza totale minore della larghezza della finestra del browser
if(xScroll < windowWidth){
    pageWidth = xScroll;
}else{
    pageWidth = windowWidth;
}

//creo l'array e lo ritorno
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
}

La funzione restituisce un array con le dimensioni.

Flip! – Plugin jQuery per ruotare e “flippare” elementi

Filippo Matteo Riggio — Wed, 03 Mar 2010 14:28:24 +0000

Oggi vorrei parlarvi di Flip! un plugin per jQuery che fa ruotare o “flippare” contenuti ed elementi.

L’installazione è semplice, di seguito un mini-tutorial su installazione ed utilizzo.

Installazione

Aggiungete la libreria jQuery nell’head della pagina :

Ora aggiungete nell’head anche il file javascript del plugin :

ed anche il file css del plugin :

Come si usa?
Per avviarlo basta inserire il codice javascript :

$("#mydiv").flip({
    direction:'tb'
});

Opzioni del plugin

Le opzioni che si possono inserire sul plugin sono:

- la direzione dell’animazione :

direction : ‘tb’ ; top-bottom, cioè da sopra a sotto
direction : ‘bt’ ; bottom-top, cioè da sotto a sopra
direction : ‘lr’ ; left-right, cioè da sinistra a destra
direction : ‘rl’ ; right-left, cioè da destra a sinistra

- il contenuto da visualizzare dopo l’animazione :

content : ‘contenuto’

- il colore da visualizzare dopo l’animazione :

color : ‘#ff0000′

- la velocità dell’animazione in millisecondi :

speed : 1000

- i gestori degli eventi dell’animazione :

onBefore : codice ; quello che succede prima dell’animazione
onAnimation : codice ; quello che succede durante l’animazione
onEnd : codice ; quello che succede quando l’animazione è terminata

Oltre alla funzione di base flip() esiste la funzione revertFlip(), che esegue l’animazione in direzione opposta alla sua esecuzione.

Il plugin è stato realizzato da Luca Manno, web developer di Ex Machina in quel di Lugano (Svizzera).