Cambiare la dimensione del testo con jQuery
Vediamo assieme come dare la possibilità ai nostri visitatori di modificare, in poche righe di codice, la dimensione del testo contenuto in una pagina HTML tramite l’utilizzo di jQuery.
Molti siti hanno la possibilità di cambiare la dimensione del proprio testo tramite un semplice click, dando così la possibilità ai visitatori di cambiare la dimensione del testo, permettendo così a chi volesse di rimpicciolire o ingrandire il testo a proprio piacimento.
Con jQuery è veramente semplice poter implementare questa funzione al nostro sito, quindi iniziamo! Creiamo la nostra pagina HTML:
1 2 3 4 5 6 | <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); </script> </head> |
jQuery Dimensione carattere
A- A A+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus posuere mauris, quis viverra urna vehicula ut. Ut laoreet suscipit lacus, pulvinar viverra felis condimentum a. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam nec eros arcu, ac porta tellus. Fusce non turpis at velit lacinia imperdiet nec eget purus. Sed in elementum arcu. Vivamus convallis malesuada sapien vel ullamcorper. Pellentesque a volutpat enim. Phasellus tincidunt velit ac eros elementum quis accumsan dui placerat. Nunc eu orci nulla. Maecenas nec ultrices orci. Aenean porttitor dolor vel purus ornare imperdiet. Morbi id pretium lectus. Duis vulputate, mi quis euismod porta, nibh odio facilisis turpis, non ornare massa erat ac turpis. Cras tincidunt ipsum eu lorem sodales ut euismod diam dictum. Nam laoreet aliquam consequat. Curabitur laoreet, leo sed venenatis commodo, nisi ipsum vulputate eros, ac vestibulum augue eros in magna. Donec pharetra, tortor non adipiscing semper, felis enim scelerisque nulla, vel pharetra augue nulla eget felis. Praesent porta lorem quis orci molestie sagittis molestie ligula iaculis. Quisque mollis varius neque ac tincidunt. In quis lectus nec nisi faucibus interdum pharetra sit amet neque. Morbi egestas tempor interdum. Fusce convallis, lacus sed posuere venenatis, libero erat consequat lacus, nec mattis libero ligula vel arcu. Mauris hendrerit congue augue ut bibendum. Vivamus feugiat nulla et tortor cursus et auctor tortor lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rhoncus accumsan faucibus. Donec elementum pharetra enim id hendrerit.
Il nostro sito ha un layout molto semplice che ci permette di capire bene il funzionamento del nostro script. Come potete notare abbiamo già inserito il richiamo al file jQuery tramite le API di Google (come ho spiegato nel post precedente) e inoltre ci sono due collegamenti a due rispettivi file CSS e tre link che hanno un attributo data-file che ci permetteranno di scegliere la grandezza del carattere tramite la scelta small, norm e big.
Costruiamo ora il nostro script, inseriamo quindi prima della chiusura del tag </head>, le seguenti righe di codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function(){ //Quando la pagina è caricata $('a').click(function(){ //selezioniamo il tag "a" quando viene clicato var data = $(this).data('file'); //assegniamo alla variabile "data" il valore //dell'attributo data-file dell'elemento appena cliccato (this) $('link:first').attr('href', data + '.css'); //cerchiamo nei collegamenti ai file CSS il primo (link:first) //l'attributo href e cambiamoli valore con quello della variabile "data" //unito all'estensione .css }); }); |
Il nostro script è ben commentato e possiamo capirne quindi il funzionamento! Tuttavia effettivamente, quali sono le modifiche che apporta?
Tramite il click sui link della nostra pagina (A-, A, A+) cambiamo il primo collegamento al file CSS, modificando così il collegamento e di conseguenza il file collegato alla pagina. Infatti, cliccando, ad esempio, su A+ cambiamo il nostro file CSS da norm.css a big.css, dove all’interno vi sono le varie dimensioni di carattere dei nostri tag <p>.
Per il funzionamento del codice è importante lasciare al primo posto il collegamento del file CSS da modificare, infatti, questo script cerca, fra tutti i file CSS, il primo nella pagina cambiando così solamente esso.
La potenzialità di questo codice è infinta! Noi ci siamo limitati, infatti, a cambiare solamente la dimensione del carattere, ma possiamo modificare qualsiasi cosa all’interno della pagina HTML cambiando solamente il contenuto dei vari file CSS e del valore degli attributi dei link!
Provate quindi anche voi a trovare nuovi funzionamenti di questo script e condividete le vostre idee 
CSS, dimensione carattere, evento, jQuery
