MaiNick Web » javascript

Semplice menu verticale scorrevole con jQuery

MaiNick — Mon, 08 Jun 2009 07:00:43 +0000

In questo articolo vi mostrerò come creare un semplice menu scorrevole utilizzando jQuery.

Al passaggio del mouse su una delle voci di menu principale viene fuori il rispettivo sub-menu, quando il mouse passa su un’altra voce del menu principale si apre il suo sub-menu chiudendo quello precedente.

La prima cosa da fare è quella di inserire il seguente codice all’interno della sezione :

Si può notare che ci sono 3 file style.css, jquery-1.3.4.min.js e menu.js: il primo file rappresenta lo stile del menu che tratterò dopo; il secondo file è la libreria jQuery 1.3.2 che potete scaricare dal sito jquery.com o caricarla direttamente dai server di Google; il terzo file contiene il codice delle funzioni ed è il seguente:

$(document).ready(function(){
    //
    // Nascondo tutti i menu principali
    $("#menu1 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu2 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu3 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");

    $("#menu1").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu1 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu2").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu2 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu3").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu3 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });
});

La prima riga del codice precedente significa che quando viene caricato il documento vengono eseguite le funzioni al suo interno.

La prima parte del codice permette di nascondere le voci dei sub-menu, in modo che se javascript non è attivo vengono lo stesso visualizzati.

Bisogna poi creare le altri parti del codice per ogni voce di menu principale: il metodo hover di jQuery permette di catturare l’evento di passaggio del mouse sulla voce di menu e eseguire il codice al suo interno, che contemporaneamente all’apertura del rispettivo sub-menu chiude tutti gli altri sub-menu.
Il metodo animate permette di eseguire un’animazione sull’oggetto dalla posizione iniziale alla posizione top scritta con una velocità descritta dalla durata in millesecondi dell’animazione, visualizzando o nascondendo l’oggetto impostando con il metodo css la proprietà display.

Il codice html della pagina non è altro che un insieme di elenchi non ordinati di cui ad ogni voce dell’elenco principale è creato un nuovo elenco con le voci del sub-menu:


    
        
            Menu 1
            
                Sub-menu 1.1
                Sub-menu 1.2
                Sub-menu 1.3
                Sub-menu 1.4
                Sub-menu 1.5
            
        
        
            Menu 2
            
                Sub-menu 2.1
                Sub-menu 2.2
                Sub-menu 2.3
                Sub-menu 2.4
                Sub-menu 2.5
            
        
        
            Menu 3
            
                Sub-menu 3.1
                Sub-menu 3.2
                Sub-menu 3.3
                Sub-menu 3.4
                Sub-menu 3.5

Ad ogni voce di elenco principale assegniamo un id a cui applicare il metodo hover per eseguire l’effetto desiderato, mentre le classi assegnato le utilizzeremo per specificare le proprietà dello stile css:

