La pratica di inserire due icone per ingrandire e ridurre la grandezza del testo non è molto utilizzata, anzi,è una soluzione che sta man mano sparendo anche dalle pagine web delle maggiori testate giornalistiche.
Non è detto per che per qualche progetto possa essere utile, jQuery come sempre ci viene incontro.
Prima di iniziare qualsiasi operazione verifichiamo di aver già jQuery collegata alla pagina in questione, nel caso ancora non lo sia colleghiamola.
Una volta effettuato questo passaggio diamo uno sguardo al codice HTML nel nostro articolo, che nel mio caso sar questo:
Titolo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor.
Nonostante la nostra struttura sia molto semplice la metodologia per l’ingrandimento/riduzione del testo non cambia, l’importante mantenere un identificatore associato al contenitore padre (nel nostro caso “page”) dei tag relativi al testo (nel nostro caso <p> e <h1>). A questo punto inseriamo nella struttura del nostro articolo le due icone :
Titolo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget dui quam. Nulla posuere velit urna. Donec aliquet, diam quis auctor laoreet, mi arcu ultricies dolor, sed mollis neque purus in justo. Nullam faucibus lectus et mauris hendrerit consequat placerat mi luctus. Pellentesque egestas dui vel eros pretium sodales. Vestibulum eu tellus magna, ullamcorper consequat enim. In sit amet eros odio. Sed vitae porttitor lacus. Praesent urna purus, tristique et elementum nec, blandit ac lorem. Fusce nec elit dolor.
Ad entrambe le icone ho associato un identificativo (“piu” e “meno”) che utilizzerò con jQuery associandolo all’evento, nel nostro tag script infatti aggiungo l’attivazione del DOM e definisco gli eventi:
A questo punto se navigherete la vostra pagina noterete come al click delle due icone vi appariranno due messaggi “Aumenta testo” o “Diminuisci testo”.
Non resta che sostituire gli alert() con il comando jQuery per ingrandire e rimpicciolire il testo:
Per entrambe gli eventi selezioniamo tutti i figli di tipo h1 dell’id “page” e tramite la funzione .css() li ingrandiamo/riduciamo di 1px.
I materiali della guida come al solito potete scaricarli tramite il tasto “Download”:
