Archive for the ‘javascript’ Category

Featured List – una vetrina in jQuery

Feature List è un semplice plugin di jQuery che rende semplice e facile la creazione di un widget “Vetrina” da inserire nelle homepage dei vostri blog o in un normale sito web.
Il file .js è leggerissimo di appena 2k ed il codice può essere utilizzato per contenitori multipli e il funzionamento è simile a quello [...]

More »

Masonry un plugin jquery per layout

Masonry è plugin jquery per layout. Pensato come il rovescio della medaglia di CSS float. Considerando che riorganizza gli elementi float prima orizzontalmente poi verticalmente, secondo una griglia. Il risultato minimizza gli spazi verticali tra elementi di diversa altezza.
L’utilizzo di Masonry è estremamente  semplice basta collegare al funzione masonry() all’elemento wrapper del layout. A seconda [...]

More »

jQSlickWrap – Collocare del testo intorno a un immagine

jQSlickWrap è un plugin di jQuery che permette facilmente e accuratamente “wrappare” il testo attorno a un immagine inserita nel contenuto.
L’implementazione è semplice basta inserire una riga di codice jQuery:
$(‘img’).slickWrap();
L’immagine dev’essere un’immagine irregolare e deve utilizzare la proprietà float all’interno del css.
Sito web: http://jwf.us/projects/jQSlickWrap
Demo: http://jwf.us/projects/jQSlickWrap/example2.html

More »

Effetto bolle con Css

E’ possibile creare un menu tipo Dock di Mac utilizzando solamente il CSS, ovviamente l’effetto non sarà fluido come per il plugin di jquery, ma riesce a dare comunque un bell’effetto al menu. Questo tutorila include due metodi, uno con l’utilizzo di CSS sprites, l’altro con lo scambio di immagini.
Sito web: http://aext.net/2009/11/bubble-effect-with-css/
Demo: http://aext.net/example/bubble-css/

More »

TopUp per la visualizzazione di immagini e pagine in popup

TopUp è un’altra libreria javascript che utilizza jquery, di facile utilizzo, utile per la visualizzazione non intrusiva di immagini o di pagine web all’interno di pop up.
E’ assolutamente free anche per usi commerciali, oltre che essere compatibile con la maggior parte dei browser. L’installazione di TopUp consiste nell’inserimento all’interno di una pagina di un file, non [...]

More »

Creare una miniatura con descrizione visualizzabile al rollover

In questo tutorial viene mostrato come creare una descrizione che appare in dissolvenza quando si fa il rollover su una miniatura.
Viene utilizzato jQuery framework e CSS per creare questa trasparenza e l’effetto dissolvenza.
Vedi tutorial: http://www.queness.com/
Vedi Demo: http://www.queness.com/resources/html/thumbnail/index.html

More »

Modulo contatti con Ajax, jQuery e Php

Fornire un mezzo semplice e affidabile di feedback o di contatto da parte dei visitatori del sito è una parte fondamentale di un sito web, quindi possiamo dedicare qualche minuti in più per la sua realizzazione e cercare di renderla accattivante e funzionale.
In questo tutorial viene spiegato passo passo come realizzare un modulo di [...]

More »

Inserire le demo di uno script all’interno di una pagina con inFrame

Quando si descrive una tecnica o un effetto in javascript o in css molto spesso si ricorre ad un link per visualizzare la demo in modo da non dover inserire all’interno della pagina nell’header ulteriori file che potrebbero andare in conflitto fra di loro.
Itilizzando inFrame il lettore non dovrà cambiare pagina per visualizzare la demo, [...]

More »

Aggiungere un gradient al rollover di una immagine

La  soluzione si basa su CSS Sprites e poche righe di jQuery, ma richiede un pò di preparazione prima di poter essere utilizzata.
Non è consigliabile per i progetti su larga scala ma sicuramente utilizzabile per la preentazione del proprio portfolio.
Sito web: http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
Demo: http://www.sohtanaka.com/web-design/examples/hover-over-trick/
Licenza: License Free

More »

AToolTip – Un semplice Tooltip con jQuery

AToolTip è un piccolo script in javascript (più precisamente in jQuery) che permette di creare dei semplici tooltip.
Riassumento le sue caratteristiche AToolTip è:

Leggero (solamente 3kb non compressi)
Facile da utilizzare
E’ possibile scegliere la modalità fissa o fare in modo che il tooltip segua il movimento del mouse
Completamente personalizzabile
Compatibile con Firefox 2.5+, Safari, Opera, Chrome e Internet [...]

More »