#menu-wrapper {
    position: absolute;
    height: 300px;
    overflow: hidden;
}
#menu-wrapper ul {
    margin: 0;
    padding: 0;
}
li.menu {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
div.menu-title {
    width: 200px;
    height: 33px;
    margin-right: 20px;
    background-color: #00689b;
}
div.menu-title a {
    padding-left: 15px;
    color: #fff;
    font-size: 24px;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 33px;
}
ul.submenu {
    position: absolute;
    width: 200px;
}
ul.submenu li {
    height: 22px;
    margin-bottom: 1px;
    background-color: #00689b;
    line-height: 22px;
    list-style: none;
}
ul.submenu li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

Il selettore menu-wrapper raggruppiamo tutto il menu dandogli un’altezza massima e specificando la proprietà overflow per nascondere tutto ciò che è al di fuori di esso.

La classe menu-title specifichiamo le proprietà da assegnare alle voci del menu principale; la classe submenu per le voci dei sub-menu.

Demo Codice

Spero che ti sia utile, grazie per la lettura non dimenticarti di iscriverti via RSS per tutte le novità sperando di avere più tempo libero e scrivere altri nuovi articoli.

Fissare il problema dell’overflow orizzontale IE

MaiNick — Thu, 16 Oct 2008 05:30:53 +0000

Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari.

Ho trovato questo plugin per jQuery che permette di fissare il problema dell’overflow orizzontale sullo stesso browser. E’ possibile seguire il progetto alla pagina dell’autore.

In particolare , Firefox e altri, se si ha un overflow orizzontale dell’elemento pone la barra di scorrimento sul lato esterno dell’elemento. In Internet Explorer, se non possiamo vedere tutto il contenuto in verticale, genera la barra di scorrimento verticale, insieme alla barra di scorrimento orizzontale.

Ma il caso peggiore si ha quando abbiamo una sola riga overflowed: la barra di scorrimento orizzontale non è estesa su tutto l’elemento, rimane comunque un piccolo spazio laterale per la barra di scorrimento verticale anche non visualizzandola.

Seguendo l’autore, una soluzione al problema è di applicare i seguenti passi, solo per Internet Explorer:

trovare tutti gli elementi il cui contenuto è visualizzato con barra di scorrimento orizzontale
aggiungere 20 pixel di padding-bottom agli elementi
scostare la barra di scorrimento verticale

E’ possibile applicare questi tre punti tramite JavaScript:

window.onload = function () {
  // solo IE
  if (!/*@cc_on!@*/0) return;

  // trova gli element di prova
  var all = document.getElementsByTagName('*');
  var i = all.length;

  while (i--) {
    // se scrollWidth (la reale larghezza) è superiore alla
    // alla larghezza visibile, applicare le modifiche di stile
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

o creare un plugin per jQuery con tale codice:

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });
    } else {
      return this;
    }
  };
})(jQuery);

// uso
$('pre').fixOverflow().doOtherPlugin();

Validare form con LiveValidation

MaiNick — Wed, 15 Oct 2008 13:17:49 +0000

I form sono molto utili per un iterazione con gli utenti visitatori del sito, ma nella compilazione non c’è situazione più noiosa di essere avvisati, riguardo un errore di compilazione, dopo averlo inviato.

Ci occupiamo in questo articolo di LiveValidation, una libreria in javascript che sto studiando in questi giorni, che risulta (tra quelle provate) la più semplice nell’utilizzo ed efficace.

Il sito ufficiale della libreria presenta oltre al download, una completa documentazione e una pagina ricca di esempi. Sono previste due versioni: una versione basata su Prototype e quella standalone (per utilizzarla con qualsiasi altro javascript framework), e per ciascuna è disponibile una versione compressa.

Validare input

Per utilizzare la libreria bisogna inserirla nella sezione head del documento, in questo modo:

Tutti i campi da validare nel form della pagina devono essere associati ad un ID identificativo univoco. Subito dopo la form, bisogna inserire il codice javascript che richiama la funzione di validazione della libreria:

Nella prima riga del codice abbiamo creato un nuovo oggetto LiveValidation che ha come argomento l’ID dell’input, andiamo poi ad aggiungere all’oggetto il metodo della libreria che vogliamo utilizzare per la convalida dell’input.

Il primo esempio prodotto, aggiungendo il metodo Presence, esso effettua la verifica sull’avvenuta compilazione del campo. Provando l’esempio noterete la presenza degli avvisi in inglese, impostati di default incorporati nel codice della libreria.

Per poterli personalizzare, senza mettere mani al codice della libreria, LiveValidation consente di definire una serie di parametri per ogni modulo, tra cui dei messaggi che andranno a sovrascrivere quelli di default.

Modifichiamo il primo esempio, personalizzando i messaggi di avviso (esempio):

Il metodo Format consente di validare il contenuto inserito nel campo rispetto ad un’espressione regolare definita come parametro (esempio):

Il campo sarà validato solo se al suo interno viene inserita la stringa ‘stringa‘.

Per validare valori numerici si utilizza il metodo Numericality (esempio):

In questo caso, per impostare il messaggio di non validità, il parametro da usare è notANumberMessage.

Al metodo Numericality è possibile passare ulteriori parametri:

onlyInteger = true – validare solo numeri interi (non decimali)
is: 15 – verifica che il valore inserito sia 15
minimum: 12 – verifica che il valore inserito sia maggiore o uguale a 12
maximum: 22 – verifica che il valore inserito sia minore o uguale a 22

