Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Plugin per upload file con jquery

Maggio 30th, 2009 by Giovanni Caputo

Uploadify - Single and Multiple File Upload Plugin for JQuery

Realizza lo script per l’upload di file con jquery. UPLOADIFY

Il codice molto semplice:

<body>
<input type="file" name="fileInput" id="fileInput" />
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
'uploader'  : 'uploader.swf',
'script'    : 'upload.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
</script>
</body>

Category: Open Source, Programmazione, Siti Web | No Comments »

Effetti AJAX

Maggio 2nd, 2009 by Giovanni Caputo

1. Image Menu

2. ImageFlow

3. Instant.js

4. Glassbox

5. Search Field CSS/JS

6. Protoload

7. jwysiwyg

8. jquery.biggerlink 2

9. jQuery Tag Suggestion

10. Facebox

11. Humanized Messages

12. LightWindow v2.0

13. Unobtrusive Table Actions

14. jQuery checkbox

15. iCarousel

16. MochaUI

17. jTip

18.Uni-Form

19. Validation Hints

20. Control Tabs

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Scroller di immagini in JQuery

Aprile 23rd, 2009 by Giovanni Caputo

Finished Product

Se volete realizzare uno scroller di immagini in jquery potete sfruttare il seguente tutorial:

LINK

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Tutorial PHP + jQuery

Aprile 11th, 2009 by Giovanni Caputo

Vediamo alcuni progetti con Demo che utilizzano PHP e jQuery.

Directory Tree

Check out the Demo Here

Pagina di amministrazione di foto

Commenti sincroni con jquery, PHP e JSON

Check out the Demo Here

Ajax login

Check out the Demo Here

TO DO list

Check out the Demo Here

Modulo newsletter

Check out the Demo Here

Leggere dati da un database e convertirli in XML per permettere la lettura da parte di jQuery

Check out the Demo Here

Validare un orm sia client che server side

Check out the Demo Here

Realizzare uno ShoutBox

Check out the Demo Here

Realizzare una progressBar

Check out the Demo Here

Campi con autocompletamento

Ricerca Apple – style

Check out the Demo Here

Upload e crop di immagini

Check out the Demo Here

Fliker scroll

Check out the Demo Here

Sistema di votazione

Check out the Demo Here

Mail con feedback SMTP

Check out the Demo Here

Ricaricare un elemento ad intervalli di tempo regolare

Check out the Demo Here

Image Replacement

Check out examples here

Read the rest of this entry »

Category: Programmazione, Siti Web, Tecnologia | No Comments »

Evitare conglitti con jQuery

Gennaio 18th, 2009 by Giovanni Caputo

Basta sostutuire il nomale dollaro con una nuova shorthand ($j, in questo caso).

var $j = jQuery.noConflict();

$j(document).ready(function(){
$j("#test").css("padding","10px");
});

Category: Programmazione, Siti Web, Tecnologia | No Comments »

Slider: plug-in per Jquery

Gennaio 9th, 2009 by Giovanni Caputo

Easy Slider è un plug-in per JQuery che permette di creare slider di testo o immagini orrizzontali o verticali in modo molto semplice.

Download easySlider.zip

Per creare lo slider basta

<div id="slider">
<ul>
<li>contenuto</li>
<li>contenuto</li>
<li>contenuto</li>
</ul>
</div>

ed inserire i seguenti comandi,tra i tag <head> ed </head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>

Per altre info : FONTE

Category: Curiosità, Programmazione, Siti Web, Tecnologia | 1 Comment »

Funzioni Jquery

Dicembre 21st, 2008 by Giovanni Caputo

http://nettuts.s3.amazonaws.com/154_cheatsheet/jquery12_colorcharge.png

In questa immagine sono riassunte le funzioni di JQuery.

Category: Programmazione, Siti Web | 1 Comment »

Creare widget animato come quello di Amazon

Dicembre 17th, 2008 by Giovanni Caputo

Il tutorial per  creare un widget animato come quello di Amazon:

TUTORIAL

Category: Siti Web, tutorial | No Comments »

Imitare l’interfaccia di iGoogle

Dicembre 7th, 2008 by Giovanni Caputo

Se volete realizzare una pagina internet con l’interffaccia simile a quella di iGoogle, potete utilizzare il seguente tutorial:

TUTORIAL

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Gallerie di immagini utilizzando jQuery e Mootools

Dicembre 5th, 2008 by Giovanni Caputo

SmoothGallery

Basata sulla libreria Mootools, consente di creare slideshow di immagini mettendo a disposizione vari parametri come lo scorrimento automatico ed il tempo riservato ad ogni fotografia. E’ possibile anche avere più set di immagini nella stessa galleria: funzione comoda per risparmiare spazio nella pagina.
In assenza di JavaScript, le immagini appaiono comunque precedute da titolo e descrizione. Il difetto riguarda i controlli, non è infatti possibile scorrere le foto da tastiera.

Slideshow 2

Questo script basato sul framework Mootools, che può essere a sua volta esteso con altre funzionalità, come l’anteprima delle immagini con Lightbox.
Notevole la realizzazione degli esempi: disabilitando JavaScript le funzionalità restano le stesse, spariranno semplicemente le transizioni. Ottimi anche i controlli, non c’è alcun problema a spostarsi tra le immagini utilizzando anche la tastiera.

Galleria

Galleria

Questo script si basa su jQuery e pesa solamente 4kb. Non è intrusivo, degrada senza problemi in assenza di JavaScript o con i CSS disabilitati e può essere personalizzato facilmente anche nell’aspetto. Le immagini sono organizzate in una lista nel codice HTML: una soluzione ottimale.
Notevole anche l’efficienza dello slideshow, perchè le foto vengono caricate e mostrate solo quando disponibili, evitando attese nel momento dell’interazione.

Se conoscete altre soluzioni accessibili per la creazione di gallerie di immagini segnalatele nei commenti, è sempre utile conoscere le migliori risorse in questo ambito. Potete trovare altri script nel mio precedente post dedicato a Lightbox ed ai suoi cloni: se comunque volete uno slideshow accessibile il mio consiglio è di partire dagli script appena illustrati.

Category: Programmazione, Siti Web | No Comments »