Creare temi per Twitter Bootstrap con Bootstrap Magic

Twitter Bootstrap è un framework basato su Javascript  / jQuery e CSS che offre parecchi controlli preimpostati.

Molto semplice da usare, leggero e anche responsive se si vuole.

Lo sto usando con soddisfazione su diversi ormai!

Volendo è anche possibile personalizzare il CSS.

Ci sono due modi per farlo, oltre ad editare direttamente i CSS ovviamente.

Un primo strumento ce lo offre il sito stesso: Customize.

Solo che questa pagina è abbastanza statica in quanto non da una preview delle modifiche.

Twitter Bootstrap Datepicker

Twitter Bootstrap è un framework Javascript e CSS leggero e pieno di funzionalità interssanti.

Tra queste, però, gli manca un datepicker.

Lo possiamo integrare però attraverso un plugin esterno scaricabile da qua.

Una volta scaricati entrambi, aggiungiamoli alla pagina:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="bootstrap/css/datepicker.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Questi sono i JS e i CSS che ci servono; script.js è dove metteremo il codice per impostare il datepicker.

jQuery fullBG e Internet Explorer 8

jQuery fullBg è un plugin per jQuery che permette di usare una immagine come sfondo a tutto schermo.

Il plugin si occuperà in automatico di ridimensionare l'immagine a seconda della grandezza della finestra del browser.

Testato con successo su Firefox, Safari, Chrome e Internet Explorer 9.

Non funziona invece su Opera, e su IE8 da un piccolo problema.

Il problema di IE8 è che al primo caricamento il plugin non viene avviato; bisogna rinfrescare la pagina.

Possiamo, però facilmente risolvere con un piccolo hack che non comporta problemi con gli altri browser.

Intercettare evento scroll con jQuery

L'esigenza primaria era quella di chiudere tutto i jQuery UI Accordion appena viene scrollata la pagina con la rotella del mouse.

Non chiedetemi per quale motivo mi è stata fatta questa richiesta perchè non la capisco.

Però il cliente ha sempre ragione.....

Controllare se jQuery UI Accordion è aperto o chiuso

Oggi vediamo un piccolo trucco per controllare se un jQuery UI Accordion è aperto o chiuso.

Per farlo useremo jQuery e le proprietà CSS.

Questo perchè quando un accordion è aperto ha alcune classi, e viceversa.

jQuery Validate con array di input

In un precedente articolo ho mostrato come usare il plugin jQuery Validate per la validazione dei form.

Partendo da la vediamo come poter validare il form in caso che ci siano più input con lo stesso nome.

<form action="#" id="frm_email_amici" method="post">
    <dl>
        <dt><label for="emailam">Invita almeno tre amici per diventare Gold</label></dt><br/>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input class="inviaeli" type="submit" value="Invia" name="btn_email_amici" /></dd>
    </dl>
</form>

Qua ci sono 5 input text che hanno lo stesso nome, e alla parte in PHP gliele passo come array.