I parametri sopra possono essere combinati, l’unica espressione che non è possibile combinare è ‘is’ con ‘minimum’ o ‘maximum’, dove ‘is’ avrà la precedenza. Questo esempio verifica che il valore inserito rientri in un range e sia intero:

Altri tipi di validazione

Lunghezza

E’ possibile utilizzare gli stessi parametri descritti sopra per il metodo Length, con il quale è possibile validare un campo rispetto al numero dei caratteri inseriti.

Inclusione ed esclusione

E’ possibile impostare una serie di valori rispetto alla quale verificare la corrispondenza esatta o parziale del contenuto inserito nel campo. Attraverso il metodo Inclusion il campo sarà validato solo se contiene i valori passati:

Al contrario, usando il metodo Exclusion il campo non sarà validato se contiene i valori passati:

Passando il parametro ‘partialMatch: true’ è possibile controllare anche solo su una parte della stringa.

Checkbox

Attraverso il metodo Acceptance è possibile verificare che un checkbox sia stato o meno spuntato (esempio):

Conferma

Il metodo Confirmation verifica l’uguaglianza tra due input, molto utile per la verifica della password:

Inserisci password: 

Conferma password:

E-mail

Validare form

E’ possibile combinare i diversi metodi descritti sopra su un solo campo.

Il costruttore della libreria consente di istituire il campo del form come un oggetto LiveValidation a cui è possibile passare alcuni parametri facoltativi:

validMessage – messaggio visualizzato alla validazione del campo
onlyOnBlur: true – consente di effettuare la validazione solo quando l’input perde il focus
wait: 500 – tempo desiderato prima di validare l’input dall’ultima volta che si è premuto un tasto
onlyOnSubmit: true – consente di effettuare la validazione sol quando il modulo sarà inviato

Personalizzare lo stile degli avvisi

Tramite un foglio di stile possiamo personalizzare lo stile e la formattazione degli avvisi. E’ possibile definire appena cinque regole con classi che si applicano ai messaggi di avviso e ai campi:

/* classe che si applica a tutti i messaggi di validazione */
.LV_validation_message {
    font-weight: bold;
    margin: 0 0 0 5px;
}
/* classe che si applica ai messaggi di validità */
.LV_valid {
    color: #00CC00;
}
/* classe che si applica ai messaggi di non validità */
.LV_invalid {
    color: #CC0000;
}
/* stili applicati ai campi validi */
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
/* stili applicati ai campi non validi */
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}

Semplice menu verticale con effetto fisarmonica via JavaScript!

MaiNick — Sun, 13 Jul 2008 15:50:50 +0000

Di effetti a fisarmonica in JavaScript ne sono stati creati moltissimi, ma quello che oggi vi voglio presentare ha una caratteristica molto importante per gli sviluppatori, è leggerissimo.

Uno JavaScript che vi permette di avere un effetto fisarmonica sul menu o qualsiasi altro box dei vostri siti internet. La caratteristica fondamentale, come dicevo prima, è che pesa poco più di 1Kb, questo rende lo script più funzionale e veloce nel caricamento.

Uno degli accordion script più piccoli ed estremamente semplice e facile da integrare. Non richiede alcun framework ed è completamente cross-browser compatibile.

La prima cosa da fare è quella di inserire il seguente codice JavaScript, all’interno della sezione del vostro sito:

e inserire all’interno del tag il seguente codice JavaScript per il controllo della fisarmonica e per caricare all’apertura della pagina lo script:

che è nella forma:

Una volta inserito questo andremo a creare il nostro menu o box con il seguente codice:


Simple Accordions

    
Home

    
    


        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        


    
    



        Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        


    
    
About Us


        Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        


    
    
Downloads


        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.

Terminate queste tre operazioni avremo un menu con effetto fisarmonica leggero e funzionante al 100%. Lo script è veramente comodo, un altro effetto 2.0 da inserire sul nostro sito personale.

Maggiori informazioni sullo script li troverete nel sito dell’autore; è possibile vedere anche cosa fa lo script stesso andando alla pagina dedicata alle demo.