Esse blog está mais parecendo um blog exclusivo sobre jQuery, mas não é. O fato é que jQuery realmente é um framework bem interessante pra se trabalhar, dada a facilidade de uso (e re-uso) e aprendizado. Como se não bastasse, essa é a idéia principal do blog.

Me inscrevi no ClientSide especialmente pra falar de (X)HTML e CSS, que são minha especialidade, mas, apesar de não ser programador de fato, vou dar melhorias a serem feitas (como a maioria das funções recém feitas), mas que é bem fácil de fazer e bastante útil se você quiser melhorar a acessibilidade de seu site. Chega de papo e vamos ao código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function fontSize(action, container){
    container = typeof(container) != 'undefined' ? container : "div.texto" //se não for especificado um container será "div.texto"
    baseSize = parseInt($(container+" p").css("font-size")) //extraímos o font-size padrão, tomando como base o p do nosso container
 
    $els = $(container).children()
 
    $els.each(function(){
        $fs = parseInt($(this).css("font-size"))
        if(action=="plus" && baseSize<16) $fs+=1
        else if(action=="minus" && baseSize>13) $fs-=1
        $(this).css("font-size", $fs)
    })
}
$(function(){
    $(".decrease").click(function(){ fontSize("minus") }).blur() //blur() aqui remove o foco do elemento, logo após o clique
    $(".increase").click(function(){ fontSize("plus") }).blur()
})

Quinze linhas de código. Nada mal. A única consideração a ser feita aqui é que ao chamarmos a função fontSize, há um parâmetro obrigatório, que é exatamente a ação a ser feita: aumentar a letra (plus) ou diminuí-la (minus).

Agora, tudo o que precisamos fazer é chamar dois arquivos javascript no header de nossa página (jquery.js e font-size.js) e criar os elementos com os respectivos id’s pra chamar a função correspondente quando clicados. Links? Inputs? Não… Botões! Aliás, uma lista deles:

<ul>
  <li><button type="button">Diminuir a letra</button></li>
  <li><button type="button">Aumentar a letra</button></li>
</ul>

Com isso, tudo o que estiver dentro de uma div com classe igual a “texto” será alvo de nossa função e terá seu tamanho de fonte alterado. Listas, títulos, parágrafos, div’s, address, strong… tudo o que for filho direto de uma <div class="texto">.

Obviamente, como disse anteriormente, a função precisa de melhorias, mas o core está aí. Uma melhoria certa é a funcionalidade de resetar o tamanho da fonte para o padrão. Mas isso fica pra outra hora, já passam das 2h da manhã. Fica aí uma sugestão de passatempo pra vocês. :)