Veramente bello questo script utile per la creazione di slider semplice ma d’effetto.

Vedi demo

Dream Css ha messo a disposizione lo script e un piccolo tutorial per la realizzazione, per mette la visualizzazione dell’immagine e della sua descrizione e si ha inoltre la possibilità di visualizzare le slide in modo automatico, oppure selezionarle tramite bottoni numerati.

Tutorial e download: http://www.dreamcss.com

Quante volte vi è capitato di utlizzare Google per verificare l’esattezza grammaticale di una parola? A me spesso!

Vi presento websource.it una piccola applicazione web che permette l’inserimento di due campi di ricerca e restituisce il numero dei risultati (trovati su Google) permettendo quindi il confronto tra le parole ricercate.

jquery Superbox! è uno script che permette di visualizzare finestre con l’effetto lightbox.
E’ un plugin che accompagna il framework jquery a partire dalla 1.3.x

- E’ accessibile in quanto solamente l’attributo rel è necessario per lanciare lo script, l’attributo href invece definisce la sorgente che dev’essere aperta all’interno della finestra che può essere un’immagine, gallerie di immagini, una pagina web o del contenuto presente all’interno della pagina.
- Superbox non ha bisogno di nessuno stile, ma nello stesso tempo è possibile creare facilmente uno foglio di stile personalizzato
- E’ rilasciato sotto licenza MIT e quindi libero di essere utilizzato , modificato, pubblicato, distribuito….con la sola accorteza di lasciare intatti i credits dello script.

Pagina web dello script: http://www.pierrebertet.net/projects/jquery_superbox/
Demo: http://www.pierrebertet.net/projects/jquery_superbox/#mode-image

Page speed è un Add-on Firefox/firebug open source. E’ un tool che una volta lanciato suggerisce come  è possibile effettuare dei cambiamenti nelle nostre pagine web per migliorarne lo loro velocità.

Page Speed automaticamente ottimizza le immagini restituendone una che può essere immediatamente utilizzata sul sito web. Il tool inoltre controllo i problemi di caricamento dovuti alla presenza di file css o javascript non utilizzati all’interno della pagine che però ne rallentano la visualizzazione.

Sito web: http://code.google.com/intl/it-IT/speed/page-speed/

Position Absolute condivide un utilissimo pluging per la validazione “inline” dei form con jQuery.

Vedi la Demo

Offre un modo molto flesibile per la visualizzazione degli errori con la possibilità di applicarlo a diversi stili di form. Quando lo script rivela un errore viene creatu un div posizionato in alto a destra del campo di input che mostra il messaggio di errore.

Le regole di validazione sono create all’interno delle classi di ogni file di input come questo ad esempio

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="first" type="text" />

Questo plugin al  momento supporta le seguenti validazioni:

• campo obbligatorio
• lughezza
• telefono
• email
• sono numeri
• solo lettere
• & more

E’ possibile inoltre definirel le regole via RegEx e i messaggi di errore possono essere tradotti tramite file.

Sito web: Position Absolute

Preloaders.net, è un sito web che permette di generare immagini animate per preload scegliendo tra diverse forme e personalizzazioni in base alle vostre esigenze.
In particolare è possibile scegliere tra disegni 3D, Rettangolri, Ciircolari, Horizzontali o verticali o popolari. Configurare il colore di sfondo e il colore dell’oggetto animato. La grandezza della animazione e la sua velocità.
Una volta configurato il tutto non resta che scaricarlo e utilizzarlo.

Sito web: preloaders.net

Nota dolente i background trasparenti! Io ne so qualcosa, con IE6 è sempre una lotta continua in quanto è noto ormai a tutti che non supporta i le immagini png trasparenti. Esistono in giro differenti tecniche per risolvere questo problema, questo è uno tra i migliori in quanto riesce a rendere alcuni elementi trasparenti senza bisogno dell’utilizzo di file png.

Scarica i seguenti file e includili all’interno del tuo sito web:
http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
http://design-forge.ro/projects/opensource/transBG.jquery.plugin.js

Inserisci il seguente codice all’interno del tag <head>:

<script type=”text/JavaScript” src=”jquery-1.2.6.min.js”></script>
<script type=”text/JavaScript” src=”transBG.jquery.plugin.js”></script>

Decidi quale Css selettori utilizzare, jQuery utilizza i selettori Css per richiamare gli oggetti presenti all’interno della pagina (id, classi, div…)

Adatta il seguente codice a seconda delle tue necessità e incolla la parte all’interno del tag <head> oppure in un file javascript separato.

In pratica basta utilizzare la funzione transBGdraw() per ogni elemento che si vuole rendere trasparente.

<script type="text/JavaScript">

$(document).ready(function()

{
$(”#id”).transBGdraw();
$(”#menu”).transBGdraw();
$(”#container”).transBGdraw();

// !!!IMPORTANT!!!
// if you use tagnames
// or classes, make sure
// every object affected
// has a unique id.
$(”div”).each(function()
{ $(this).transBGdraw(); });

$(”h6”).each(function()
{ $(this).transBGdraw(); });

$(”.class1”).each(function()
{ $(this).transBGdraw(); });

$(”.text”).each(function()
{ $(this).transBGdraw(); });

$(”.information”).each(function()
{ $(this).transBGdraw(); });

});

</script>

Tutorial completo

Internet Explorer è famoso per il suo ‘double margin bug’ che si verifica quando si applica la proprietà float ad un box, in certi casi il margine viene raddoppiato.

Una soluzione a questo problema è l’utilizzo del plugin per jQuery  jquery.fixDoubleMargin.js (compatibile con prototype, mootools e scriptaculous) realizzato da Alessandro Coscia.

Lo script non usa display:inline è quindi è sicuramente versatile e scalabile e non ha bisogno di  hacks css.

Anche questo script è facile da usare basta inserire i seguenti codici prima della chiusura del tag <head>:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fixDoubleMargin.js" type="text/javascript"></script>
<script src="js/jqbrowser-uncompressed.js" type="text/javascript"></script>

e successivamente inserire:

  <script>
  var $j = jQuery.noConflict();
  $j('document').ready(function () {
    $j('div').fixDoubleMargin();
  });
  </script>

per scaricare lo script e per maggiori informazioni vi rimando al sito dell’autore: http://www.programmatorephp.it

Internet Explorer non implementa correttamente il Box model Standard, questo causa la visualizzazione del box con dimensioni differenti in diversi browser.

Lo Standard W3C spiega qual’è il modello corretto di Box Model da adottare

Questa immagine (via Wikipedia ) descrive in modo semplice il problema, assegnando una determinata larghezza ad un box padding, bordi e margini vengono interpretati in modo errato da IE.

Alessandro Coscia ha realizzato uno script per jQuery: jquery.fixBoxModel.js estremamente versatile e scalabile.

che risolve il problema in modo semplice e veloce, basta scaricare lo script insieme a jQuery e inserirli prima della chiusura del tag <head> in questo modo:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fixBoxModel.js" type="text/javascript"></script>

e successivamente inserire il codice seguente per attivare il plugin:

  <script>
var $j = jQuery.noConflict();
 $j('document').ready(function () {
     $j('div').fixBoxModel();
});
 </script>

Per vedere una demo e scaricare il file di script vi rimando al sito dell'autore: http://www.programmatorephp.it

• Semplice esempio
• Esempio con foglio di stile
• Multi slider

Sito web : http://code.google.com/p/loopedslider/